Tutorial 4: Creating Special Effects with CSSs

Generating Content with Styles

You can use CSS2 styles to generate content for your document. This is done with the content style. The content style can take any of the forms showed in the following table:

Styles	Description
content: text	Generates a text string to attach to the content of the element
content: attr(attr)	Returns the value of the attr attribute from the element
content: close-quote	Attaches a close quote using the characters specified in the quotes style
content: counter(text)	Generates a counter using the text string, text is the id of the counter
content: counters(text)	Generates a string of counters using the comma-separated text string, text, attached to the content (most often used with list items)
content: no-close-quote	Prevents the attachment of a close quote to an element
content: no-open-quote	Prevents the attachment of an open quote to an element
content: open-quote	Attaches an open quote using the characters specified in the quotes style
content: url(url)	Attaches the content of an external file indicated in the url to the element

The :before and :after pseudo-classes

The content style is always used with either the before or after pseudo-classes. The before pseudo-class indicates that any generated content should be placed before the element, while the after pseudo-class directs that generated content should be placed after the element. For example, the following style:

#logo:before {content: url("theme.wav")}

plays the WAV file, theme.wav, before the logo element is rendered by the browser. On the other hand, if you want to display the text, "finis" at the bottom of the page, you could use the style:

body:after {content: "finis"; display: block}

and the browser will display the text as a block-level element.

Automatic Counting

You can use the content style to automatically number the instances of specific elements in the document. To create an automatic counter you use the content style form:

content counter(text)

where text is the id of the counter. To establish which element begins the counting sequence, use the counter-increment style with the following syntax:

counter-increment: id integer

where id is an identifier of the element and integer defines by how much the counter should be increased on each instance. The integer value is optional. If you don't include an integer value, the browser will assume an increment of 1. For example the following style:

h1:before {content: "Section " counter(section) ": ";

counter-increment: section; font-size: x-large}

will cause the following h1 headings:

<h1>Introduction</h1>
<h1>Description</h1>
<h1>Summary</h1>
<h1>Conclusion</h1>

Section 1: Introduction

Section 2: Description

Section 3: Summary

Section 4: Conclusion

You can reset the counting sequence using the counter-reset style, which has the syntax:

counter-reset: id

where id is the id of the element that resets the counting sequence. Resetting the counting sequence drops the counter back to 0. For example the following style creates two counting sequences for main headings and sub-headings:

h1:before {content: "Section " counter(section) ": ";

counter-increment: section;

counter-reset: sub; font-size: x-large}

h2:before {content: "counter(section) "-" counter(sub) " ";

counter-increment: sub; font-size: large}

When applied to the following h1 and h2 elements:

<h1>Introduction</h1>

<h2>Preface</h2>

<h2>Background</h2>

<h1>Description</h1>

<h2>History</h2>

<h2>Issues</h2>

<h2>Proposals</h2>

<h2>Resolution</h2>

<h1>Summary</h1>

<h1>Conclusion</h1>

<h2>Review</h2>

<h2>Glossary</h2>

<h2>Index</h2>

will appear as:

Section 1: Introduction

1-1 Preface

1-2 Background

Section 2: Description

2-1 History

2-2 Issues

2-3 Proposals

2-4 Resolution

Section 3: Summary

Section 4: Conclusion

4-1 Review

4-2 Glossary

4-3 Index

Managing Quotes

Another use of the content style is to automatically generate quotes. You can create different quote styles for different languages. To place a quotation mark, use the following content styles:

content: close-quote
content: open-quote
content: no-close-quote
content: no-open-quote

where the close-quote and open-quote styles create the closing and opening quotes and the no-close-quote and no-open-quote styles prevent the attachment of an open or close quote to the element. The format of the quote is determined using the style:

q:lang(lang) {quotes: text1 text2}

where lang is the language of the quote, text1 is the text of the open quotes and text2 is the text string of the closes quote. For example the following styles:

blockquote:before {content: open-quote}

blockquote:after {content: close-quote}

q:lang(en) {quotes: """ """ "'" "'"}

will place double quotes around any blockquote element.

The various content styles promise to provide new ways for Web authors to create automatic content for their documents, unfortunately they are not yet well-supported by most browsers.

Scrollbar and Cursor Styles

The scrollbar and cursor styles are used to define the appearance of these window elements. The cursor style defines the appearance of the cursor as it moves over the page element. The syntax of the cursor style is:

cursor: type

where type is n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, crosshair, pointer, move, text, wait, help, auto, default, inherit, or a URL pointing to an image file. Individual browsers also support dozens of other cursor types.

There are several styles to define the appearance of the scrollbar. The following table describes each of these styles.

