The Transition to CSS
By John Cellini
Published on July 17, 2006
The phrase "separating content from presentation" and its variations have 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:
<h1>The Transition to CSS </h1>
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="stylesheets/styles.css" />
The rule that defines the formatting for my title is in a file called styles.css located in my stylesheets 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):
h1 {
font: 160% Arial, Helvetica, sans-serif;
font-weight: bold;
color: #3130E3;
text-align: left;
border-bottom: 1px solid #3130E3;
margin-bottom: 10px;
padding-bottom: 6px;
}
This example defines the style for all h1 tags throughout my entire web site. One of the most common uses of CSS is redefining HTML tags.
