HyperText Markup Language/CSS
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?
editThe example page from the Paragraphs and Headings section would look something like this, using a browser's default CSS.
By adding a stylesheet the appearance could be changed to:
How to add a CSS style sheet
editCSS 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.