The Transition to CSS
By John Cellini
Published on July 17, 2006
The phrase "separating content from presentation" has been kicked around the web design community for the last couple of years. The phrase describes an approach to web design in which the markup (HTML or XHTML) of a web page contains the structure and content but does not define its visual layout or presentation. The presentation of the web page is defined by external stylesheets. Cascading Style Sheets (CSS) is the most popular language used today by web designers for web page presentation.
Web designers have been going through an exciting transition for the last few years. Although some web designers still rely entirely on HTML (and many of its deprecated tags) to structure, layout, and format their web pages, most web designers have made the transition to cascading style sheets to layout and style their web sites. There are many benefits in using CSS.
If you look at the source code for the title of this article, here's what you see:
<h2>The Transition to CSS </h2>
You see just an opening and closing heading tag, <h1> </h1>, without any further markup. The title is formatted and styled with an external stylesheet that is linked to the web page. If you look in the head area of the source code, you will see the reference to the style sheet:
<link rel="stylesheet" type="text/css" href="../css/main.css" media="screen" />
The rule that defines the formatting for my title is in a file called main.css located in my css folder. The presentation and layout for my entire web site is centralized in this css file.
Let's look at the CSS rule that "styles" my title (CSS rules consist of selectors and declarations enclosed in curly brackets):
#content h2 {
font-size: 150%;
color: #0029A4;
padding: 0 0 0.2em;
letter-spacing: 0.5px;
border-bottom: 2px solid #0029A4;
margin-bottom: 10px;
padding-bottom: 6px;
line-height: 1.2em;
}
This example defines the style for all h2 tags in the content sections throughout my entire web site. One of the most common uses of CSS is redefining HTML tags.
If we had to rely solely on HTML markup, here's what the code might look like:
<font size="5" face="Arial, Helvetica, sans-serif" color="#3130E3"> <b>The Transition to CSS </b> </font><hr color="#3130E3">
There are a few problems with the above code.
First of all, to format all your titles throughout your web site, you would have to add this code to each and every title. If your web site had 50 pages with 50 titles, you would have to markup 50 titles. This is not only time consuming, but what if you later decide to modify your titles? Again, you would have to modify 50 titles. Sheesh!
With CSS, all you have to do is create one rule in an external stylesheet and link it to your documents. Each time you use the h2 selector within a content section, your title will be automatically styled the way you want. If you need to modify the 50 titles in your web site, all you have to do is modify that one rule in your external stylesheet and the changes will be automatically updated throughout your web site.
Another problem with the above HTML markup is its use of deprecated HTML tags. The font and bold tags and all presentation attributes of the <hr> element are deprecated (flagged to be removed in future specifications). The W3C deprecated all HTML presentational elements in the last version of HTML (version 4.01). If you wish to follow a Strict DOCTYPE such as HTML 4.01 Strict or XHTML 1.0 Strict, you cannot use deprecated tags. You could use a transitional DOCTYPE which allows the use of deprecated tags. Browsers continue to support deprecated tags for backward compatibility, but I would encourage you to keep up with the latest standards and write valid code.
page 1 | 2 next page >>