How To: Pure CSS Design
(
Jun 13 2007 - 03:18:59 PM by
Timothy Khouri) - [
print article]
Many web developers will argue that you simply can't make a "real" website with a pure CSS design. They may point out how they have tried for hours, and then frustraitingly have to conform to using un-semantic markup (like <table>s for layout). This article will dispell the myth, and show how much easier it is to use a pure CSS design.
Once a web designer understands the purpose (and semantic meaning) for HTML tags, the task of designing a website becomes a lot easier. If you incorrectly think of HTML as a means to pretty up your site, then you've already lost the battle.
HTML, as you already know, stands for Hyper Text Markup Language. But out of those four words, the only one that we need to care about is the word "markup". HTML is used to "mark" your content much like a highlighter does on paper.
Think about if you were in college taking notes for the final exam. When the professor repeats a sentense, or says "this is important", what do you do? Likely, you will underline or highlight that part of your notes to tell you that it is important.
HTML does the same thing for your web browser. You use HTML tags to tell the browser the meaning of each section of your content. If you mark your content in a logical way, then the browser can understand it better and even more importantly, you can style it easily with CSS.
Our Example Site
This article is going to demonstrate how to make a basic website with a header graphic, left navigation, main content that will stretch to the size of the browser and a "suplimental content" section that we are going to make our footer. As we go on, we will show how to move that suplimental content section off of the bottom of the page and make it a vertical bar on the right side of the page without changing the markup at all.
To create each section of our site, we are going to use the <div> tag. We will give an ID attribute to each one so that we can address them in CSS by name. Here is what our markup will look like:
<html>
<head>
<title>Pure CSS Design</title>
</head>
<body>
<form>
<div id="Header">
<h1>
Pure CSS Design</h1>
</div>
<div id="Navigation">
<ul>
<li><a href="PageOne.aspx">Page One</a></li>
<li><a href="PageTwo.aspx">Page Two</a></li>
<li><a href="PageThree.aspx">Page Three</a></li>
</ul>
</div>
<div id="Content">
<p>
Here is where our content will go.</p>
</div>
<div id="Suplimental">
<p>
This is some suplimental content.</p>
</div>
</form>
</body>
</html>
Because we haven't applied any styling to this page the browser is left to interperite the visual aspects of the markup all by itself. This is what your page would look like if you were to open it in your browser at this point:
Applying The Design With CSS
While the page looks very bland right now, you have to realize that this is the way search engines and audio browsers "see" your site. Now we are going to add a little styling at a time and explain what the CSS is doing. Watch how the site transforms into a structured and friendly design.
First let's layout the main sections of the site: the Header, Navigation, Content and Suplimental sections. Here is the CSS code we are going to start with:
body {
margin: 0;
}
div#Header {
top: 0;
left: 0;
width: 100%;
height: 60px;
position: absolute;
}
div#Navigation {
left: 0;
top: 60px;
width: 120px;
position: absolute;
}
div#Content {
margin-top: 60px;
margin-left: 120px;
}
div#Suplimental {
margin-left: 120px;
}
The CSS Explained
This CSS is very simple. If you are not used to doing your layout with CSS this might seem like a lot, but it isn't. First, we removed the extra margin from the body. If you've ever noticed that your pages are padded a little bit all around the browser, this is because there is a default margin on the <body> tag.
Next we made our header start in the top left corner (top: 0, left: 0) and we gave it a width of 100% to stretch across the entire screen. We also changed it's "position" attribute to be "absolute". Normally, the body content is pushed down by the header content, but because we have pulled it out of the flow (changed it's position to be "absolute"), the rest of our page will float upwards as if there was no header there.
With that in mind, we now move the navigation section to the left the page (left: 0) and we move it down 60 pixels from the top (top: 60px). It is also positioned absolutely, so it will not push the body content to the right.
Lastsly we have the main content area. To accomodate for the header area above, we added 60 pixels of spacing above (margin-top: 60px). Also, we want to give some room for our navigation section on the left, so we added 120 pixels of spacing to the left (margin-left: 120px).
The supplimental area is going to be used as a footer for our page. Because the main content area has not been pulled "out of the flow" (position: absolute), this area is pushed downwards automatically by the main content. However, we do need to add the 120 pixels of spacing to the left to make up for the navigation area.
The page will now look like this:
CSS For Graphical Improvement
Now that we have the layout defined in CSS, we can add a little more styling to spruce up the visual aspects of the page. We're going to add some color, choose some nicer fonts and add a few borders. We'll also make the navigation look more like buttons instead of a bulleted list of links. Here's how:
body {
font-size: 12px;
background: #69c;
font-family: Verdana, Arial, Sans-Serif;
}
h1 {
font-size: 16px;
margin-left: 16px;
line-height: 60px;
}
p {
margin: 0 0 1em;
}
div#Header {
color: #fff;
background: #369;
border-bottom: solid 1px #fd0;
}
div#Navigation ul {
margin: 0;
}
div#Navigation ul li {
list-style: none;
}
div#Navigation ul li a {
color: #fff;
padding: .5em;
display: block;
background: #369;
font-weight: bold;
margin: .5em 1em 0;
text-align: center;
text-decoration: none;
border: outset 2px #fd0;
}
div#Navigation ul li a:hover {
background: #69c;
border: solid 2px #fd0;
text-decoration: underline;
}
div#Content {
padding: 6px 12px 0 0;
}
div#Supplemental {
padding: .5em;
margin-top: 1em;
background: #fd0;
font-weight: bold;
margin-right: 12px;
text-align: center;
border: solid 1px #369;
}
div#Supplemental p {
margin: 0;
}
So we've added some colors, changed the font, messed with a little padding and the like. But the one thing we didn't mess with is our content. There are no <font> tags, no <table>s to lay things out, no ugly markup. But the result is something beautiful:
A pure CSS designed web site is also very easy to change. If someone did this design with <table>s, not only would it be nasty markup, but it would also be much more difficult to change the layout. Watch how easy it is to move the supplemental content area from being a footer to being a right-side bar:
div#Content {
margin-right: 130px;
}
div#Supplemental {
top: 0;
right: 0;
margin: 0;
bottom: 0;
width: 120px;
position: absolute;
}
These small changes above will produce these results:
If you're not very comfortable with CSS, this might seem like we did a lot more work. You could be reasoning to yourself that you could get the same layout with using <table>s with less code. But once you get going with a pure CSS design, you'll realize that it's a lot cleaner and easier.
SingingEels is a pure CSS design, and so are a lot of other sites out there. This helps search engines to find content much better. But it also allows people to change their design to their liking, and ultimately saves time.
If you plan on advancing your skills as a developer or designer, this is the way to go. Practice on small sites, or use the code from this article and start to tweak things yourself. Once you understand the meaning of code, you're code will start to reflect what you meant.