|
|
 |
Step 3 Introduction
Try out CSS while you are learning it with the Online HTML Editor
Well, I'm sure you're tired of just being able to set the color of everything, since that's all you've learned about declarations from the past two lessons. In this lesson, we will actually begin learning about declarations. This whole step is devoted to declarations having to do with directly modifing the fonts and text on your site. This includes font size, weight, spacing, etc. This should be a longer section than the previous two, so why don't we just jump into it now...
Font Family
The first declaration we are going to use haa to do with the type of font we use. The font-family declaration tells the computer to use the webpage-specified font on the site if that computer has the "family" on its FONT directory (in Windows). There are two types of fonts: family name and generic family. The family name is the specific font that you want to use on your site. The generic family is the name of a general family you would like to use in case their are no family names that the user has on his computer. Unlike family names, general families are installed on 100% of computers, thus every viewer should at least be able to view the page in a general family font. View the small list of generic families. Family names must always be declared inside quotes while generic families do not. Let's look at the CSS code:
<STYLE TYPE="text/css">
.BIGBIRD { font-family:"Sesame Street", "Kidprint", sans-serif; }
</STYLE>
The snippet starts out with the optimum font "Sesame Street", which few computers probably have. If not, then the browser will display "Kidprint", a more popular font, if the computer has it. If the computer still doesn't have either of those two fonts, then the browser will display a sans-serif font (usually Helvetica). If you did not put sans-serif font at the end and the computer didn't have both previous fonts, then the font would revert to the browser default.
Font Size
The second declaration is the font-size declaration, which tells the computer what size font to use. This can be a relative or specific size. Take at look at the little snippet of CSS code below:
.BIGBIRD {
font-family:"Sesame Street", "Kidprint", sans-serif;
font-size: 24pt;
}
We cleaned up the code a bit by putting each declaration on a seperate line. As you can see, we increased the font size to 24, putting "pt" at the end to show that the font is specific. If we just wanted to double the font size (making it relative to the established norm), we would put in font-size: 200% or font-size: 2.0em. Either way would work, it's up to you to decide your prefence for relative font sizes.
Font Altering
This next section has a lot of tags to go over, so I'm not going to go into much detail with them. You should pretty much know about it's main uses, so I will only explain to you what each declaration is about. Here is a list of font altering declarations. Each option for a declaration is seperated by a "||" symbol:
font-style: italic || oblique;
font-weight: lighter || bold || bolder;
font-variant: small-caps;
text-decoration: none || underline || overline || line-through || blink;
text-transform: capitalize || uppercase || lowercase;
Did that confuse you a little bit? If so, check out the next little table below that tells you what you can basically do with each declaration:
font-style - configures the slant of the text; italic is used most often
font-weight - set the thinkness of the text; bold is used most often
font-variant - changes every small letter to caps. Can be used in place of text-transform.
text-decoration - puts a vertical line or gets rid of a vertical line on text; used commonly to get rid of the underline on hyperlinks.
text-transform - capitalizes the first letter of every word, makes every word capital, or makes every word lowercase.
An Example
Now, we've covered all the declarations under the font styling category, so why don't we add some of them into our little COOKIEM class to see how we can change it around. I'll show you the source code for our new COOKIEM class followed by what it actually looks like:
<STYLE TYPE="text/css">
.COOKIEM {
font-family:"Sesame Street", "Kidprint", sans-serif;
font-size: 24pt;
font-weight: bold;
text-transform: uppercase;
}
</STYLE>
<font class="COOKIEM">Cookie Monster</font>
Cookie Monster
This is the end of step 3. In the next part you will learn
Different ways to put CSS on your site.
Next Step
CSS in 7 Easy Steps (Home)
© 2000 Nicolas Spiegelberg. All rights reserved
|
|
|
