CSS - INTRODUCTION

CSS allows you to style your web pages just about any way you wish. By style I mean

All of this is done by using attributes (properties) of the particular element, e.g. text properties.

There are several ways you set the style.

  1. In a HTML tag - this is the simplest way but the style only effect that tag. For example:

    <p style="font-size:12;font-family:comic sans ms;"> ... your text ... </p>

    The above will cause "... your text ..." to be size 12 in Comic Sans MS font face.

  2. In the page <HEAD> - for a specific HTML tag, set the properties. For example:

    P {font-size:16;font-weight:bold;}

    <p> ... your text ... </p>

    This will cause "... your text ..." in the paragraph to appear as bold font size 16.

  3. Naming a Style in the page <HEAD> - by placing CSS style in the HEAD of your page and naming it, you can then reference that name in any HTML tag and that tag will assume the associated properties. The name can include numbers, underscore, and the dash. There are two ways to name a style:

    1. As A Class which uses the convention, .name, e.g.

      <head>
      <style type="text/css">
      .blue12 {
      font-size:12;
      font-family:Comic Sans MS;
      }
      </style>

      Now you can use the class, blue12, style in different HTML tags:

      • <p class="blue12"> ... your text ... </p>
      • <td class="blue12"> ... your text ... </td>

    2. As An ID which uses the convention #name

      <head>
      <style type="text/css">
      .#blue12 {
      font-size:12;
      font-family:Comic Sans MS;
      }
      </style>

      Now you can use the ID, blue12, style in different HTML tags:

      • <p id="blue12"> ... your text ... </p>
      • <td id="blue12"> ... your text ... </td>

    NOTE: Individual class and ID names should be unique, i.e. you should not have an .blue12 and a #blue12.

    I recommend that you use all class name, e.g. .bluetext, rather than use the ID notation, #.

    An excellent CSS reference is w3schools.com.