Cascading Style Sheets | UNIX: The Complete Reference, Second Edition (Complete Reference Series)

Style sheets, in the world of HTML, define how HTML elements are displayed by web browsers. Cascading Style Sheets (CSS) were officially introduced by the W3C as part of the HTML 4.0 recommendation in 1997 (http://www.w3.org/Style/CSS). The W3C next published CSS level 2 as a Recommendation in May 1998. CSS2 is a superset of CSS1. All major web browsers now support CSS2 to varying degrees of correctness.

Styles were introduced to solve a common problem. HTML tags, as envisioned by Tim Berners-Lee, were originally designed to define the content of a document, rather than its style or layout. They were supposed to define elements such as headers, paragraphs, and tables using tags such as <h1>, <p>, <table>, and others. The presentation style of the rendered web page was left to the browser.

As the two major web browsers in the late ‘90s, Netscape and Internet Explorer, continued to add their own new HTML tags and attributes (such as the <font> tag and the “color” attribute) to the original HTML specification, it became more and more difficult to create web sites where the content of the HTML documents was clearly separated from the documents’ presentation layout. The proliferation of attribute tags to micromanage elements such as font size made HTML code a greater and greater mess and thus made HTML documents harder to debug when necessary. The W3C introduced style sheets to try to solve this problem, i.e., to separate a document’s content (structure) from its presentation (style).

Style sheets can offer the added benefit of saving web development time and effort. Styles sheets define how HTML elements are to be displayed, just as tags such as the <font> tag and the color attribute did in HTML 3.2. Styles are normally saved in external .css files. By editing one external style sheet, you can potentially change the appearance and layout of all the pages in your web site. You can define a style for each HTML element you use and then apply it to as many web pages as you wish.

The name Cascading Style Sheets comes from the behavior of multiple styles cascading into one. In addition to external .css files, styles can be specified inside a single HTML element in a document and also inside the <head> section of an HTML page. Multiple external style sheets can be referenced inside a single HTML document. When there is more than one style specified for an HTML element, a set cascading order is followed to choose which style will be used. All the styles will “cascade” into a new “virtual” style sheet according to the following rules, where rule 4 has the highest priority and rule 1 has the lowest priority:

Browser default
External style sheet
Internal style sheet (inside the document <head> section)
Inline style (inside an HTML element)

The CSS syntax, a fairly readable syntax, is made up of three fundamental parts: a selector, a property and a value:

 selector {property: value}

The selector is normally the HTML element or tag that you wish to define, the property is the attribute you wish to change, and each property can take a value after the colon. The property and value are surrounded by curly braces. To make style definitions more readable, usually one property is defined per line as in the following example in which we set three property values for the HTML paragraph (<p>) tag:

 P { text-align: left; color: black; font-family: helvetica }

Selectors can be grouped by separating them with commas. In the example that follows, all the HTML header elements are grouped and the text color set to orange:

 h1, h2, h3, h4, h5, h6 { color: orange }

Let’s look at an actual application of CSS. The following is a group of style definition statements in the CSS syntax. Because of the length, this group of statements will be saved in a separate .css file called myStyle.css:

 p, li, h1, h2, h3 { font-family: 'Comic Sans', 'sans serif'; } p, h1, h2, h3, li, hr { margin-left: 10 pt ; } P, li { font-size: 75%; } h1, h2, h3, hr { color: firebrick; } a:link {COLOR: firebrick;} a:visited {COLOR: firebrick;} a:active {COLOR: navy;} a:hover {COLOR: navy;} a.content:link {COLOR: seashell;} a.content:visited {COLOR: seashell;} a.content:active {COLOR: seashell;} a.content:hover {COLOR: papayawhip;}

We want to apply the style sheet definitions in myStyle.css to the simple HTML document, myPage.html, shown here:

 <html> <head> <title>CSS Example</title> </head> <body>    <h1>This is header 1.</h1>    <hr>    <p>This is a paragraph.    <p>This is a second paragraph.    <hr>    <h2>This is header 2, followed by two lists.</h2>    <ol>       <li> <a href=http://foo.com>Link to home page</a>       <li> <a href=http://bar.com>Link to last page</a>    </ol>    <u1>       <li> Item 1       <li> Item 2    </ul> </body> </html>

When the plain myPage.html is loaded into a web browser, it looks like Figure 27–12.

image from book
Figure 27–12: myPage.html with CSS not applied

To apply the style sheet definitions in the external file myStyle.css to myPage.html, the <link> tag needs to be used in the <head> section of myPage.html as follows, to link to the style sheet file. This is assuming that myStyle.css and myPage.html are saved to the same directory:

 <head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href="myStyle.css" /> </head>

When the web browser loads myPage.html, it will read the style definitions from myStyle. css and apply the definitions to myPage.html. With the <link> to myStyle.css included in the <head> section, myPage.html now looks like Figure 27–13 when loaded into a browser.

image from book
Figure 27–13: myPage.html with CSS applied

Most noticeably, the style sheet has altered the font family and color of the text in this HTML document. The left margin has also been increased. What is not shown in the screen shot is the effect that the style sheet has on hypertext links created using the anchor tag (<a href=…). A portion of the style sheet that affects the color of hypertext links is shown here:

 a:link {COLOR: firebrick;} a:visited {COLOR: firebrick;} a:active {COLOR: navy;} a:hover {COLOR: navy;}

Using these definitions, link text will normally be rendered in the firebrick color, but when the user moves the mouse cursor over a link, it changes color to navy; some consider this interactive link color changing to be an increase in usability More important, by <link>'ing to myStyle.css from multiple HTML files, a web site can achieve a consistent look and feel without much work.