Inline style sheets use the
SPAN tag within the BODY of an HTML page to add style to selected text.
<span>Here is some text.</span>
SPAN requires one attribute:
STYLE attribute of the
SPAN tag will be set to some number of properties which would then apply to that one
<p>Here is <span style="font-size:24pt; color:#FF0000;">some text.</span></p>
Here is some text.
<p>Here is <span style="font-size:36pt; color:#660066; font-family:'Arial', 'Helvetica', sans-serif;">some more text.</span></p>/p>
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.
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>
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!
Copyright © 2001 Michael Masumoto. All Rights Reserved.