|
July 26, 1998
Add a Little Style
With the Font-property
In Part 1 we looked at the basics of incorporating CSS into an html
file. Part 2 will look at the various font-properties and the proper
use of those properties. Attention will be paid to using
CSS to replace deprecated elements such as FONT and we'll get into some
of the cool stuff, like removing the line under links or adding
a hover property.
Using CSS to specify font information is really cool. You can do
some really neat things with the font-property, and best of all, you
can take your existing html files and without changing the basic
coding, you can add style, giving your whole site a new look!
Say you've got a good site, excellent content, but it's a little boring.
Just a plain serif font, Normal H elements in all the right places,
a few B and EMs thrown in to add emphasis. But boring! Spice it up a
tad with a very basic css file!
Simple Style Sheet
<STYLE TYPE="text/css">
<!--
BODY {color : black;
background : white;
margin : 50px;
}
H1 {font-family : Arial, Helvetica, serif;
font-size : x-large;
font-color : DarkBlue;
background : PaleTurquoise
}
H2 {font-family : Arial, Helvetica, serif;
font-size : large;
font-color : DarkBlue;
background : PaleTurquoise
}
H3 {font-family : Arial, Helvetica, serif;
font-size : medium;
font-color : DarkBlue;
background : PaleTurquoise
}
P, UL {font-family : Arial, Helvetica, sans-serif;
font-size : small;
font-color : black;
background : transparent;
}
B {color : red;
background : transparent;
}
em {color : RoyalBlue;
background : PowderBlue;
font-weight : bold;
}
-->
</STYLE>
Notice the Declaration for the P element has a margin
property. We won't be going into margin properties in part two,
but be aware that you can specify margin indentation without
having to structure everything inside of tables.
Absolutely nothing was added to this page besides the style
sheet in the header. No class or id attributes were added.
The body of the file includes only H, P, B, and EM elements.
Pretty cool, huh? Take a look at the
original file,
sans-style.
Have I got your interest yet? Are you getting excited about the
possibilities of CSS? You'll be amazed at how easy it is to
design with Style Sheets, so we might as well get started.
CSS2 is just coming into it's own, but with the
fast pace of developments on the Web, we'll be moving on to new and
exciting things before you know it.
Contents:
Summary Part One
Putting Style Sheets in Perspective: Table of Contents
Putting Style Sheets in Perspective:font-family
|
