Cascading Style Sheets (CSS)
From: Pawan R. Vora, Designing Next-Generation Web Sites. Workshop at the 1999 Human Factors and Ergonomics Society Meeting.
CSS is based on rules and style sheets. A rule is about one stylistic aspect of one or more elements. A style sheet is one or more rules that apply to an HTML document.
Example: H1 {color: red; font‑weight: bold;}
CSS offer the ability to control how content appears on your Web pages. It offers more control over style and layout with ability to create consistent sites quickly.
Through CSS a designer can describe and control how the text and design elements are displayed on a Web page, hence the term "style sheets."
· Allow separation of structure and presentation
· Currently structure and presentation markup is intertwined in HTML
· Support a variety of output media (screen, printer, screen reader, Braille devices, Internet‑enabled devices, etc.)
Cascading
A fundamental feature of CSS is that more than one style sheet can influence the presentation of a document ‑‑ for example, the browser, the designer, the user. This feature is known as cascading because the different style sheets are thought of coming in a series (Lie and Bos, 1997).
Therefore, the style sheet implemented on a page cascades ‑‑ that is, your inline style sheet definition overrides the embedded style sheet, which in turn overrides the external style sheet. When style sheet definitions conflict, the most recent definition wins.
Also, users themselves can define their own style sheets.
Benefits
· Easier management of the Web sites Easier to implement style guide recommendations
· Smaller files (fewer graphics downloads)
· Text doesn't need to be graphics anymore!
· Faster downloads
· Usefulness not only for designing usable sites, but inclusive sites as well.
Incorporating Cascading Style Sheets
Four ways of using CSS:
In‑fine style sheets
You use them within certain tags on a page
For example,
<p style ="font: 12pt arial">
Embedded style sheets
You provide the style sheet definition within the <HEAD> element of the HTML document
For example,
<style TYPE="text/css">
BODY {
background: #ffffff;
color: #000000;
margin‑left: 2em;
margin‑top: 2em;
}
</STYLE>
Linked style sheets
You link an external style sheet to the HTML document using the <LINK> tag within the <HEAD> element
For example,
<LINK REL="STYLE SHEET" HREF="project.css"
TYPE="text/css">
Imported style sheets
For example,
<STYLE>
@import
url (http: / /www.sitename.com/css/project.css)
</STYLE>
CSS Level I
- The first proposed recommendation by W3C
- The goal was to create a simple style sheet mechanism for HTML documents
- Offers support for the following:
§ Font properties: font‑family, font‑style, font‑variant, font‑weight
§ Color and background properties: color, background‑color, background‑image, background‑repeat, background‑attachment, background‑position, background
§ Text properties: word‑spacing, letter‑spacing, text‑orientation, text align, text‑transform, text‑indent, line‑height
§ Box properties: margin, padding, border, width, height, float, clear
§ Classification properties: display, white‑space, list‑style‑type, list‑style image, list‑style‑position, list‑style
- Currently, browsers support CSS Level 1 to a certain extent Source:
§ CSS Compatibility Charts, http://webreview.com/wr/pub/guides/style/style.html
§ Netscape Navigator 3.x: No support Microsoft Internet Explorer 3.x: Partial Support >
§ Windows 95/NT: 22.6% > Macintosh: 13.9% Netscape Navigator 4.x: Partial support >
§ Windows 95/NT: 38.8% > Macintosh: 38.8% Microsoft Internet Explorer 4.x:
§ Extensive support (but not complete conformance) >
§ Windows 95/NT: 69.9% > Macintosh: 77.2% (IE 4.5)
§ Microsoft Internet Explorer 5.x: Extensive support (close, but not complete conformance yet) >
§ Windows 95/NT: 72.9%
CSS Level 2: Beyond separation of structure and presentation
- Several improvements over CSS1
- Positioning and Layering of Elements
- Allow better control over document layout
- Both on screen and in print
- Absolute and relative positioning of the elements on an HTML page
§ Relative positioning. The elements keep their normal flow size, including line breaks and the space originally reserved for them.
§ Absolute positioning. The contents of an absolutely positioned element do not flow around any other boxes.
§ Fixed positioning. Although similar to absolute positioning; an immovable viewport (a window or other viewing area on the screen) is established on the screen.
§ Fixed boxes (viewports) do not move when the document is scrolled, similar to fixed background images. This is useful for placing, for instance, a corporate logo at the top of each page.
§ If the position is relative it appears on the page only after the elements before it. If it is defined as absolute, it will appear exactly at the position you specify *in the style tag.
- Z‑index. The z‑index tells the browser in what order to "stack" or cascade die layers. It works like this: the layer that has the highest z-index is the one on top. The rest fall according to their relative z-index numbers.
- Downloadable Fonts
§ Give designers the typographic diversity they require without resorting to images
- Aural Cascading Style Sheets (ACSS)
§ Empower visually disabled users by applying style sheets to oral presentations
- Enhanced Printing Facilities
§ Improve printing from the Web
- Internationalization
§ CSS2 hilly supports the international ISO 10646 character set, allowing authors to manage differences in language, text direction, and character encoding schemes. CSS can display left‑to‑right, right‑to‑left or mixed text, enabling document authors to apply specialized formatting to portions of documents depending on the language they are written in. In addition, CSS2, when coupled with internationalization features, improves the searchability of content.
- Support for media types
§ To enable an author to specify precisely how a document is to be presented on various media (e.g. screen, paper, speech synthesizer, and Braille device).
§ For example, fonts designed for a computer screen generally need to be larger than would be required of the same document in paper form.
§ Enhanced page printing >
· Authors have control over the size of a page, its margins, and the placement of page breaks.
§ Supports following media types >
· screen: for computer screen
· print: for "printouts" or "print preview" displays
· projection: for projected presentations such as slide shows );‑‑
· Braille and embossed: for tactile feedback devices and printers
· aural: for speech generators
· TV: for television‑type displays (e.g., WebTV)
· hand‑held: for palm‑top computers
· all: for all media types
- Specifying media dependencies for style sheets
- @import url(voice.css) speech;
- <link rel="stylesheet" type="text/css" media="print" href="print.css"> -
- - @media print {
body { font‑size: 10pt;}
}
@media screen {
body { font‑size: 12pt;}
}
@media print, screen {
body { color: black;}
}
- Support for "styling" tables
- Special effects
§ One example of misuse of the CSS 1 specification 'involved repeating the same words with slight offsets each time in order to generate the effect of drop‑shadow text. While the effect may be acceptable when a CSS‑enabled browser was used, when the CSS feature is disabled the text frequently turns to gibberish.
§ The CSS2 specification eliminates the need for this poor programming practice by providing a command to support the text shadow effect
- System Color
- Enables pages to be developed
- To account for a user's preferred look and feel and
- To respond to current user settings, which may be related to a disability (e.g. color‑blind users may have their environment configured to avoid specific colors).
Aural Style Sheets
- Aural presentation, with a combination of speech synthesis and audio icons provide an alternative to the visual presentation
- Usually aural presentation occurs by converting the document to plain text and feeding it to a "sreen reader"
§ Less effective, document structure is lost
- Aural Style Sheets enable the retention of document structure and may be used to support or replace visual presentation.
- Aural presentation of information is likely to improve presentation of information for in‑car use, industrial and medical documentation systems, home entertainment, and for supporting illiterate users.
- Aural rendering is essentially independent of the visual rendering
§ Allows orthogonal aural and visual views
§ Allows browsers to optionally implement both aural and visual views to produce truly multi‑modal documents
- Aural style sheets can control the following for Web page elements:
§ Volume
§ Speak
§ Pause properties: pause‑before, pause‑after, pause
§ Cue properties: cue‑before, cue‑after, cue
§ Mixing properties: play‑during
§ Spatial properties: azimuth, elevation
§ Voice characteristic properties: speech‑rate, voice‑family, pitch, pitch-range, stress, richness, speak‑punctuation, speak‑date, speak‑time
Benefits of CSS
- CSS, in combination with HTML and XML, truly separates content from its presentation.
- Will allow designers to create tighter, more dynamic content for the Web
- Pages using CSS will transfer faster to users and will be easy to maintain
- Will lead to improved accessibility, maintainability and performance on the Web
Guidelines for using Style Sheets
- Brevity should be your goal.
§ Shorten your style sheet by grouping selectors and declarations. This makes your style sheet easy to read and load faster.
- To make your style sheet code easier to read (and change), place each declaration on a separate line.
- For embedded style sheets, comment out the information between <STYLE> and </STYLE> tags so that the browsers that don't understand style sheets don't display your style sheet definitions on the Web page.
§ Referring to the HTML comments (<!‑‑ and ‑‑>) and not CSS comments (\* and *\), which are used to write comments within the style sheet.
- Know when to use an ID attribute and when to use a CLASS attribute.
§ The value of an ID attribute must be unique throughout the document. So, if you would like to use the same effect at several places within the document, use a CLASS attribute.
- Minimize using inline STYLE attributes.
§ Though STYLE attributes are an effective way to introduce inline styles and over‑ride previously defined styles, they are difficult to change globally.
§ Since the declarations *in the STYLE attribute only apply to the element where they are specified, there is no way to reuse your declaration and your documents will get longer.
§ Also, if you later want to change the presentation of your document, you will have to make changes in more places.
§ By interleaving style and content, you miss out an important advantage of style sheets: the separation of content and presentation. By putting all your style settings into one style sheet, you can make that style sheet apply to more than one document.
§ Save the STYLE attribute for those occasions when you want to make stylistic changes to a particular occurrence of an element while leaving alone the style of all others of the same element type.
- Use relative units of measures to make your document scaleable
§ An absolute unit is a unit of measure that specifies a value that is fixed. For example, 3in, 4mm, and 5pt. Absolute values have limited usefulness because they cannot be scaled.
§ A relative unit is a unit of measure that specifies a value that is relative to the font size, usually the font size of the element itself. (Me only exception is the font‑size property, where the value scales to the font size of the element's parent. Relative units have the advantage over absolute units in that they scale automatically. When you choose a different font, all properties that were expressed in em or ex don't have to be changed.
§ A device‑dependent unit is a unit of measure that depends on the device on which it is used. The pixel (px) is the only device‑dependent unit CSS1 uses. (Lie and Bos, 1997).
§ Use em or ex units
§ Do not use absolute units, such as inches and picas, when scalability is important.
§ Percentage values, like relative units, automatically scale. What the percentage is a percentage of ‑‑ that is, what it is relative to ‑‑ depends on that property. Usually, it is a percentage of the value that the property has in the parent element. For example, an H1 with a font size of 80% means the font is 80% of the font size of its parent (often the BODY element). The only exception is the line‑height property.
§ Keywords are not units of measure, but some have connotations of being relative. For example, the keywords "bolder" and "lighter," which are for the font‑weight property, are clearly relative: they are relative to the font‑weight of the parent element.
§ Making your document scaleable is important to enabling users on the Web to display it. A document that is scaleable can be re‑scaled to fit different output media. This is particularly important for the Web because users may want to make your document appear larger or smaller on their screens. If your document is not scaleable, they won't be able to do this.
§ Scalability is achieved by using relative units rather than absolute units. An absolute unit is used usually because it looks good in combination with something else. If any part of the combination changes, the intended effect is lost.
- Specify a font set (font‑family) not just a single font.
§ A browser checks whether it has the first font listed in the font set. If it does, it uses that font. If it doesn't, it moves to the next font 'in the list to see if it has that font, and so on until it finds a font that it has.
§ Font sets are also helpful in documents that use different alphabets. A document that contains both English and Hebrew will likely require at least two fonts, one for each language. Listing both in the font set allows the browser to choose the right font: if the first font listed doesn't have the right letters, the browsers will try the second font, and so on.
4.10 Challenges
§ Inconsistent implementation of style sheets across browsers
§ If you include IE version 3 of the browsers, only 25 percent of the current CSS1 spec is consistently supported across the two major browsers
§ More and more people are using Version 4 of the browsers, and it will soon be common to use CSS
§ Browser breakdown on the Web (http://www.statmarket.com)
§ Microsoft: 72.99%
§ MSIE 5.x: 21.31%
§ MSIE 4.x: 45.45%
§ MSIE 3.x: 3.77%
§ Netscape: 25.16%
§ Netscape 4.x: 23.23%
§ Netscape 3.x: 3.37%
§ Other: 1.18%