HTML and CSS Reference
In-Depth Information
You've already seen how styles can modify the appearance of various elements. Any of
the effects associated with the tags introduced in this lesson can also be created using
CSS. Before I go into these properties, however, I want to talk a bit about how to use
them. As I've said before, the
style
attribute can be used with most tags. However, most
tags somehow affect the appearance of the text that they enclose. There's a tag that does-
n't have any inherent effect on the text that it's wrapped around: the
<span>
tag. It exists
solely to be associated with style sheets. It's used exactly like any of the other tags
you've seen in this lesson. Simply wrap it around some text, like this:
<p>
This is an example of the
<span>
usage of the span tag
</span>
.
</p>
Used by itself, the
<span>
tag has absolutely no effect. Paired with the
style
attribute, it
can take the place of any of the tags you've seen in this lesson and can do a lot more
than that, as well.
The Text Decoration Property
The
text-decoration
property is used to specify which, if any, decoration will be
applied to the text within the affected tag. The valid values for this property are
underline
,
overline
,
line-through
, and
blink
. The application of each of them is
self-explanatory. However, here's an example that demonstrates how to use each of them:
<
p
>Here is some <
span style
=
'text-decoration: underline”
>underlined
text<
/span
>.<
/p
>
<
p
>Here is some <
span style
=
”text-decoration: overline”
>overlined
text</span>.<
/p
>
<
p
>Here is some <
span style
=
”text-decoration: line-through”
>line-through
text<
/span
>.<
/p
>
<
p
>Here is some <
span style
=
”text-decoration: blink”
>blinking text<
/span
>.<
/p
>
The cool thing is that you can use this, and all the properties you'll see in this lesson,
with any tag that contains text. Take a look at this example:
<
h1 style
=
”text-decoration: underline”
>An Underlined Heading<
/h1
>
Using the
style
attribute, you can specify how the text of the heading appears. Choosing
between this approach and the
<u>
tag is a wash—if you want to remove the underlining
from the heading, you have to come back and edit the tag itself, regardless of whether
you used the
<u>
tag or style attribute. Later, you'll see how to use style sheets to control
the appearance of many elements simultaneously.
7
