HTML and CSS Reference
In-Depth Information
Although using inline styles seems to be an easy route to using CSS, it does have a
number of drawbacks. The largest problem is that inline rules are bound very closely to a tag.
If you want to affect more than one
<h1>
tag, you have to copy and paste the
style
attribute
into every other heading of interest. The separation of markup from CSS presentation is not
optimal with an inline style. However, for quick and dirty application of CSS rules, this might
be appropriate, particularly for testing things out.
The second and lesser-known concern with inline CSS rules is that you simply cannot
perform every task with them. For example, if you want to change the look of various link
states, this is easily accomplished in a document-wide or linked style sheet with pseudo-class
rules like
a:link {color: blue; text-decoration: none;}
a:visited {color: red; text-decoration: none;}
a:hover {color: red; text-decoration: underline;}
a:active {color: red; text-decoration: none;}
However, if you attempt to put such rules in an
<a>
tag, how are other states indicated? The
simple example here would appear to set the color to blue for any state:
<a href="http://www.w3.org" style="color: blue;">
Inline Link Styles?
</a>
Similarly, in order to change the first letter of a paragraph to large, red text, you might
use a pseudo-element rule like
p:first-letter {color: red; font-size: xx-large;}
However, when you attempt to do this inline, you are forced to introduce an element to
hold the first letter:
<p><span style="color: red; font-size: xx-large;">
T
</span>
his is a test.
</p>
While these examples indicate why these selectors were given the names
pseudo-class
and
pseudo-element
, they don't really show us how to use such inline styles.
It turns out that a working draft specification for addressing this issue was explored in
2002
2
. The idea was to include style blocks without a selector for the default style and for
the various other selectors for the element, state rules directly within the
style
attribute.
For example, to set the link states, we would use:
<a href="http://www.w3.org/"
style="{text-decoration: none;}
:link {color: blue;}
:visited {color: red;}
:hover {color: red; text-decoration: underline;}
:active {color: red;}">
Inline Link Styles?
</a>
To set the first letter on paragraphs, we would use:
<p style="{text-indent: 1em;
text-align: justify;
line-height: 150%;}
2
www.w3.org/TR/css-style-attr
