So far we have seen how to divide text into paragraphs and to create section headings. While HTML allows you to define the structure of your documents, it doesn't give you any control over their appearance. Cascading Style Sheets (CSS) is a language that describes the presentation of documents. You can use CSS to alter the appearance of your HTML documents. CSS directives are called rules or styles, and a document of CSS rules is called a stylesheet. (Note that web browsers have a built-in stylesheet that determines the default appearances of headers, paragraphs, etc. These styles can be overridden with your own stylesheet.)

This section gives an introduction to styling HTML with CSS. CSS itself is covered in the companion wikibook Cascading Style Sheets.

What does CSS do?

edit

The example page from the Paragraphs and Headings section would look something like this, using a browser's default CSS.

Sundial
From Wikipedia, the free encyclopedia.
A sundial measures time by the position of the sun. The most commonly seen designs, such as the 'ordinary' or standard garden sundial, cast a shadow on a flat surface marked with the hours of the day. As the position of the sun changes, the time indicated by the shadow changes. However, sundials can be designed for any surface where a fixed object casts a predictable shadow.
Most sundial designs indicate apparent solar time. Minor design variations can measure standard and daylight saving time, as well.
History
Sundials in the form of obelisks (3500 BC) and shadow clocks (1500 BC) are known from ancient Egypt, and were developed further by other cultures, including the Chinese, Greek, and Roman cultures. A type of sundial without gnomon is described in the old Old Testament (Isaiah 38:2).
The mathematician and astronomer Theodosius of Bithynia (ca. 160 BC-ca. 100 BC) is said to have invented a universal sundial that could be used anywhere on Earth. The French astronomer Oronce Finé constructed a sundial of ivory in 1524. The Italian astronomer Giovanni Padovani published a treatise on the sundial in 1570, in which he included instructions for the manufacture and laying out of mural (vertical) and horizontal sundials. Giuseppe Biancani's Constructio instrumenti ad horologia solaria discusses how to make a perfect sundial, with accompanying illustrations.
Installation of standard sundials
Many ornamental sundials are designed to be used at 45 degrees north. By tilting such a sundial, it may be installed so that it will keep time. However, some mass-produced garden sundials are inaccurate because of poor design and cannot be corrected. A sundial designed for one latitude can be adjusted for use at another latitude by tilting its base so that its style or gnomon is parallel to the Earth's axis of rotation, so that it points at the north celestial pole in the northern hemisphere, or the south celestial pole in the southern hemisphere.
A local standard time zone is nominally 15 degrees wide, but may be modified to follow geographic and political boundaries. A sundial can be rotated around its style or gnomon (which must remain pointed at the celestial pole) to adjust to the local time zone. In most cases, a rotation in the range of 7.5 degrees east to 23 degrees west suffices.
To correct for daylight saving time, a face needs two sets of numerals or a correction table. An informal standard is to have numerals in hot colors for summer, and in cool colors for winter. Rotating the sundial will not work well because most sundials do not have equal hour angles.
Ordinary sundials do not correct apparent solar time to clock time. There is a 15 minute variation through the year, known as the equation of time, because the Earth's orbit is slightly elliptical and its axis is tilted relative to the plane of its orbit. A quality sundial will include a permanently-mounted table or graph giving this correction for at least each month of the year. Some more-complex sundials have curved hour-lines, curved gnomons or other arrangements to directly display the clock time.

By adding a stylesheet the appearance could be changed to:

Sundial
From Wikipedia, the free encyclopedia.
A sundial measures time by the position of the sun. The most commonly seen designs, such as the 'ordinary' or standard garden sundial, cast a shadow on a flat surface marked with the hours of the day. As the position of the sun changes, the time indicated by the shadow changes. However, sundials can be designed for any surface where a fixed object casts a predictable shadow.
Most sundial designs indicate apparent solar time. Minor design variations can measure standard and daylight saving time, as well.
History
Sundials in the form of obelisks (3500 BC) and shadow clocks (1500 BC) are known from ancient Egypt, and were developed further by other cultures, including the Chinese, Greek, and Roman cultures. A type of sundial without gnomon is described in the old Old Testament (Isaiah 38:2).
The mathematician and astronomer Theodosius of Bithynia (ca. 160 BC-ca. 100 BC) is said to have invented a universal sundial that could be used anywhere on Earth. The French astronomer Oronce Finé constructed a sundial of ivory in 1524. The Italian astronomer Giovanni Padovani published a treatise on the sundial in 1570, in which he included instructions for the manufacture and laying out of mural (vertical) and horizontal sundials. Giuseppe Biancani's Constructio instrumenti ad horologia solaria discusses how to make a perfect sundial, with accompanying illustrations.
Installation of standard sundials
Many ornamental sundials are designed to be used at 45 degrees north. By tilting such a sundial, it may be installed so that it will keep time. However, some mass-produced garden sundials are inaccurate because of poor design and cannot be corrected. A sundial designed for one latitude can be adjusted for use at another latitude by tilting its base so that its style or gnomon is parallel to the Earth's axis of rotation, so that it points at the north celestial pole in the northern hemisphere, or the south celestial pole in the southern hemisphere.
A local standard time zone is nominally 15 degrees wide, but may be modified to follow geographic and political boundaries. A sundial can be rotated around its style or gnomon (which must remain pointed at the celestial pole) to adjust to the local time zone. In most cases, a rotation in the range of 7.5 degrees east to 23 degrees west suffices.
To correct for daylight saving time, a face needs two sets of numerals or a correction table. An informal standard is to have numerals in hot colors for summer, and in cool colors for winter. Rotating the sundial will not work well because most sundials do not have equal hour angles.
Ordinary sundials do not correct apparent solar time to clock time. There is a 15 minute variation through the year, known as the equation of time, because the Earth's orbit is slightly elliptical and its axis is tilted relative to the plane of its orbit. A quality sundial will include a permanently-mounted table or graph giving this correction for at least each month of the year. Some more-complex sundials have curved hour-lines, curved gnomons or other arrangements to directly display the clock time.

