Using CSS in your documents

Published 25/05/2004 12:08   |    Updated 13/02/2009 13:16
How do I use CSS in my documents?

There are three basic ways of applying CSS to HTML: In-line, Internal and External.

 

With In-line the instruction is placed directly into the HTML tag. So using the command <p style="color: red">text</p> would make the paragraph denoted by the <p> and </p> HTML tags red.

 

With Internal the command comes at the start of the page and the style you specify applies to all of that page. So in the example below, all the paragraphs would appear in blue and all the links would appear in red.


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

<html>

<head>

<title>CSS Example</title>

<style type="text/css">

p { color: blue; } a { color: red; }

</style>

 

However, as they include the CSS within the HTML document, both these methods could be said to rather miss the point - i.e. keeping the content and formatting separate. This issue is however, addressed in the third way of employing CSS - External Style Sheets.

 

Here, the CSS file is completely separate and the style specified applies to all the pages - to the whole web site. If the file was then saved as say, daveweb.css, it could be linked to the main HTML document like this:


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

<html>

<head>

<title>CSS Example</title>

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

 

There are also other ways of linking external style sheets, but the above are the most common.

 

 

« The Basics: CSS

Selectors, Properties & Values »

 

Please tell us how we can make this answer more useful.

Print