The W3C's Style Sheet

Sample HTML Markup:

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 specificiation 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>