Setting up an XHTML and CSS file

Okay, so you read that separating the content (XHTML) from the presentation (CSS) can save you lot’s of time. But how do you turn that theory into practice? How do I avoid having to open my XHTML files when I want to change the design? The answer is actually a lot simpler than many may think. If you want continuity in your design, your content, the XHTML, will need continuity as well. The XHTML forms the framework to which you attach the styling and the layout. Most web pages are made up of several parts; a heading, main content, navigation links, and a footer. You could compare it to a woman and how she dresses herself. The XHTML is the woman itself and the make-up, clothes, accessories, and shoes are the CSS. The navigational links would fall in the category accessories because they don’t have a fixed place in the XHTML. Sometimes they’re placed between the heading and the main content but it’s becoming more common to place them between the main content and the footer or completely at the end. You’ll want place each of these parts inside <div> tags giving them each a unique "id" as shown in the example.

Example

<div id="header">

This will make it possible to format the same elements differently within each <div> tag. To get more control over the page as a whole we place all these <div>’s within a container div so that the XHTML looks somewhat like this:

XHTML

<body>
<div id="container">
  <div id="header">
      <h1>Site or Company Name</h1>
      <p>Site or Company Slogan</p>
  </div>
  <div id="content">
      <h2>Page Title or Subject</h2>
      <p>Lorem ipsum dolor sit amet,
     consectetuer adipiscing elit.
     Curabitur nulla lectus,
     suscipit ullamcorper, iaculis non,
     semper ac, arcu.
     Nullam nunc purus, blandit ac,
     dapibus vel, pretium in, mi.
     </p>

  </div>
<div id="navigation">
    <h2>Navigation</h2>
    <ul>
      <li><a href="/">home</a></li>
      <li><a href="#">page 2</a></li>
      <li><a href="#">page 3</a></li>
      <li><a href="#">page 4</a></li>
    </ul>
</div>
<div id="footer">
  <p>copyright 2008 Company Name</p>
</div>
</div>
</body>

The CSS attached to the XHTML could look something like this.

CSS

* {
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
  border-style: none;
  list-style-type: none;
}
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  color: #000000;
   background-color: #66CCFF;
}
#container {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
}
#header {
  color: #44CCFF;
  background-color: #000000;
  border-bottom: thick solid #FFFF00;
}
#header h1 {
   font-size: 2em;
  font-weight: bold;
  text-align: center;
}
#header p {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 0.9em;
  font-style: oblique;
  text-align: right;
  margin-right: 1em;
}
#content {
  padding: 10px;
  float: right;
  width: 600px;
}
#content h2 {
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 0.7em;
}
#content p {
  margin-bottom: 1em;
}
#navigation {
  width: 180px;
  margin-top: 1em;
}
#navigation h2 {
  font-size: 1em;
  font-weight: bold;
  font-variant: small-caps;
  text-transform: capitalize;
  text-align: center;
}
#navigation ul {
  border: thin solid #FFFF00;
}
#navigation li {
  margin: 3px;
}
#navigation li a {
  text-transform: capitalize;
  color: #666666;
  border: thin solid #000066;
  display: block;
  padding: 5px;
}
#navigation li a:hover {
  color: #000000;
  border: thin solid #0000CC;
  background-color: #0099CC;
}
#footer {
  clear: both;
  margin-top: 2em;
  border-top: thick solid #FFFF00;
  width: 100%;
}
#footer p {
  font-size: 0.8em;
  text-align: center;
}

The in’s  and out’s on how it’s done this way is covered on other posts

One Comment

  1. Thanks for posting

Comments are closed