Separating Content from Appearance with Cascading Style Sheets

by John December

First introduced in 1996 by the World Wide Web Consortium1, Cascading Style Sheets (CSS) serve an important role for specifying the appearance of HTML pages. Style sheets help you influence the way your HTML pages look in a way that is far more efficient that the HTML element-by-element techniques used in the past. With advances in Web browser technologies, CSS level 22, should be now available to many users, and CSS Level 3 is in development3.

The Purpose of Style Sheets

The overall purpose of style sheets are to help people who write HTML to separate the content of a Web page from specifications of how it looks. Style sheets are used to influence HTML page appearance. For example, HTML writers might want to indent the first line of each paragraph by five spaces. To do this the old way, they would place the (non-breaking space) entity five times at the start of each paragraph. This worked fine for pages generated by HTML editors, or even on a small scale for hand-prepared HTML pages. But what if the Web designer decided that the paragraphs should not have the first line of each paragraph indented? It would be a laborious process to have to go through all the HTML pages to remove the entities.

Rather than specify the appearance of elements in an HTML file, writers need a way to specify the appearance of an entire set of HTML pages all in one place, separate from the HTML content. Style sheets make this possible. You can use style sheets to efficiently create a consistent look and feel for your web and change this look and feel quickly and easily.

How Style Sheets Work

You create a style sheet in a file using a command syntax that describes how HTML elements in your files should be rendered in a Web browser. In your HTML files, you identify this style sheet file. When a user accesses your HTML pages, the Web browser refers to your style sheet file to display your HTML pages.

Using style sheets, you can tell a Web browser how to display HTML elements such as margins, point sizes, text background colors, and many others. For example, you can influence the margin spacing used in every P (paragraph) element in your HTML pages on your Web site. Using variations within style sheets called classes, you can create different styles of an HTML element.

For example, let's say you have a need for cautionary statements in your document. One such paragraph class could be a statement of warning, another paragraph class could be a statement of imminent danger. You would like Web browsers to display these paragraph classes in different ways--the danger in red, bold, and underlined text; the warnings in purple and bold text.

In your style sheet file, call it mystyle.css, you would place these statements to affect the appearance of the P (paragraph) element:

P.danger {
   color: red;
   font-weight: bold; 
   text-decoration: underline;
}

P.warning {
   color: purple;
   font-weight: bold; 
}

In your HTML files, you identify the style sheet you are using (mystyle.css), and then you can then use these classes to label statements. For example, in your HTML file mystyle.html, you could have:

<HTML>
   <HEAD>
           <LINK Rel="stylesheet" Href="mystyle.css" Type="text/css">
   </HEAD>
     <BODY>
   <P class="warning">
         Alien approaching!
   </P>
   <P class="danger">
      Destruction imminent!
   </P>
</BODY>
</HTML>

Your users will need to have more recent versions of the popular Internet Explorer (3.0 or above) or Netscape Navigator (4.0 or above) in order to see the style effects. If your users don't have these style-enabled browsers, they won't see all the effects you create. Therefore, in using style sheets, like many other kinds of new HTML elements that have come before, you will need to be sensitive to users who do not have the most current Web browser software.

With a little common sense and creativity, you you can still meet the needs of users who cannot use the style sheets. In fact, when you use style sheets, you can avoid much of the kind of syntax gymnastics that HTML writers have had to put into their pages to make things "look right." The result is that your HTML pages can be leaner and more easily displayed in all Web browsers. And instead of fiddling with how your Web pages look, you can focus on what your Web pages mean.

References

  1. World Wide Web Consortium Technical Report, W3C Recommendation 17 Dec 1996, "Cascading Style Sheets, level 1," http://www.w3.org/TR/REC-CSS1
  2. World Wide Web Consortium Technical Report, W3C Recommendation 12 May 1998, "Cascading Style Sheets, level 2 CSS2 Specification," http://www.w3.org/TR/REC-CSS2/
  3. World Wide Web Consortium Technical Report, W3C Working Draft 14 April 2000, "CSS3 introduction W3C Working Draft," http://www.w3.org/TR/css3-roadmap

Additional Information

http://www.w3.org/TR/REC-CSS2
This is the authoritative version of the current style sheet specification. It is also fairly readable and useful. You'll find plenty of examples and descriptions of how to put style sheets to use.
http://www.w3.org/Style
This another section of the World Wide Web Consortium Site that contains helpful information about style sheets. The caution here is that many related technologies are brought into the discussion. If you are just starting out in style sheets, trying to figure out the relationships all the technologies can be daunting.
Save this page to any social bookmarking site! Share · Search · Market · Directory
2014-03-11 · John December · Contact · Terms of Use © December Communications, Inc.