Module 10 - Page 17 - Inline Style Sheets

Inline Style Sheets

Inline style sheets use the SPAN tag within the BODY of an HTML page to add style to selected text.

Example (abbreviated):

<span>Here is some text.</span>

SPAN requires one attribute: STYLE. The STYLE attribute of the SPAN tag will be set to some number of properties which would then apply to that one SPAN tag.

Example:

<p>Here is <span style="font-size:24pt; color:#FF0000;">some text.</span></p>

Displayed:

Here is some text.

Example:

Displayed:

Here is some more text.

In the above example, you will notice that I have placed the quoted font names for font-family in SINGLE-quotes rather than double-quotes. Since you can NOT put extra double-quote marks inside an attribute value in HTML, you must substitute single-quote marks.

As you can see, inline style sheets do NOT redefine tags; they merely mark text in HTML using the SPAN tag. Again, inline style sheets override both embedded style sheets and linked style sheets applying to the same HTML page.

The STYLE attribute may ALSO be added to ordinary HTML tags, as in the following example:

<p style="font-size:36pt;">Here is some more text.</p>

Displayed:

Here is some text.

As a general rule, I do NOT recommend adding the STYLE attribute to regular HTML tags. This sort of inline style does NOT behave predictably when in conflict with linked or embedded style sheets. Only the SPAN tag makes reliable inline style sheets!

Inline styles are useful only under very specialized circumstances, such as when you don't have access to putting tags in the HEAD of an HTML page. Inline styles can become burdensome very rapidly if you want to change the appearance of your HTML page, since you have to go back in and change every SPAN tag separately. In general, use only linked or embedded style sheets when applying CSS to HTML pages!

Main Menu