| |
|
|
Stylesheets Tutorial
Part 3 - Inline Styles, Classes & Font Effects
Introduction
In the last part I showed you how to make hyperlink mouseovers and how to use linked and whole page stylesheets. In this part I will show you how to just apply your styles to one part of the text and how to format fonts using stylesheets.
Inline Styles
Inline styles are added into an HTML tag so that you can just change the content of that tag. Apart from that, they are used exactly the same as a normal stylesheet. To include one in your H1 tag for example:
<H1 STYLE="stylesheet information">Text</H1>
The stylesheet information included is the same as what you would put inside the { } of a standard stylesheet.
Classes
Another way of making different styles for different parts of your text is to use classes. These allow you to, for instance, have three different types of <p> tag stylesheet changes on your site. To do this you give each one a class. This is basically a word which corresponds to a change. For example you could have two classes called 'maintext' and 'footnote' for your <p> tag with different formatting information.
In your stylesheet you would have:
P.maintext (stylesheet information}
P.footnote {stylesheet information}
Then in your HTML you would have the following:
<p class="maintext">All the information</p>
<p class="footnote>All the information</p>
in your HTML to use the different styles.
Other Font Formatting Options
Here are some of the other things you can do to your font's using stylesheets and the code they require. All of these should be placed inside the { } of your stylesheet or in inline styles. If you use more than one you should separate each with a semicolon:
font-family: fontname, "font name", font;
This sets the font the text will be displayed in. If the font has more than 1 word in the title use quotes. Each font should be separated with a comma.
font-size: 16pt;
This is the font size and can be specified using standard point sizes using pt after it or with one of the following:
px - pixels
in - inches
cm - centimeters
mm - millimeters
font-style: italic;
This either makes fonts italic or normal (by changing italic to normal above)
font-weight: bold;
This makes text bold or normal (as above). You can also use numbers to represent how bold the text is from 100-900.
text-decoration: underline;
As well as putting an underline on your text this can put an overline (a line over the text) and strike through (using line-through). To take all lines away use underline.
Part 4
In part 4 I will show you some of the other things you can do with Stylesheets.
©
1999 - 2001 David Gowans
| |
