13 October 2007

More on Cascading Style Sheets: Style Sheet Rules


Click to enlarge
This section is about the rules one encounters in a style sheet. A style sheet is not merely a listing of rules; it includes a virtual map of any possible document that is likely to be hosted in that domain. For example, the figure on the right is a schematic of this blog. There's a header, a main column, and a sidebar (the XHTML used to code the page appears in that order). The main column is further subdivided into a date-header header, and the .post; and the .post is further subdivided into a post-title, post-body, and post-footer. This could go on indefinitely.

The rules are constructed thus:
selector{property1:value1; property2:value2;}
or, somewhat more commonly
where property1:value1; is a declaration.

Rules are typically categorized by the types of selectors used. For content management software, the number of selectors is usually large; there are elements with different classes, such as p.body, which designates the default paragraph formating for the body of a post; "p" is the element, and "body" is the class. There can be a several classes for each element. Here's an example.
padding:2px 14px 2px 29px;
Another common rule has an ID selector. Here, the class is replaced by an ID attribute: p#footer, or div#maclean. CSS allows one to not include the element: in both class and ID selectors, one can write the rule without them.

.post {
margin:.3em 0 25px;
padding:0 13px;
border:1px dotted #bb9;
border-width:1px 0;

#sidebar {
margin:15px 0 0;
The :link selector is used for hyperlinks that have not been visited. Notice the use of the colon rather than a semi-colon. This is because it's a pseudo-class. Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information.
a:link {
The :visited selector is used for hyperlinks that have been visited.
a:visited {
The :active selector is used for all elements selected by the user.
a:active {
And so on.
SOURCE: Eric A. Meyer, Cascading Style Sheets 2.0 Programmer's Reference,
Osborne/McGraw-Hill (2001).

Selectutorial, MaxDesign

See also: Definitions, Cascading Style Sheets, level 2


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)