Sams Teach Yourself HTML 4 in 24 Hours

Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

Specifying Inline Styles

In some situations, you might want to specify styles that will be used in only one Web page. You can then enclose a style sheet between <style> and </style> tags and include it in the beginning of an HTML document, between the </head> and <body> tags. No <link /> tag is needed, and you cannot refer to that style sheet from any other page (unless you copy it into the beginning of that document, too).

If you want to specify a style for only a small part of a page, you can go one step further and put a style attribute within a <p>, <div>, or <span> tag.

Note

<span> and </span> are dummy tags that do nothing in and of themselves except specify a range of text to apply any style attributes that you add. The only difference between <div> and <span> is that <div> forces a line break, while <span> doesn't. Therefore, you should use <span> to modify the style of any portion of text shorter than a paragraph.

Here's how a sample style attribute might look:

<p style="color: green">This text is green, but
<span style="color: red"> this text is red.</span>
Back to green again, but…</p>
<p>…now the green is over, and we're back to the default color for
this page.</p>

Although the effect of this example could be achieved as easily with the <font color> tag (see Hour 6, "Text Formatting and Font Control" ), many style specifications have no corresponding HTML tag. Generally, you should avoid inline styles except when there is no way to do what you're after in HTML and you feel that using an external style sheet would be too cumbersome.

CAUTION

In all the Web browsers released so far, style sheet formatting tends to work more reliably when a <link /> to a separate style sheet is used instead of inline style attributes. The most important example of this is the margin: property, which both Netscape Navigator 4 and Microsoft Internet Explorer 4 seem to have trouble interpreting properly as an inline style.

Note

To give the pages at the 24-Hour HTML Café a consistent look and feel, I created a style sheet that is linked to every page in the site. For your edification and convenience, I copied that style sheet text into an HTML page, which you can access from http://24hourHTMLcafe.com/hour16.

Here's a little trick to notice in the htmlcafe.css style sheet: I gave the <p> tag a style with a left margin of 40 pixels. This means that every <p> tag in the 24-Hour HTML Café pages doesn't just start a new paragraph, but also indents the text 40 pixels. Whenever I don't want indentation, I can leave out the <p> and </p> tags before and after a paragraph or place <p></p> before the paragraph to skip a line without indenting.

Share ThisShare This

Informit Network