Other Styles

This page contains a list of style properties; experiment with them.

Remember though that the more effects and styles you apply the less impact each will have.

All styles follow the

style="property: value;"

format and you can apply as many different styles as you want to a single piece of text simply by adding a semi-colon after each value and then specifying a new property and value e.g.

style="property: value; property: value;..."

The following are some of the more commonly employed text stylings found in Web pages:

font-family: serif, sans-serif...
font-size: xpt
font-weight: bold
font-style: oblique
text-align: center, left, right
line-height: xem

Valid XHTML 1.0 Transitional

Adding Some Style

To help your audience enjoy or at the very least absorb the information on your page you should add a little style in the form of different colours, sizes, and weights of fonts. Adding styles will also help you draw your readers attention to particularly important information.

The number of style elements available is enormous however they all follow the same format:

style="property: value;"

  1. Locate an <h1> tag or a <p> tag.
  2. Click between the tag letter and the >, hit space then type:

    <body>
    <h1 style="color: red">Bob's World of Trees</h1>
    <p>Trees are awesome. They are mostly green but sometimes in Autumn...

    Your browser should display it like this:

    Bob's World of Trees

     

    IMPORTANT: html accepts American spelling only! Colour must be spelt "color" to be recognized.

    htmlHQ has a page containing a full list of colours. To use one of them instead of typing the colour name type "#" followed by the 6 character code for the colour text you want e.g.

    style="color: #ff0000;"

  3. While this is a convenient way to style large sections of plain text styles are more commonly applied to short sections of plain text using the paired <span> tag. This is an example of an "in-line element".

    Styles are added to this tag in the same way as they are applied to headings and paragraphs.

    To add bold to a small section of text the coding would read:

    <p>Trees are <span style="font-weight: bold">awesome</span>. They are mostly green...

    Your browser should display it like this:

    Trees are awesome. They are mostly green...

    There is no limit (except common sense and good taste) to how much style you can add to your plain text . You can style each word individually if that creates the effect you are looking for.

    Trees are <span style="font-weight: bold">awesome</span>. They are mostly <span style="color: green;">green</span> but sometimes in Autumn they go <span style="color: red;">red</span>, or, <span style="color: orange;">orange</span> or <span style="color: yellow;">yellow</span>.

    Your browser should display it like this:

    Trees are awesome. They are mostly green but sometimes in Autumn they go red, or, orange or yellow.

  4. Save the document now!!!
  5. Start your browser, click: File→ Open→ Browse now choose your file. Your Web page should now have a nice red heading or line of text.

Next section: Links & Mail →