Design by CSS, Not Markup
(
May 05 2007 - 06:08:41 PM by
Timothy Khouri) - [
print article]
A History Not To Be Proud Of
Back when I first started making web pages, I thought of HTML tags as a way to get pictures, text, sound and input boxes to display on a web browser. Back then I would pride myself on my extensive use of the <table> tag to design an entire website. I could open up PhotoShop and slice my giant JPEG of a site into dozens of smaller images and then spend a couple of hours making my <table>'s, <tr>'s and <td>'s. Looking back at the aweful code and even worse coding standards that I used to follow is like looking back at MC Hammer's parachute pants and wondering why we ever thought that was cool.
Now, several years later, I have come to appreciate that everything has it's proper place. HTML tags should be used for describing your CONTENT only, Cascading Style Sheets (CSS) should be used for designing the VISUAL aspect of your website including your layout, and MC Hammer's pants shouldn't be used at all.
The Fool's Argument
Many people will try to argue that designing a website with PURE CSS is imposible, and that you have to lean on nasty markup to achieve a "real" website. They will even argue that they have 'tried for hours, bashing their heads against the wall, but then they had to go back to <table>s for design.' So basically the argument that they are trying to pose is that they have failed, and so you shouldn't even try. That is rediculous as it is a lot easier to do things the right way by using clean markup to describe your content, and CSS to design your site.
Baby Steps - Navigation As A List
Before tackling an entire website, I want to show you how easy it is to display a "list" of content the way you actually want it to look. You might not realize it, but your website's navigation is really a list of links. Lets use the <ul> tag to make our navigation list. Then we will style it with some simple CSS and you'll be amazed at the clean but awesome results. So lets start with the HTML. Create a new HTML document on your desktop and enter this as it's contents:
<html>
<head>
<title>Design by CSS - Navigation As A List</title>
</head>
<body>
<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>
<li><a href="Four.aspx">Page Four</a></li>
</ul>
</body>
</html>
If you look at that HTML document in your browser, you will see a plain bulleted list of links going one after another. This is really what your navigation is, a simple list of links. So now that we have defined our content using HTML tags, let's style it with some quick CSS.
ul
{
margin: 0;
padding: 0;
height: 24px;
font-size: 12px;
background: #369;
border: outset 2px;
font-family: Sans-Serif;
}
li
{
float: left;
}
li a
{
color: #fff;
width: 80px;
height: 24px;
display: block;
padding-left: 6px;
margin-left: 12px;
line-height: 22px;
font-weight: bold;
text-decoration: none;
border-left: solid 4px #fff;
}
li a:hover
{
color: #000;
text-decoration: underline;
border-left: solid 4px #000;
}
That's enough to see a complete change. What used to look like a bulleted list that took up 4 lines has turned into a full top navigation bar with just a little styling. And while that might not look like the most impressive thing in the world, keep in mind that the navigation section in this site is done by using a <ul> as well. There are several great examples of sites out there that use semantic markup and you may not even know it.
A great tool to use is the IE7 Developer Toolbar or the FireFox Developer Toolbar. You can use either one of them to "Disable - CSS" on a website that you are looking at. What this will do is it will degrade the website to it's raw HTML markup, and you'll be able to see it as it looks to an audio browser (or to the Google bot for that matter). If the site pretty much doesn't change (in structure at least) then you know that they are using nasty un-semantic markup. If it collapses into a long word document basically, then you know they are using PURE CSS.