Style Sheets

Part 4 - Colour and Background Properties

There are 2 main Colour and Background Properties: color and background-color. In this section we will discuss each in turn.

  • color

    This property apples to all elements and determines what colour they are (not surprisingly!).

    <html>
    <body bgcolor=black text=white>
    <p style="color: red">A red paragraph.
    <p style="color: #ff0000">Another red paragraph.
    <p style="color: blue">A blue paragraph.
    <p style="color: green">A green paragraph.
    </body>
    </html>

  • background-color

    Use this property to change the background colour of all elements in your document.

    test4.css

    body { background-color: #0000ff }
    A:link { color: red }
    A:visited { color: black }
    A:active { color: white }

    test4.html

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="test4.css" title="test4">
    </head>
    <body>
    <h2>This is an h2 heading.</h2>
    <p>This is a paragraph with a <a href="me.html">link</a>.
    </body>
    </html>

    As you can see from test4.css you can refer to the link properties by using: A:link { color: red }, A:visited { color: black } and A:active { color: white }.

In the next section we will learn about Box Properties.

Back Next