Anatomy of a Style Sheet

The W3C style sheet URL we mention at the beginning of the chapter incorporates style sheets, so it is the perfect example of style sheets in action. We're sure you're about to jump out of your seat to see the HTML and style information behind the page, so here it is.

BODY {

color: #000;

background: #FFF;

margin-left: 7%;

font-family: verdana, helvetica, sans-serif;

}

H1, H2 {

margin-left: -6%;

color: #900;

}

<!-- Adds a 6% margin and color specification to H1 and

H2 display;-->

H3 {

color: #900;

}

<!-- Adds a color specification to H3 display;-->

A:link { color: #900 }

<!-- Adds a color specification to H3 display;-->

A:visited, A:active { color: #009 }

<!-- Adds a color specification to H3 display;-->

.hide {

display: none;

color: white;

}

<!-- Creates a tag called hide that masks any content

it contains-->

SPAN.date {

font-style: italic;

font-size: 0.5em;

}

<!-- Renders date information in italics and font 1/5

a size smaller than standard text -->

SPAN.attribution {

font-weight: bold

}

<!-- Renders attribution information in bold face -->

BLOCKQUOTE {

margin-left: 4em;

margin-right: 4em;

margin-top: 10pt;

margin-bottom: 10pt;

font-style: italic;

}

<!-- Sets margin and font specifics for the BLOCKQUOTE

tag -->

#s1 {

color: #DDD;

font: 100px Impact, sans-serif;

}

<!-- Defines the color and font for style type 1 -->

#p1 {

margin-top: -30px;

text-align: right;

}

<!-- Defines the color and font for paragraph type 1

-->

#s2 {

color: #000;

font: italic 40px Georgia, serif;

}

<!-- Defines the color and font for style type 2 -->

#p2 {

margin-top: -80px;

margin-left: 5%;

}

<!-- Defines the color and font for paragraph type 2

-->

#s3 {

color: #080;

font: 40px Verdana, sans-serif;

}

<!-- Defines the color and font for style type 3 -->

#p3 {

margin-top: 10px;

text-align: center;

}

<!-- Defines the color and font for paragraph type 3

-->

#s4 {

color: #37F;

font: bold 40px Courier New, monospace;

}

<!-- Defines the color and font for style type 4 -->

#p4 {

margin-top: -20px;

text-align: right;

}

<!-- Defines the color and font for paragraph type 4

-->

#s5 {

color: #F73;

font: bold 100px Verdana, sans-serif;

}

<!-- Defines the color and font for style type 5 -->

#p5 {

margin-top: -80px;

text-align: left;

}

<!-- Defines the color and font for paragraph type 5

-->

#s6 {

color: #22A;

font: bold 25px Verdana, sans-serif;

}

<!-- Defines the color and font for style type 6 -->

#p6 {

text-align: center;

margin-top: -30px;

}

<!-- Defines the color and font for paragraph type 6

-->

#s7 {

color: #088;

font: italic 20px Verdana, sans-serif;

}

<!-- Defines the color and font for style type 7 -->

#p7 {

text-align: right;

margin-top: -10px;

}

<!-- Defines the color and font for paragraph type 7

-->

#s8 {

color: #088;

font: italic 20px Verdana, sans-serif;

}

<!-- Defines the color and font for style type 8-->

#p8 {

margin-top: -10px;

margin-left: 3%;

}

<!-- Defines the color and font for paragraph type 8

-->

#s9 {

color: #000;

font: 20px Georgia, serif;

}

<!-- Defines the color and font for style type 9-->

#p9 {

margin-top: -10px;

margin-left: 30%;

}

<!-- Defines the color and font for paragraph type 9

-->

#s10 {

color: #900;

font: bold 10pt Georgia, serif;

}

<!-- Defines the color and font for style type 10-->

#p10 {

text-align: right;

margin-top: -10px;

}

<!-- Defines the color and font for paragraph type 10

-->

#s11 {

color: #990;

font: italic 20px Georgia, serif;

}

<!-- Defines the color and font for style type 11-->

#p11 {

margin-top: 0px;

margin-left: 20%;

}

<!-- Defines the color and font for paragraph type 11

-->

--></STYLE>

<TITLE>Web Style Sheets</TITLE>

</HEAD>

<BODY>

<P>

<A HREF="../"><IMG BORDER="0" ALT="W3C" SRC="../Icons/WWW/w3c_home.gif"></A>

<H1>Web Style Sheets</H1>

<P CLASS=hide>(This page uses CSS style sheets)

<P ID=p1><A HREF="#new"><SPAN ID=s1>What's new?

</SPAN></A>

<P ID=p2><A HREF="#what"><SPAN ID=s2>What are style

sheets?</SPAN></A>

<P ID=p3><A HREF="#press"><SPAN ID=s3>Press clippings

</SPAN></A>

<P ID=p4><A HREF="#software"><SPAN ID=s4>Styled software

</SPAN></A>

<P ID=p5><A HREF="#css"><SPAN ID=s5>CSS</SPAN></A>

<P ID=p6><A HREF="#dsssl"><SPAN ID=s6>DSSSL</SPAN></A>

<P ID=p7><A HREF="#jass"><SPAN ID=s7>JASS, dynamic HTML,

dynamic style sheets?</SPAN></A>

<P ID=p8><A HREF="http://www.microsoft.com/truetype/css
/gallery/cssinf7.htm"><SPAN ID=s8>Sites</SPAN></A>

<P ID=p9><A HREF="#history"><SPAN ID=s9>History</SPAN>

</A>

<P ID=p10><A HREF="#other"><SPAN ID=s10>

Other approaches</SPAN></A></P>

This style information adds some new parameters to existing tags and creates 11 new text and paragraph styles that specify font and margin information. The syntax and terminology are not that difficult, but the intricacies of external versus internal style sheets can be a challenge. Also, you have more than one way to skin the proverbial style cat. You can also use the <STYLE> tag or the STYLE attribute. See what we mean by complicated?


Previous Section | Next Section | For HTML, Style Is Its Own Reward! | Extras TOC


E-Mail: HTML for Dummies at html4dum@lanw.com

URL: http://www.lanw.com/html4dum/h4d3e/extras/ch11sec4.htm 
Text - Copyright © 1995, 1996, 1997 Ed Tittel & Stephen N. James. 
For Dummies, the Dummies Man logo and Dummies Press are trademarks or registered trademarks of Wiley Publishing, Inc. Used with Permission.
Web Layout - Copyright © 1997, LANWrights
Revised -- May, 2002 [MCB]