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?
The 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
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  element is used to apply the rules from a CSS style sheet to a document. The basic syntax is: 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 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: Save this as styles.css.

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

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