CSS Tutorial 2

Advantages

Advantages of using CSS include:

* Presentation information for an entire website or collection of pages can be held in one CSS file, allowing sweeping changes to be propagated with quick changes to this one file.
* Different users can have different style sheets: for example a large text alternative for visually-impaired users, or a layout optimized for small displays for mobile phones.
* The document code is reduced in size and complexity, since it does not need to contain any presentational markup.

[edit] Syntax

CSS has a simple syntax, and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in curly braces. Each declaration itself consists of a property, a colon (:) then a value.[1]

Example:

p {
font-family: "Garamond", serif;
}
h2 {
font-size: 110%;
color: red;
background: white;
}
.note {
color: red;
background: yellow;
font-weight: bold;
}
p.warning {
background: url(warning.png) no-repeat fixed top;
}
#paragraph1 {
margin: 0;
}
a:hover {
text-decoration: none;
}
#news p {
color: red;
}

In this example are seven rules with selectors p, h2, .note, p.warning, #paragraph1, a:hover and the space-separated pair of selectors #news p. After each selector are the declarations such as color: red;, where the property color is given the value red.

In the first two rules, the HTML elements p (paragraph) and h2 (level-two heading) are being assigned stylistic attributes. The paragraph element will be rendered in Garamond font or, if Garamond is unavailable, some other serif font. The level-two heading element will be rendered in red on a white background.

The third rule shown matches those elements that have a class attribute containing the token 'note'. For example:

This paragraph will be rendered in red and bold, with a yellow background.

The fourth rule shown matches those p elements that have a class attribute containing the token 'warning'. This is in contrast to the third rule which matched all elements, not just paragraph tags, that are marked with a given class attribute (the third rule .note could also have been written as *.note).

In fact, .class selectors involve a special kind of attribute matching, as opposed to testing for equality. Since the HTML class attribute is defined as a whitespace-separated list of tokens, a class selector is evaluated against each of them separately. For example,

would apply both the note and the warning rule.

The fifth rule will match the one and only element in each HTML document whose id attribute is set to paragraph1: It will have no margin within its rendering 'box' as its margin width is set to zero. For example:

This paragraph will have no margin within its rendering
'box' as its margin width is set to zero. There can only be one of these paragraphs per page

The sixth rule defines the hover style for a (anchor) elements. By default in most browsers, a elements are underlined. This rule will remove the underline when the user "hovers" the mouse cursor over these elements.

The last rule matches those p elements that are within the document element whose id attribute has the value news. It is an example of a descendant selector.

Because of the cascading nature of CSS rules, these last p elements will inherit font-family: "Garamond", serif as with all p elements. Those that have the token warning in the value of their class attribute, will inherit that background image too.

A CSS stylesheet can contain comments. Comments are placed between the delimiters /* and */. For example /* This a CSS comment */ Comments can run over multiple lines.

[edit] Selectors & Pseudo Classes

In CSS, selectors are used to declare which elements a style applies to, a kind of match expression. Here are some examples of selector syntax:

All elements
that is, using the * selector
By element name
e.g. for all p or h2 elements
Descendants
e.g. for a elements that are descendants of li elements (e.g links inside lists) the selector is li a
class or id attributes
e.g. .class and/or #id for elements with class="class" or id="id"
Adjacent elements
e.g. for all p elements preceded by h2 elements, the selector would be h2 + p
Direct child element
e.g. for all span elements inside p, but no span elements deeper within the hierarchy, the selector would be p > span
By attribute
e.g. for all the selector would be input[type="text"]

In addition to these, a set of pseudo-classes can be used to define further behavior. Probably the best-known of these is :hover, which applies a style only when the user 'points to' the visible element, usually by holding the mouse cursor over it. It is appended to a selector as in a:hover or #elementid:hover. Other pseudo-classes and pseudo-elements are, for example, :first-line, :visited or :before. A special pseudo-class is :lang(c), where the style would be applied on an element only if it is in language "c".

A pseudo-class selects entire elements, such as :link or :visited, whereas a pseudo-element makes a selection that may consist of partial elements, such as :first-line or :first-letter.

Selectors may be combined in other ways too, especially in CSS 2.1, to achieve greater specificity and flexibility (see the complete definition of selectors at the W3C Web site).

In the following example, several selectors are grouped using comma separation[1]. The rule sets the font for all HTML headings.

h1, h2, h3, h4, h5, h6 {
font-family: "Arial", sans-serif;
}

To use a CSS stylesheet, one would save the CSS code in a file such as example.css and then either link to it or import it from HTML or XHTML web pages using one of the two following formats:





In the first example, note that the /> syntax only applies in XHTML; if writing HTML, one would close an empty element such as this with >.

CSS styles may also be specified in the tag or attached to a specific element via the style attribute.

In applying a CSS stylesheet to an XML document, this format would be used as per the XML example below: