Using inline styles

If you want a quick way to change the way a single tag looks, use the style attribute. This attribute applies to all the tags that go in the body of the document except for <basefont>, <param> and <script>.

For example, the following HTML changes the font and colour of a specific <p> tag:

<p style="color: red; font-weight: bold; 
font-family: 'Comic Sans Ms'";>
A lovely little red paragraph. In bold and in Comic Sans MS</p>

Here's the result:

Inline styles allow you to format a page precisely and are easy to use if you only want to change a few tags. For example, if you want to highlight a heading. There are some drawbacks:

• It takes ages to code lots of styles and it's easy to make mistakes. What's worse, it's very boring
• You get a messy page. It is difficult to tell the content from the style information. It also makes the page much bigger and slow to load
• It is difficult to maintain revisions because you have to change lines scattered all over your page

In fact, inline styles defeat the object of having a style sheet at all. If you want to make changes to lots of pages, it is easier and more efficient to use a linked or embedded style sheet.

Note: An inline style overrides an embedded or linked style. For example, if a page uses a linked style sheet to set the margins for the <p> tag to 1", all paragraphs on the page have 1" margins except for any paragraph where you apply an inline style to change the margins to 0.5".

For a list of properties, see the Style properties.