CSS Style intro

The guide to create your Web site on Internet

style sheets. For this tutorial, you will need to know a little HTML and some basic desktop publishing terminology.

We begin with a small HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

To set the text color of the H1 elements to red, you can write the following CSS rules:

  h1 { color: red }

A CSS rule consists of two main parts: selector ('h1') and declaration ('color: red'). In HTML, element names are case-insensitive so 'h1' works just as well as 'H1'. The declaration has two parts: property ('color') and value ('red'). While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document.

The HTML 4.0 specification defines how style sheet rules may be specified for HTML documents: either within the HTML document, or via an external style sheet. To put the style sheet into the document, use the STYLE element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    h1 { color: red }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

For maximum flexibility, we recommend that authors specify external style sheets; they may be changed without modifying the source HTML document, and they may be shared among several documents. To link to an external style sheet, you can use the LINK element:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

The LINK element specifies:

the type of link: to a "stylesheet".
the location of the style sheet via the "href" attribute.
the type of style sheet being linked: "text/css".

To show the close relationship between a style sheet and the structured markup, we continue to use the STYLE element in this tutorial. Let's add more colors:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    body { color: black; background: white }
    h1 { color: red; background: white }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

The style sheet now contains four rules: the first two set the color and background of the BODY element (it's a good idea to set the text color and background color together), while the last two set the color and the background of the H1 element. Since no color has been specified for the P element, it will inherit the color from its parent element, namely BODY. The H1 element is also a child element of BODY but the second rule overrides the inherited value. In CSS there are often such conflicts between different values, and this specification describes how to resolve them.

For complete reference see CSS Style reference at W3C
20..1 20..2 20..3 20..4 20..5 20..6 21..1 21..2 22..1 23..1 23..2 24..1 24..2 24..3
24..4 24..5 24..6 25..1 25..2 25..3 26..1 26..2 26..3 26..4 26..5 27..1 27..2 27..3
27..4 27..5 27..6 28..1 28..2 28..3 28..4 28..5 29..1 29..2 29..3 2A..1 2B..1 2C..1
2D..1 2E..1 2F..1 2G..1 2I..1 2K..1 2M..1 2N..1 2N..2 2N..3 2N..4 2N..5 2N..6 2N..7
2N..8 2N..9 2N..10 2N..11 2N..12 2N..13 2N..14 2N..15 2N..16 2N..17 2N..18 2N..19 2N..20 2N..21
2N..22 2N..23 2N..24 2N..25 2N..26 2N..27 2N..28 2N..29 2N..30 2N..31 2P..1 2R..1 2S..1 2S..2
2S..3 2S..4 2S..5 2S..6 2S..7 2S..8 2S..9 2S..10 2S..11 2S..12 2S..13 2S..14 2S..15 2S..16
2S..17 2S..18 2S..19 2S..20 2S..21 2S..22 2S..23 2S..24 2S..25 2S..26 2S..27 2S..28 2S..29 2S..30
2S..31 2S..32 2S..33 2S..34 2S..35 2S..36 2S..37 2S..38 2S..39 2S..40 2S..41 2S..42 2S..43 2S..44
2S..45 2S..46 2S..47 2S..48 2S..49 2V..1 2W..1 2Z..1