Cascading Style Sheets: A Primer

 < Day Day Up > 

Web developers use Cascading Style Sheets to define style for their web pages. Firefox allows the user to create Cascading Style Sheets to override a web developer's settings and change the way Firefox displays web content.

What are Cascading Style Sheets (CSS)? Breaking this term into two parts, they are style sheets, which are readable and editable descriptions of how something looks. In Firefox, style sheets might change or set the look of the Firefox user interface, and set default and overriding appearance specifications for a displayed document.

Cascading is the concept that there might be many levels of style sheets and it governs how they are applied. You might have a style sheet that defines how the overall document appears. Then sections of the document might have additional style sheets that override the document's style sheet for that particular section. Hence, the term cascading style sheets.

Note

It is a really good idea to read and understand the CSS Level 1 and CSS Level 2 specifications that are found at W3.org. The web pages www.w3.org/TR/REC-CSS1-961217.html#css1-properties (for Level 1) and www.w3.org/TR/REC-CSS2/ (for Level 2) contain virtually all the information needed to write Cascading Style Sheet code.


A cascading style sheet consists of sets of rules describing a particular property and its attributes. The following HTML line consists of the HTML tag <blink>, some text, and the closing tag. Add this line to a HTML page and the text blinks.

<blink>like this</blink> 

In this example, the text like this blinks in a browser window. (The fact is, it won't blink in Internet Explorer because Internet Explorer doesn't support the HTML tag <blink>!)

However, should this tag appear on a web document, Firefox blinks the text. And some of us find that blinking to be really, really annoying! With a cascading style sheet, you can configure how the <blink> HTML tag is handled (whether it will blink).

For example, your cascading style sheet might contain

blink { text-decoration: none !important; } 

This rule modifies how the <blink> tag is handled. This is called a cascading style sheet rule. A rule typically consists of two parts: the selector and the declaration. Another way of expressing the syntax of a cascading style sheet rule is

rule {selector : value ! important ; } /* In the syntax description above, items in italics    are optional and need not be included if not desired.    As well, the space before the colon, and the space after the    exclamation are usually omitted. */ 

In your style sheet, the rule's selector is the word blink, the first word in the rule.

Following the rule is an opening brace {. Following the brace is the declaration. Your declaration consists of a keyword, text-decoration:; a setting, none; and an !important. Technically, the exclamation point is not part of the keyword important, but many people omit the space, making it appear as a single word or identifier. A space following the exclamation point is optional. The rule ends with a closing brace, }, which is not optional.

You can see that the <blink> tag's action is being changed. By setting text-decoration: to none, you are saying that you don't want any blinking. The next part, !important, tells Firefox that this rule takes precedence over any other rule for this selector and declaration. That way, should the writer of the HTML page tried to reset <blink> back on to a blinking state, you can stop her. If you leave off !important, the web page's cascading style sheets could turn blinking back on.

Cascading style sheets may have comments, provided they are enclosed in '/*' and '*/' pairs:

/* We force the <blink> tag to not do anything! */ 

A comment before a rule telling the rule's intention is a very good idea. I also recommend that if the declaration's setting values are not obvious, they be documented as well.

Rules may include as many declarations as desired. There is no limit. Each declaration must consist of an attribute that may be set for a given object. An example of a more complex rule is

blink{    text-decoration: none ! important;    color: red ! important;    background: blue ! important; } 

In this example, you turn off blinking, but set the background color to blue and the text color to red (the worst possible combination of colors a page can have!)

     < Day Day Up > 


    Firefox and Thunderbird. Beyond Browsing and Email
    Firefox and Thunderbird Garage
    ISBN: 0131870041
    EAN: 2147483647
    Year: 2003
    Pages: 245

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net