Simple styling with CSS

Start with clean code

Learning to write clean, semantic code (marking your content up according to its inherent meaning, that is, h1, h2, p, ul, and so on) is important for every web designer and developer. No, you don't have to be a code junkie like me, but you should understand the basics. Not only do a myriad of styling choices emerge but there are additional benefits of semantic markup. Many designers don't realize that using valid code makes their pages more accessible to more user agents, which gives people equal access to their information. Due to the increasing number of people on the web, the importance of accessibility has come to the forefront. In fact, many governments now legislate it. (For more information, refer to the W3C's Web Accessibility Initiative.)

However, people are not just accessing the web using a standard browser. Mobile devices are making huge leaps as well. Simple, clean markup is the first step toward making your content available in this market. And finally, search engines are not to be scoffed at. Since search engine spiders view your site much like assistive technology does, many of the techniques that help a disabled user access your information also make it more accessible to the spiders. And when the spiders are happy, everyone is happy.

Here is the bottom line. Once you separate structure from presentation you gain the ability to create an accessible page—using valid, well-structured HTML markup to make it work for the most user agents and adding CSS to make it appealing. This is simplicity at its best.

Figure 1 shows the sample page for this tutorial without its style sheet attached, and Figure 2 shows the same page with the style sheet attached.

Figure 1. The sample page that accompanies this article (clean, semantic markup) without the style sheet attached.

Figure 2. The same page with the style sheet attached.

Note that the page without the styles attached is simply the content of the document as it appears in your code. What you're seeing is known as the flow of the page. A user agent without the ability to read CSS could still access all your content in an organized form. Note also that this page does not contain any images. This is because all color and imagery is actually added through the CSS page. (And yes, if this layout was built with tables, you could still use most of the styling techniques I'm about to show you. It would keep its columnar look when the CSS was detached, which would not be as nice for some of the smaller user agents.)

Page 2 of 9

Previous Page

Next Page