Using Cascading Style Sheets (CSS)

Specifying Styles within an HTML Document

Styles specified within the document may either apply to the whole document, or a tag contained in the document.

Applying the Style to the whole Document

To apply a style to the whole document, the style information must be placed in the head of the document. The style information is a set of rules that determine how the HTML document is formatted. The following example sets the style for links so they're not underlined and have a colour of black, that turn blue when the mouse is moved over the link. The actual syntax for the style is explained later in this tutorial.

<head>
    <title>Title for this Page</title>
    <style type="text/css">
        a
        {
            text-decoration:none;
            color:#00c;
            background:transparent;
        }
        a:hover
        {
            color:#900;
            background:transparent;
        }
    </style>
</head>

Applying the Style to a Tag

Applying a style directly to a tag is called an inline style. To apply a style to a tag, use the style attribute of the particular tag you want to apply the style to. The following example sets the contents of a cell in a table so that the background colour is light blue.

<td style="background-color:#39C;">content of cell</td>

Further styles maybe added, separated by a semicolon.

<td style="background-color:#39C;font-size:small;">content of cell</td>

You might also like...

Comments

About the author

Gez Lemon United Kingdom

I'm available for contract work. Please visit Juicify for details.

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Debuggers don't remove bugs. They only show them in slow motion.”