CSS Tutorial

CSS Introduction

CSS stands for Cascaded Style Sheet.In the beginning, there was HTML. And it was pretty good, but not great. You couldn’t really create nifty visual designs with it, which gave rise to table-based layout and single-pixel GIF tricks. And that was pretty bad. So CSS was born, and it was very good—in theory, anyway. There was a long struggle to make CSS a viable technology, thanks to imperfect interpretations of the specification, but lo! The day arrived when CSS could be used without fear and dread. And the people rejoiced.

Thanks to CSS, designers can cut back on the FONT and table tricks they’ve been forced to cobble together, and dramatically clean up their markup. With the coming of XHTML and XML, both of which are deeply semantic and must rely on some styling mechanism to become visually appealing, CSS is growing more and more popular. It’s a flexible, easy-to-understand language which offers designers a lot of power. Because it reduces markup clutter, it makes pages easier to maintain. And its centralized styling abilities lets designers adjust page layout with quick, easy edits of the styles, not dramatic changes to the markup. In fact, CSS makes it possible to completely reshape the look of a document without changing a single character inside the BODY element.

Basic CSS Concepts

In order to comprehend how CSS affects the presentation of a document, there are some key concepts that must be grasped. Once these are understood, even in part, it becomes easier to see how the properties and values of CSS work. Do not, however, feel that you must completely understand everything in this chapter before experimenting with CSS. In fact, it is better to review this chapter first, then refer back to it as properties are used.

Associating Styles with Documents

There are four ways to associate styles with a document. These range from associating a separate stylesheet with your document to embedding style information in the document itself.

LINK Element

  The LINK element is found in HTML and XHTML, and is used to associate an external stylesheet with a document.

Generic Syntax

 <link rel="..." type="text/css" href="..." media="...">

Attributes

rel="..."

This attribute describes the relation of the LINKed file to the document itself. For external stylesheets, there are two possible values: stylesheet and alternate stylesheet. Any LINK with a rel of stylesheet will be used in the styling of the document. The value alternate stylesheet is used to refer to stylesheets that are not used in the default rendering of the document, but which can, in theory, be selected by the user and thus change the presentation. The user agent must provide a mechanism to do so in order for this to work, and unfortunately most user agents do not provide such a mechanism. This attribute is required.

href="..."

The value of this attribute is the URL of the external stylesheet. Either relative or absolute URLs may be used. This attribute is required.

type="text/css"

This is used to declare the type of data which is being LINKed to the document. When associating a CSS stylesheet, the only allowed value is text/css. Other stylesheet languages will call for different values (e.g., text/xsl). This attribute is required.

media="..."

Using this attribute, one can declare a stylesheet to apply only to certain media. The default value is all, which means that the styles will be used in all media in which the document is presented. Recognized values under CSS are all, screen, print, projection, aural, braille, embossed, handheld, tty, and tv. Any number of these values can be used in a media attribute by formatting them as a comma-separated list. This attribute is optional.

In this approach, the stylesheet is placed in its own file. Such files are usually given an extension of .css, such as main-styles.css. The LINK element must be placed inside the HEAD element in HTML and XHTML, but XML-based markup languages may have other requirements.

Example

<link rel="stylesheet" type="text/css" href="http://www.mydomainname/styles/basic.css">

<link rel="stylesheet" type="text/css" href="article.css" media="screen,projection">

<link rel="stylesheet" type="text/css" href="printout.css"media="print">

Resolving Style Conflicts

In the course of creating a stylesheet, it is quite possible that many different rules will apply to a single element. For example, if one rule applies to all paragraph elements, and another rule applies to all elements which have a CLASS attribute with a value of urgent, which rule should be used? As it happens, both rules will apply. If the different rules contain declarations that deal with different properties, then there is no conflict, and the styles are “pooled together.” However, if different rules have declarations that attempt to set values for the same property, then there are mechanisms to decide which styles will actually be used.

As an example, assume the following three rules:

div#aside h1 {color: red; margin: 0.5em;}
h1.title {color: purple; font-weight: bold; margin-left: 3em;}
h1 {color: gray; font-style: italic;}

Now assume that the document contains an H1 element which is matched by all three rules. How should it be styled? There are three contradictory values given for color, and there may be some conflict between the margin rules as well. As it happens, the answer is that our hypothetical H1 should be colored red, boldfaced, italicized, and have top, right, bottom, and left margins of 0.5em. Thus, the declarations which were overruled were color: purple, color: red, and margin-left: 3em.

Cascade Rules