Styles	Description
scrollbar-3dlight-color: color	Defines the color of the outer top and left edge of the slider
scrollbar-arrow-color: color	Defines the color of the scrollbar directional arrows
scrollbar-base-color: color	Defines the color of the scrollbar button face, arrow, slider, and slider tray
scrollbar-darkshadow-color: color	Defines the color of the outer bottom and right edges of the slider
scrollbar-face-color: color	Defines the color of the button face of the scrollbar arrow and slider
scrollbar-highlight-color: color	Defines the color of the inner top and left edges of the slider
scrollbar-shadow-color: color	Defines the color of the inner bottom and right edges of the slider

Note that many of the styles are not yet well-supported by the browser community.

Outline Styles

Another style group introduced in CSS2 is outlines. Outlines are visual borders placed around page elements but unlike borders created with the border style, an outline does not take up any space (in other words they do not expand the size of the box around the page element by their presence). Outlines can also be non-rectangular in shape. The following table lists the outline styles.

Styles	Description
outline: color style width	Creates an outline around the element content where color is the color of the outline, style is the outline style, and width is the width of the outline
outline-color: color	Defines the color of the outline
outline-style: type	Defines the style of the outline where type is dashed, dotted, double, groove, inset, none, outset, ridge, solid, or inherit
outline-width: length	Defines the width of the outline where length is expressed in one of CSS units of length

Aural Styles

One of the more significant new features of CSS2 was the introduction of aural styles. Aural styles allow you to control how a Web page sounds for those users running aural browsers. For example you can create a Web page with excerpts from Shakespeare's plays and have the dialog recited for the user.

To work with aural styles, CSS2 provides two units of frequency: hz and khz. The hz unit measures the frequency of the sound in hertz, while the khz unit measures the frequency of the sound in kilohertz. With these units you can control the pitch of the spoken content.

The following are the aural styles supported by CSS2:

Styles	Description
azimuth: location	Defines the location of the sound where location is: left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, leftwards, rightwards, or an angle value
cue: url(url1) url(url2)	Adds a sound to an element. If a single value is present, the sound is played before and after the element. If two values are present, the first is played before and the second is played after
cue-after: url(url)	Specifies a sound to be played immediately after an element
cue-before: url(url)	Specifies a sound to be played immediately before an element
elevation: location	Defines the vertical location of the sound where location is: below, level, above, lower, higher, or an angle value
pause: time1 time2	Adds a pause to an element. If a single value is present, the pause occurs before and after the element. If two values are present, the first pause occurs before and the second occurs after.
pause-after: time	Adds a pause after an element.
pause-before: time	Adds a pause before an element.
pitch: value	Defines the pitch of the speaking voice where value is: x-low, low, medium, high, x-high, or a frequency value
pitch-range: value	Defines the pitch range for a speaking voice where value ranges from 0 to 100. A low pitch range results in a monotone voice, while a high pitch range sounds very animated
play-during: url(url) mix repeat type	Defines a sound to be played behind an element where url is the URL of the sound file, mix overlays the sound file with the sound of the parent element, repeat causes the sound to be repeated to fill up the available time, and type is auto to play the sound only once, none to play nothing but the sound file, or inherit
richness: value	Specifies the richness of the speaking voice where value ranges from 0 to 100. A low value indicates a softer voice while a high value indicates a brighter voice
speak: type	Defines how the element content is to be spoken where type is: normal (for normal punctuation rules), spell-out (to pronounce one character at a time), none (to suppress the aural rendering), or inherit
speak-numeral: type	Defines how numeric content should be spoken where type is: digits (to pronounce one digit at a time), continuous (to pronounce the full number), or inherit
speak-punctuation: type	Defines how punctuation characters are spoken where type is: code (to speak the punctuation literally), none (to not speak the punctuation), or inherit
speech-rate: value	Defines the rate of speech where value is: x-slow, slow, medium, fast, x-fast, slower, faster, or a value in words per minute
stress: value	Defines the maximum pitch where value ranges from 0 to 100. A value of 50 is normal stress for a speaking voice
voice-family: text	Defines the name of the speaking voice where text is male, female, child, or a text string indicating a specific speaking voice
volume: value	Defines the volume of voice where value is: silent, x-soft, soft, medium, loud, x-loud, or a number from 0 (lowest) to 100 (highest)

Note that the aural styles do not yet have wide support except in specialized browsers.

Displaying Crop Marks

In high-quality printing, crop marks are used to define where a page should be trimmed before binding. CSS2 supports the marks property, which adds crop marks to a printed sheet. The syntax of the marks style is

marks: type

where type is crop, cross, inherit, or none. The following figures show examples of the crop and cross values. Note that the actual size, style, and position of the crop marks depend on the browser.