12 October 2007

More on Cascading Style Sheets: Intro

For those interested in publishing online, an important technology is CSS (introduced here). A short description of CSS is that it involves using a separate file (*.css) for indicating the significance of a particular tag, thereby allowing the user to define tags. Another advantage for CSS websites is the ability of visitors or web managers to instantly change the look and feel of websites; the entire domain can actually be directed to another stylesheet (see Zen Garden for examples). Files set up using CSS require a link element that directs the browser to the style sheet:
<link rel="..." type="text/css" href="..." media="...">
The value for rel allows one to use extended style sheets; hence, the link relationship may be to the default stylesheet or to an alternate stylesheet (these terms are typed out in the field). The "type" has two possible values, text or css. "Media" is interesting because it refers to the appearance of the page whether print or screen; other values include aural, braille, embossed, handheld, tty, and tv.

(In some cases, such as if I wanted to modify this particular site at Blogger, I could replace the <link rel="..."> tag with a <style type="..."> tag, directing the browser to a style "sheet" embedded directly in the page. The style sheet would direct readers to the page header. Most content management software (CMS) style sheets incorporate a huge range of styles that may never get used; the massively complex stylesheets allow the CMS to function somewhat like a word processor, anticipating nearly every combination of fonts, styles, and so on.)

Within the body of the document, there is a hierarchy of styles. A style is the combination of all variable attributes of text, typeface, boldness, italicization, highlighting, border, underlining, and so on. We can imagine that the text you are reading right now is "normal"; boldface text would be a normal-bold, while the title of this post is a different font size and has a border. The styles must be nested. An example of non-nested styles would be having italicized text that overlaps bold text. In conventional HTML, this can be done thus:
<i>italicized text that <b>overlaps</i> bold text</b>
The above will work fine in most browsers for plain HTML 4.0 or earlier, although it's very bad form. In the text structure, there is no parent-child style. In post-HTML web pages (such as Blogger and nearly all CMS applications), that's totally disallowed because it's incompatible with the concept of having unambiguous rules for styles. If you need to do this in XHTML or such, you have a style tag for normal-italic, then normal-italic-bold, then for normal-bold. The middle section can be either a child of normal-italic, or its own style.

(See here for an intro to the idea of hierarchies in XML/CSS.)

I'm going to post a couple of short items about how style sheets are created.

[Part 1: Style Sheet Rules]
SOURCE: Eric A. Meyer, Cascading Style Sheets 2.0 Programmer's Reference, Osborne/McGraw-Hill (2001)



Post a Comment

<< Home