Complete, Concrete, Concise

Practical information without the bloat

A Basic CSS Example

A very colourful webpage.

Contents

  1. A Colourfully Styled Page
  2. The Source Code
  3. Notes

A Colourfully Styled Page

You can see how the page looks here.

The Source Code

<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello World</title>
    <meta charset="utf-8"  />

    <style>

      body {
        background-color:green;
      }

      h1 {
        background-color:orange;
      }

      h2 {
        background-color:aqua;
      }

      p {
        background-color: yellow;
      }


      li {
        background-color:silver;
      }

      ol {
        background-color:fuchsia;
      }

      ul {
        color:lime;
      }

      strong {
        color:white;
        background-color:black;
      }

      mark {
        background-color:white;
        color: blue;
      }

      a {
        background-color:blue;
        color: yellow;
      }

    </style>

  </head>
  <body>
    <h1>This is a heading (for testing purposes)</h1>

    <p>Paragraphs are the bread and butter of HTML.</p>

    <p>They can include <strong>strong</strong> tags.
    </p>

    <ol>
      <li>Lists are cool!</li>
      <li>The list things.</li>
      <li>This one has an <i>i</i> inside.</li>
      <li><p>This one contains a &lt;ul&gt;:</p>
        <ul>
          <li>Item 1</li>
          <li><mark>Marked item</mark></li>
          <li>Final item</li>
        </ul>
        <li><h2>What happens with an h2?</h2></li>
      <li>Final order</li>
    </ol>

    <p>A final paragraph with a dummy
      <a href="#">link</a> inside it.</p>

  </body>
</html>

Notes

  1. Notice that some items are nested inside other items.
  2. Notice that there seems to be some sort of border or margin around nested elements (they don’t go all the way from one edge of the display to the other)
  3. Notice that some elements (like strong) only have a limited effect, but other elements seem to stretch almost across the entire display.