Firefox and Thunderbird Garage

Chapter 6, "Power Firefox Tricks and Techniques," introduced CSS. CSS are an important part of both the Web and Firefox. Without CSS web pages, the Internet pages would not be as consistent as they are today.

There are two levels of CSS: CSS-1 and CSS-2.1. The next level, CSS-3, is under development. With style sheets, you can define the look and feel of web documents. A style sheet can define fonts, colors, character size and spacing, and style definitions that contain a complex number of effects. In fact, CSS are similar to Microsoft Word's style sheets.

In Microsoft Word, a style sheet defines a paragraph's formatting, including

• Paragraph formatting such as line spacing, space above and below, indents, text alignment, and so on

• Font specifications, such as type face, size, color, and so on

• Tabs, both the type and location

• Borders, such as width, style, color, and so on

• Frames, such as location, size, and so on

• Numbering and bullet style

CSS Level 1

The first CSS standard is called Level 1. This standard was created in late 1996 and later revised in 1999. When it was revised, no revision indicator was used. CSS-1 is rather simple and easy to use. It requires that you know basic HTML and understand the concepts and components of style. Some of the major parts of CSS-1 are discussed next. The following items are part of the standards created by W3C.

Note

Throughout this chapter, the term selector is used. A selector is the mechanism to select or group elements together to allow them to be styled as a single object.

Pseudoclasses and Pseudoelements

Pseudo means false or not real. CSS uses pseudoclasses and pseudoelements to allow the definition of items that are not part of HTML's classes or elements:

• Anchor pseudoclasses A link on a document is technically referred to as an anchor. An anchor that has been visited (this information is usually contained in the history list) can be colored or formatted differently than a link that has not been visited.

  Note

  When used with a selector, pseudoelements can be used only at the end of the selector. In a selector, only one pseudoelement can be specified.

  Multiple pseudoelements are permitted otherwise, and can be combined as desired.

• Typographical pseudoelements The first-line and first-letter pseudo elements are defined as typographical pseudo elements:

  • First-line pseudoelements The first line of a block (paragraph) might be formatted differently from following lines. This effect is flexible, in that as the line length varies, the rendering engine compensates for this variation.

  • First-letter pseudoelements Frequently you see the first letter in a paragraph printed as a drop capital. This is where the letter is actually two lines high, spanning the start of both the first and second lines. This is an example of first-letter formatting. The first-letter pseudoelement allows this type of formatting. First-letter formatting is not restricted to drop capitals but can be any valid character-level formatting.

Cascading

It is expected that more than one CSS will be used to format a given object in the rendered document. Several simple rules define cascading inheritance.

A style sheet need not be complete. Several partial style sheets can be combined to create a complete style sheet. Both authors and viewers can define style sheets (the author is the person who has written the web page, for example, whereas the viewer is the person using Firefox).

Note

A style sheet definition can be declared with the !important keyword, making that style override definitions that are not defined with !important.

An author's !important overrides any preceding normal or important definitions and any following normal definitions.

A viewer's !important overrides an author's normal definition but not an author's !important definition.

Cascading order says that style definitions follow these rules, in this order:

Formatting Model

The CSS formatting model includes the following classes of formatting:

• Block-level elements

• Vertical formatting

• Horizontal formatting

• List-item elements

• Floating elements

• Inline elements

• Replaced elements

• The height of lines

• The canvas

• BR elements

CSS-1 Properties

Various properties that can be set with CSS- 1 include notation for property values and how these properties are specified. Additional specifications are

• Font properties These describe the font's look and formatting and include font, font matching, font-family, font-style, font-variant (such as italic), font-weight (light, bold, or normal, for example), and font-size.

• Color and background properties These include background, color, background-color, background-image, background-repeat, background-attachment, and background-position.

• Text properties These are properties such as word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, text-align, text-indent, and line-height.

• Box properties These include margins, padding, border, width, height, float, and clear.

• Classification properties These include display, white-space, list-style-type, list-style-image, list-style-position, and list-style.

Units

CSS-1 units of measure are defined. These include length units, percentage units, and color units.

CSS-1 Conformance

One final part of CSS-1 is conformance. Conformance specifies how a user agent (such as a browser rendering engine) would conform to the standard.

