What are cascading style sheets?
Cascading style sheets are used to define the style of objects in HTML documents, which are used mostly for Web pages like this one.
HTML is made up a lot of tag ( codes ) to tell the browser how to display something ( usually text ). Many tags deal with the font used, color and position of text, etc.
Really big text. really red text Bold text Italic text
The HTML for the above text without CSS looks like this
<p>
<font size=+4>Really big text.</font> <font color=#ff0000>really red text</font> <b>Bold text</b> <i>Italic text</i>
</p>
The tags used are:
<font>
<b>
<i>
The font tag, <font>, is used to define many possible characteristics of the text enclosed by the tag ( </font> ends the definition ).
The attributes of a tag determine specifically what characteristic of the font is being defined.
size=+4
The size attribute is assigned the value 4 sizes larger than the current size. The final point size is determined by the browser.
The problem with this method of embedding the style information inside the text is that if more than one block of text uses that style, then all that style information must be added to every block. If the style is changed, then every block of text using that style must then be edited and changed to the new style. This can be very time consuming if you have 100's or 1000's of pages of text scattered over several web sites.
This is where style sheets come in. You define a style outside of the text, then reference the style inside the text. Once this is done any changes to a style occurs in the style sheet only. Everywhere the style sheet is used will automatically reflect the changes when displayed by a browser.
You can define a style in three places; inside the paragraph tag <p style="style defs"> ( local ), with a <style> tag ( internal ), or in a separate document ( external ).
Text should be enclosed by the paragraph tag and styles here offer little advantage over embedding the style information in the text.
Most style definitions are enclosed with the style tag which is enclosed by the head tag. Style definitions for the above example might look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>
Style Sheet Example
</title>
<style type="text/css">
<!--
p.bold {font-weight:bold; color:maroon;}
p.italic {font-style:italic; color:green;}
span.big {font-size:300%;}
span.red {color:red;}
span.bold {font-weight:bold;}
span.italic {font-style:italic;}
-->
</style>
</head>
The <!DOCTYPE declaration tells the browser where to find the document that defines the tags ( i.e. font ) and allowed properties ( i.e. size ) and values ( i.e. +4 ) of those tags ( DTD, Document Type Definition ). Most modern browsers have W3C ( World Wide Web Consortium, an indipendent Web standards body ) ) DTD built-in.
The html tag tells the browser that the document is an html encoded document. The language is declared to be english.
The head tag contains all the relevant information pertaining to the document as a whole.
To prevent an older browser from displaying the style information when it doesn't understand the style tag, the style definitions are placed between comment indicators ( <!-- and --> ). However, this is no longer an acceptable solution for the XHTML standard ( but it's not inforced ). This is currently the only solution for the <script> tag in order to pass validation.
After the head tag will come the body tag. It's in the body that all the stuff the browser will display to the reader goes.
You might use the style definitions this way;
<p>
<span class="big">Really big text.</span> <span class="red">really red text</span> <span class="bold">Bold text</span> <span class="italic">Italic text</span>
</p>
This looks more complicated only because I'm mixing a lot of style information into a small amount of text. Normally you would define the style of a complete paragraph and use the style in many paragraph tags as shown below;
<p class="italic">
ANGIE: This is the day to talk.
</p>
<p class="bold">
PAUL: I don't like your attitude.
</p>
The point to all this is that older browsers like Netscape Navigator 3 and earlier and Internet Explorer 2 and earlier do not understand style sheets. Most modern browsers understand most of the CCS 1.0 standard and a lot of the CCS 2.0 standard. Currently the CSS 3.0 standard is under development.
The HTML 4.01 standard was the first standard to attempt at getting some structure into HTML ( the previous standard was HTML 3.2 ). The current standard is XHTML 1.0 ( extensible HTML ) which is a transition to XML ( extensible markup language ). Currently XHTML 2.0 and XML 1.0 are under development.
This document ( that you are reading ) does not use style sheets.
One final note:
Each computer platform's operating system will have a different graphics environment ( color space, resolution, font defaults etc. ). Each operating system version will have slight to extreme variations to all it's components compared to earlier versions. This is also true for every browser. Each browser and versions of those browsers will interpret HTML in a different way. Making a single web page look and act the same with all operating system and all browser is not possible. The standards are an attempt to make a web page to display and operate the same indifferent to what is displaying it. Unfortunitly there is a monopoly in the marketplace that refuses to follow the standards and most web developers are in lock step with it. I believe until the standards are required, the WWW ( World Wide Web ) will continue to be a unstable place for the general public ( web surfers ).
Last updated: Mar 4, 2011