How to add a CSS style sheet

edit

CSS is normally kept in a separate file from the HTML document. This allows a style sheet to be shared by several HTML documents. The link element is used to apply the rules from a CSS style sheet to a document. The basic syntax is:

    <link rel="stylesheet" href="styles.css">

where styles.css is the filename, path, or URI for the stylesheet.

(The name "styles.css" is used for the sake of simplicity and convention when you are working with only one stylesheet. You can use more than one stylesheet. Each additional sheet is added with an additional <link> tag. In some cases, it makes sense to split up your CSS rules into multiple stylesheets, especially when working with larger websites. In that case, you should use more descriptive names for your stylesheets.)

The CSS file for the example above contains the following:

body {
  background:#ffc;
  color:#000;
  font-family:cursive
}

h1 {
  color:red;
  text-align:center;
  font-size:1.2em;
  font-weight:bold;
  margin:0
}

h2 {
  text-align:center;
  font-size:1em;
  font-weight:bold;
  margin:1em 0 0
}

p {
  text-indent:2em;
  text-align:justify;
  margin:0
}

Save this as styles.css.

The HTML document from the previous section with a link element added on the fifth line is given below. Save this as sundial2.htm in the same directory.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sundial</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Sundial</h1>
    <p>From Wikipedia, the free encyclopedia.</p>
    <p>A sundial measures time by the position of the sun. The most commonly seen designs, such as the
       'ordinary' or standard garden sundial, cast a shadow on a flat surface marked with the hours of
       the day. As the position of the sun changes, the time indicated by the shadow changes. However,
       sundials can be designed for any surface where a fixed object casts a predictable shadow.
    </p>
    <p>Most sundial designs indicate apparent solar time. Minor design variations can measure standard
       and daylight saving time, as well.
    </p>
    <h2>History</h2>
    <p>Sundials in the form of obelisks (3500 BC) and shadow clocks (1500 BC) are known from ancient
       Egypt, and were developed further by other cultures, including the Chinese, Greek, and Roman
       cultures. A type of sundial without gnomon is described in the old Old Testament
       (Isaiah 38:2).
    </p>
    <p>The mathematician and astronomer Theodosius of Bithynia (ca. 160 BC-ca. 100 BC) is said to have
       invented a universal sundial that could be used anywhere on Earth. The French astronomer Oronce
       Finé constructed a sundial of ivory in 1524. The Italian astronomer Giovanni Padovani published
       a treatise on the sundial in 1570, in which he included instructions for the manufacture and 
       laying out of mural (vertical) and horizontal sundials. Giuseppe Biancani's Constructio 
       instrumenti ad horologia solaria discusses how to make a perfect sundial, with accompanying 
       illustrations.
    </p>
    <h2>Installation of standard sundials</h2>
    <p>Many ornamental sundials are designed to be used at 45 degrees north. By tilting such a 
       sundial, it may be installed so that it will keep time. However, some mass-produced garden 
       sundials are inaccurate because of poor design and cannot be corrected. A sundial designed for 
       one latitude can be adjusted for use at another latitude by tilting its base so that its style 
       or gnomon is parallel to the Earth's axis of rotation, so that it points at the north celestial
       pole in the northern hemisphere, or the south celestial pole in the southern hemisphere.
    </p>
    <p>A local standard time zone is nominally 15 degrees wide, but may be modified to follow 
       geographic and political boundaries. A sundial can be rotated around its style or gnomon (which
       must remain pointed at the celestial pole) to adjust to the local time zone. In most cases, a 
       rotation in the range of 7.5 degrees east to 23 degrees west suffices.
    </p>
    <p>To correct for daylight saving time, a face needs two sets of numerals or a correction table. 
       An informal standard is to have numerals in hot colors for summer, and in cool colors for 
       winter. Rotating the sundial will not work well because most sundials do not have equal hour 
       angles.
    </p>
    <p>Ordinary sundials do not correct apparent solar time to clock time. There is a 15 minute 
       variation through the year, known as the equation of time, because the Earth's orbit is 
       slightly elliptical and its axis is tilted relative to the plane of its orbit. A quality 
       sundial will include a permanently-mounted table or graph giving this correction for at least 
       each month of the year. Some more-complex sundials have curved hour-lines, curved gnomons or 
       other arrangements to directly display the clock time.
    </p>
  </body>
</html>

Open sundial2.htm with your web browser and you should see a page with a pale yellow background.