The code for
this page is below
<HTML>
<HEAD>
<TITLE>Cascading Style Sheets - Sample Page</TITLE>
<STYLE TYPE="text/css">
<!-- /* $WEFT -- Created by: Maggy (maggy@shaw.ca) on 6/25/2004 -- */
@font-face {
font-family: Book Antiqua;
font-style: oblique;
font-weight: 700;
src: url(BOOKANT1.eot);
}
@font-face {
font-family: Book Antiqua;
font-style: normal;
font-weight: normal;
src: url(BOOKANT0.eot);
}
-->
H1 {text-align: center; color: blue; font-family: Book Antiqua; font-size:
40px; font-style: oblique}
H2 {text-align: right; color: red; font-family: Book Antiqua; font-size:
30px; font-style: oblique}
P {text-align: left; color: teal; font-family: Book Antiqua; font-size:
20px; line-height: 26pt; font-style: oblique}
A:link {color: blue; text-decoration: none}
A:visited {color:purple; text-decoration: overline}
A:active {color: teal: text-decoration: underline}
A:hover {color: fuchsia; text-decoration: underline}
</STYLE>
<BODY>
<H1>Cascading Style Sheets - Sample Page</H1>
<H2>This line is header 2 aligned to the right</H2>
<P>This page has been created to show how CSS works within a web page.
The Title of the page has been centere</font>d with blue text and the font
is
Book Antiqua size 40px with the oblique attribute added.
The second line is the heading 2 with red text and Book Antiqua for
the font and size 30px and font weight is bolder with the oblique
attribute added. This paragraph has been formatted using a left alignment,
teal text and size 20px Book Antiqua font with a line height of 26pt and
the
oblique attribute added.</font> If I have done my
homework right you will also see the font I have used even if it is not
installed on your computer.</P>
<P>I am sure you are wondering how I did that, if you read
<a href="css_lesson2.htm">CSS lesson 2</a> you will
see that you can actually embed your font choice into your page using
<a href="http://www.microsoft.com/typography/web/embedding/weft2/">WEFT</a>.
The
two links in this paragraph I have used the a:link, a:visited, a:active
and
a:hover to show how they work also have used the underline, overline and
none
text-decorations.</P>
<P style="background: yellow">This paragraph is using the text background
giving
it the yellow background. This formatting is done using the local style
sheet.
The rest of this page is using the internal style sheet. If the text above
matches this screenshot below I have successfully
worked the CSS code and WEFT. I have added a border to the screenshot
below so it
will stand out from the rest of the page.</P>
<p style="text-align: center">
<img border="0" src="../images/fontfamily.jpg" width="353"
height="227"></p>
</BODY>
</HTML>