Conformance also specifies that parsing be forward compatible; that is, any user agent that is compatible with later versions of CSS must also support earlier versions. Thus, a user agent that supports CSS Level 2.1 will also support CSS Level 1.

CSS Levels 2 and 2.1

With CSS-2 (and 2.1, which soon followed it), some important functionalities were added. CSS Level 2.1 is the current standard; CSS-3 won't be a standard for some time, most likely.

In addition to the functionality found in CSS-1, there is some new functionality:

• Media types Describe the media that will display the content. Some examples are print (where the content will be sent to a printer), screen (content is displayed on the screen), and Braille. This example shows both print and handheld media is used:

  media="print, handheld"

• Inheritance This is where a child element inherits its parent element's attributes when no matching attribute is specified. For example, in <H1>The headline <EM>is</EM> important!</H1>, the subelement is would inherit the parent (containing) element's styles such as color, font, and so on.

• Page This specifies that the media will be paged and is often used with printed output (refer to the previous bullet about media types). @page { size 8.5in 11in; margin: 4cm } specifies that the page is letter size, with a 4cm margin. The mixing of units of measure (English and metric) is acceptable but perhaps not recommended.

• Aural or sound Indicates a style sheet that will be aural (sound-based). Within aural are items such as volume, voice, pause, and other attributes and styles. For example, h1{volume: x-loud} indicates that the sound will be very loud.

• Internationalization Virtually all operating systems and computers take into consideration that styles vary from country to country, so it is important that your style sheets be able to do so as well. CSS-2 includes support for various national and language requirements.

• Font support CSS includes better matching of fonts when a specified font is unavailable, as well as other support. As an example, BODY { font-family: Baskerville, "Phaisarn" } specifies that Baskerville will be used for Latin characters and that Phaisarn will be used for Thai fonts.

• Tables These are often used to categorize or group data, adding a powerful layout tool. Tables have rows, columns, headers, and borders.

• Positioning Enables content to be positioned to absolute, relative, floating, or fixed. Using relative positioning, related elements can be positioned based on their relationships. As an example, a child element can be positioned relative to its parent or sibling elements.

• Boxes Can be created with backgrounds, content, padding borders, and margins. Boxes serve to set content elements apart or to draw attention to important elements.

• Overflow Used with boxes, this defines how any child element of a box will be treated should it overflow the box's borders. Overflow can occur under a number of conditions, such as lines that can not be broken because there is no white space in the line. Or, the box might be ill-defined. Overflow values include visible, hidden, scroll, auto, and inherit.

• Visual aspects For example, minimum and maximum height and widths might be set with visual aspects.

• Selectors These include descendant, child, adjacent, and attribute selectors. For example, h1 { color: green } EM { color: red } are selectors and the element <H1>This headline is <EM>very</EM> important</H1> displays the text in green, with the exception of the word very, which will be red.

• Automatically generated content Lets you create content that is automatically numbered (such as page, chapter, or section numbers).

• Shadows Used to make text stand out. An interesting effect is to set the text color to the same color as the background and the shadow color to a contrasting color. This displays only the shadow outlining the text (while the text, being the same color as the background, becomes invisible).

• Pseudoclasses These are elements such as :first-child, :hover, :focus, and :lang. They allow content to dynamically respond to user input. As an example, :hover might specify a different color for an element when the mouse pointer is held over the element.

• Color and font These add new system colors and fonts and make defining colors that match those that the system uses easier. Color definitions are similar to those in the Windows Display Properties, Appearance tab. However, the names used are not identical to those in Windows.

• Cursor Enables the specifying of a cursor(s) for the document being displayed. Cursors are defined in a cursor resource URL (such as cursor : url("first.cur"), url("second.csr"). If it's a system-defined cursor, such as crosshair, pointer, or move, it can be defined in lieu of a cursor file.

• Outlines Can be drawn around an object, with the color, style, and width specified. Outlines take no space and need not be rectangular in shape.

• !important In CSS-1, an author's !important takes precedence over the viewer's !important. In CSS-2, though, the viewer's !important reigns supreme, taking precedence over the author's.

In CSS-1, display has an initial value of block. In CSS-2, display's initial value is inline.

There are other changes too technical to document in this book. It can be useful to visit W3C's web page and read the standards.

CSS Level 3

First, CSS-3 has been under development since April 2001. Now, more than four years later, it is still not codified as a standard. Not only that, but there is no projected date for its acceptance.