Math 696 -- Style sheets

Style sheets

Style sheets

In keeping with the philosophy of logical markup, you should not specify the visual appearance of a document in your HTML code. Instead, you should use an external style sheet to modify the way in which browsers display your HTML documents. (Indeed, XHTML 1.1 forces you to use style sheets to control the visual appearance of the document.)

The World Wide Web Consortium has released two specifications for so-called cascading style sheets: the initial model CSS1 is fairly well supported by browsers, and the more advanced features of CSS2 are beginning to be supported by browsers.

For example, the following style sheet rules request white letters on a blue background, a blank border of width equal to ten percent of the page width, first-level headers in yellow sans-serif letters on a maroon background, list items in unordered lists marked with squares, and list items in ordered lists marked with upper-case roman letters. (These choices are only for illustrative purposes: the color scheme is intentionally awful!)

body    { color: white ; 
          background-color: blue ;
          padding: 10% }
h1      { color: yellow ;
          background-color: maroon ;
          font-family: sans-serif }
ul      { list-style-type: square }
ol      { list-style-type: upper-alpha }

To see this style sheet in action, cut the above code out with the mouse, paste it into your text editor, and save it as a file named example.css in your public_html subdirectory. (Make the appropriate changes to these instructions if your web pages do not live on one of the servers in the Department of Mathematics at Texas A&M University.) Use the Unix command chmod a+r /public_html/example.css to make this file world-readable. Now open the file index.html in your public_html subdirectory and insert just before the closing </head> tag the line

<link rel=StyleSheet href="example.css" type="text/css">

Save the file index.html and reload your home page into your browser. The browser should now display the page with wild colors.

The advantage of using an external style sheet is that you can easily change the visual presentation of an HTML document--or a whole collection of HTML documents--without editing the contents. You need to modify only the style sheet.

For example, if you want to modify the colors, you can select from the sixteen named colors in HTML 4.0 (white, black, green, silver, lime, gray, olive, yellow, maroon, navy, red, blue, purple, teal, fuchsia, and aqua). Alternatively, you can specify a wider range of colors by a hash mark # followed by a triple of two-digit hexadecimal (base 16) numbers specifying Red, Green, and Blue values on a scale from 00 (minimum) to FF (maximum). The hexadecimal digits are 0, ..., 9, A, ..., F. See, for instance, Douglas R. Jacobson's color chart.

To go further with style sheets, you might consult the help pages on CSS level 1 from the Web Design Group, or the authoritative CSS2 specification. Also, there is a comp.infosystems.www.authoring.stylesheets newsgroup.

Rather than writing your own style sheet, you can import one of the core style sheets developed by the World Wide Web Consortium.

Style sheets