intro | embedded/external | inline | the cascade | suggestions | style power

QUICK TUTORIAL - INLINE STYLES AND THEIR HTML EQUIVALENTS

In general, it is not advisable to use inline styles (styles that are applied directly to the tag enclosing your content) because, after all, the advantage to using styles is that you can control the way your pages look from a central style sheet. If you have to put a style declaration inside every <p> tag, you're no better off than if you just added hundreds of <font> tags, right?

But sometimes, you just need to change one thing on a page, just this one time and never again, and it just doesn't feel worth it to add this unique formatting to the style sheet. In that case, heck, just use an inline style. Inline styles can also be useful when you want to test an effect before adding it to the stylesheet.

For those of you who learned HTML before CSS was used so extensively, here is a chart which gives you HTML tags (with attributes) and styles. The effects are equvalent, except where noted.

<p style="font-size: .6em;">...</p>*

(You can also apply a font style to <td>, <span>, <a> <h1> etc. Also, you can put more than one style inside a tag - just be sure they're separated by a semicolon, for example: <a href="#" style="font-size: .6em;color: #FF0000;">)

(When you put more than one class in a tag, don't use a semicolon between them. If you use more than one style, do use the semicolon. )

*Be sure you close your <p> tags if you use them. Otherwise, your style will continue to apply. We mention this because there are some older tutorials which teach you to use a <p> tag as a line break. You should consider <p>...</p> a "paragraph container" instead, using <p> at the beginning of a paragraph, and </p> at the end.