Style Sheet Overview

Contact Us or call 1-877-932-8228
Style Sheet Overview

Style Sheet Overview

  • Enable you to separate the visual presentation of a web page, from the content of that page.
  • Provide formatting and other typographical information without affecting the HTML markup
  • To use a style sheet you:
    • Create a file with an extension of .css
    • Set the style "rules" for each HTML element you want to define
    • Use the link element within the head element using the following format:
      • <link rel="stylesheet" type="text/css" href="design.css">
  • "Cascading" refers to the interaction of styles within a style sheet
    • Elements within other elements "inherit" the properties of the parent element unless the style sheet indicates differently.

In the HTML 4.0 Sourcebook, Ian Graham describes style sheets:

"Style sheets are a mechanism for adding formatting and other typographic information to an HTML document, but in such a way that the HTML markup is largely unaffected."

Graham goes on to explain "HTML is a semantic markup language designed to describe the meaning and structure of a document and not the physical presentation. . . carefully crafted HTML documents can, in principle, be presented by many different technologies, ranging from graphical displays to Braille readers to text-to-speech converters, with little loss of information content."

However, most web authors, and readers for that matter, are concerned about how information content looks. Graham argues that "using elements and attributes to specify formatting details is not a good long-term solution because documents become big, cumbersome, and impossible to maintain, largely because HTML is simply the wrong place to specify the page layout descriptions required for detailed layout control."

The style sheet approach is a solution to this problem. A style sheet can be a separate file that is accessed by the link element:

<link href="/css/main.css" rel="stylesheet" type="text/css">

Or, the web author can use the style element within a web page to detail style choices.

Code Sample:

StyleSheets/Demos/Code01.xml
<style type="text/css">
.warning {font-weight: bold;}
</style>&nbsp;

Finally, styling can be added with the style attribute in HTML, kind of defeating the concept of separating content from presentation.

<span style="font-weight: bold;">There is an error on the page.</span>

The following example that specifies all h1's should appear in red illustrates the middle strategy.

Code Sample:

StyleSheets/Demos/Code02.xml
<style type="text/css">
h1 {color: red;}
</style>

It is much more efficient and convenient to create separate files for your Cascading Style Sheets when the properties apply to all pages. Using CSS in this way, you can have all your h1's red on all your pages and change them to green by just changing the style in one file. To do this, you create a file with the extension .css, include style "rules" for each HTML element you want to define, and use a link element within the head element in the format of the following example.

<link rel="stylesheet" type="text/css" href="design.css">

Note that link element that specifies a style sheet must include the type attribute:

type="text/css"

The following example shows a style sheet consisting of a sequence of rules like the red h1's above. The form of a rule is a list of elements (body, td) or classes (class="redhead") separated by commas and then a sequence of property pairs (color: black;) in braces:

Code Sample:

StyleSheets/Demos/Code03.xml
<style type="text/css">
body, td {
	font-family: sans-serif;
	font-weight: bold;
	font-size: x-small;
	color: black;
	background-color: white; 
}
.redhead {
	color: red;
}
</style>

If a heading is marked up as follows in a document with the preceding rules, the "Heading Text" will be colored red:

<h3 class="redhead">Heading Text</h3>

You can also use the div and span elements to add styles to blocks or text respectively. For example, the use of Courier font in this document might be marked up as follows:

Code Sample:

StyleSheets/Demos/Code04.xml
<style>
.code { font-family: monospace; }
</style>

Then, the beginning of the paragraph above would be marked up in this way:

"You can also use the <span class="code">div</span> and <span class="code">span</span> elements ..."

Interaction of the styles within a style sheet is the source of the term "cascading." Basically, this means that elements within other elements "inherit" the properties of the parent element unless the style sheet indicates the style of the nested element.

If you specify more than one style sheet file, these interactions can become quite complex. Varying browser implementations compound the complexity.

Next