(Cascading Style Sheets) CSS 2.1 Reference

How To Apply CSS Styles

Apply directly to HTML element.

A CSS style can be applied directly to a HTML element by using the element's style attribute. The following example sets the color and background-color properties for a <p> element.

<p style="color: red; background-color: yellow">This is red text with a yellow background.</p>

Embed within the HTML document.

CSS style rules can be embedded in the head section of a HTML document by using the <style> element. When this method is used, the style rules apply to the whole HTML document. This allows individual style rules to be applied to multiple HTML elements. In the following example, the color and background-color properties will be applied to all <p> elements within the HTML document. In addition, the text-align property will be applied to all <h1> elements.

<head>
  <style type="text/css">
    p {color: red; background-color: yellow;}
    h1 {text-align: center;}
  </style>

...

</head>

Use external style sheet.

CSS style rules can be contained in an external style sheet file. The HTML document can link to the style sheet by using a <link> element located in the head section. This allows individual style rules to be applied to every HTML document that links to the style sheet. If an entire website links to a single style sheet, then changes made to the style sheet will be applied to the whole website.

The following shows how a HTML document can link to a style sheet named "website.css". Note: When using XHTML instead of HTML, the <link> element should end with " />" instead of ">".

<head>
  <link href="website.css" rel="stylesheet" type="text/css">

...

</head>

The following shows the contents of a style sheet file named "website.css". In this example, the color and background-color properties will be applied to all <p> elements within all HTML documents that link to this style sheet. In addition, the text-align property will be applied to all <h1> elements within all HTML documents that link to this style sheet.

p {color: red; background-color: yellow;}
h1 {text-align: center;}