In determining how to style a document, some declarations may conflict with each other. For example, if two different declarations call for all paragraphs to be either red or blue, which one wins out? This process is described by the cascade. The cascade rules are as follows:

  • Find all declarations that apply to the element and property in question, for the target media type (i.e., do not apply print-media styles if the current media is screen). Declarations apply if the associated selector matches the element in question. Thus, the declaration in the rule h6 {color: navy;} will be used only if the document contains one or more H6 elements.


  • The primary sort of the declarations is done by origin and weight. The origin refers to the source from which the declaration comes: the author’s styles, the user’s styles, or the user agent’s internal styles (hereafter referred to as the default stylesheet). An imported stylesheet has the same origin as the stylesheet that imported it. The weight refers to the importance of the declaration. For normal declarations, author stylesheets override user stylesheets which override the default stylesheet. For “!important” declarations, user stylesheets override author stylesheets which override the default stylesheet. “!important” declarations override normal declarations. See “Importance” later in the chapter for more details.


  • The secondary sort is by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively. See “Specificity Calculation” later in the chapter for more details.


  • Finally, sort by order specified: if two rules have the same weight, origin, and specificity, the latter specified wins. Rules in imported stylesheets are considered to be placed before any rules in the embedded stylesheet.


    • Specificity Calculation

    Every selector in CSS is assigned a specificity. The actual specificity is calculated based on the composition of the selector itself, according to the following rules:
  • Count the number of ID selectors in the selector (= a).


  • Count the number of other selectors and pseudo-class selectors in the selector (= b).


  • Count the number of element names in the selector (= c).


  • Ignore pseudo-elements.


    • The concatenation of the three values (a-b-c) yields the specificity. Note that these numbers are not represented in base ten; thus 0-0-11 is less than 0-1-0, even though they might be represented as “11” and “10” respectively. It is for this reason that authors are encouraged to think of specificity as a comma- or hyphen-separated list of three numbers. For example:

    h1 {color: black} /* spec. = 0-0-1 */
    div ul li {color: gray;} /* spec. = 0-0-3 */
    pre.example {color: white;} /* spec. = 0-1-1 */
    div.help h1 em.term {color: blue;} /* spec. = 0-2-3 */
    #title {color: cyan;} /* spec. = 1-0-0 */
    body ul#first li ol.steps li {color: silver;} /* spec. = 1-1-5 */

    Therefore, the element which these two rules match will have gray, centered text. Important declarations always outweigh non-important declarations, no matter the specificity of their associated selectors

    Importance

    Declarations may be marked as important using the !important construct. This is applied to the actual declarations which are important, not to the selector nor to the rule as a whole. For example:

    p {color: red; background: yellow !important; font-family: serif;}

    In this example, only the declaration background: yellow is important. The other two declarations are not. If two or more important declarations involve the same property, then the conflict is resolved using specificity calculations. For example:

    h2 {color: red !important; font-style: italic;} h2 {color: green !important;}

    Since both color declarations are important, and both associated selectors have the same specificity, the second rule wins because it comes later in the stylesheet. Thus, H2 elements will be green and italicized—the font-style declaration is not affected in this case.

    Inheritance

    Many styles can be inherited from an element to its descendant elements. Any inherited style will be applied to an element unless the property in question is explicitly set through a rule whose selector matches the element. For example, consider these rules:

    body {color: black;} p {color: green;}

    Given this, the color of any paragraph will be green, while the color of all other elements will be black. Note that this overriding of inherited styles takes effect no matter what specificity or importance was attached to the original rule. For example:

    div#summary {color: black !important;} p {color: green;}

    Any paragraphs within a div whose id attribute has a value of summary will still be green, because the explicitly assigned style overrides the inherited style. However, all properties (except for page) can be given a value of inherit. This directs the user agent to determine the value of the property for the parent element, and use that value for the current element. Thus, p {color: inherit;} will set the color of any paragraph to be the same color as its parent.This has the advantages of upgrading the inheritance mechanism such that a style can be explicitly assigned to inherit, instead of relying on the normal inheritance mechanism as a "fallback."

    Shorthand Properties

    There are a few properties in CSS which are considered shorthand properties; that is, they represent a much larger collection of properties. For example, margin is a shorthand for the properties margintop, margin-right, margin-bottom, and margin-left. The following two rules will have exactly the same effect:

    p {margin: 1em;}
    p {margin-top: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    margin-left: 1em;}

    Because of this, authors must be sure to avoid conflicts between properties and shorthands, or even between two shorthand properties. For example, consider the following two rules as matching the same element:

    pre.example {margin: 1em;} pre {margin-left: 3em;}

    Due to the operation of the cascade, any pre element with a class of example will have a margin 1em wide, including the left margin. The shorthand’s effects have masked out the value assigned in the pre rule. Another good example involves text-decoration, which is a shorthand for no properties at all but acts much as a shorthand property does. Consider the following rules:

    h2 {text-decoration: overline;}
    h2, h3 {text-decoration: underline;}

    Given these rules, all H2 elements will be underlined but not overlined. The given values of textdecoration do not combine, as each combination of keywords is its own unique value. If it is desirable to decorate H2 elements with both an underline and an overline, then the necessary rule is: h2 {text-decoration: underline overline;}

    background background-attachment, background-color, background-image, background-position, background-repeat
    border border-color, border-style, border-width
    border-bottom border-bottom-color, border-bottom-style, borderbottom- width