topic title

As said on the page about cascading, you have already been defining styles. Whenever you use an attribute such as COLOR or ALIGN to change a paragraph or some text, this is a style definition. Defining styles in tags like this is the simplest way to apply styles. Almost every HTML element can take the STYLE attribute, which in combination with the potential properties and values it can take, serves as a shorthand for just about any other layout-related attribute. (I add the term "layout-related" because, to stress the point, no matter how much use you make of your style sheet it will never be able to supersede the need for non-layout attributes such as HREF or ALT. Nor was the technique ever intended to.)

This probably seems rather pointless as, at one level, it is the same as using <FONT> tags, or COLOR attributes and so on. At a higher level it still seems pointless, as it doesn't gain for you the advantages of, say, external style sheets - layout information remains in your HTML file, clogging it up. Both are true, but bear in mind the cascade: if you are using style sheets, and want to change only individual tags of your document on a one-off basis, this is one way to do it. In addition, as you'll come to realise, there are many things you can do in the STYLE attribute which can't be done using basic HTML; background colours and images for <P> tags, for instance.

Here's an example:

<I STYLE="color:red; font-size:1.8cm">Big, Red and
    Italic</I>

And the result:

Notice the greater control that can be achieved over font sizes. By using a STYLE attribute you can alter the appearance of a font using any of the CSS supported units. For more details on the possible text properties, including font sizes, margins and so on, see the full list of properties. But do also bear in mind the warnings about fixing font size in this way.

Here's another example with more properties. Note that these are "added on" to properties already defined, such as the font size and face; an example of inheritance:

<H2 STYLE="text-align: center;
              background-color: #FFFF00;
              border-style: groove;">
    Attention!
</H2>

Attention!

You may never use this attribute but it's always good to know it's there. But for style definitions which extend through a whole HTML file, do this in the document header with the <STYLE> tag. For definitions extending through multiple HTML files, use an external style sheet.

Back to the top

Lesson X menu Subject Index A-Z Index ACOM web site.