CSS: Magic

Text: How it works

With CSS, you can do many effects with text. You can make it bold, blink, italics, and space the letters farther apart.

Though, you need to add a little snippet into your HTML file. Here it is:

<style type="text/css">
<!--
-->
</style>

That tells the browser to prepare for some CSS code. Between the <!-- --> is where the CSS code goes. To add CSS code, give a name of the rule you want to apply. The rule always have to start with a period (Ex: .bold). Then assign the rule, within the {} (Ex: .bold { font-weight: bold}). To assign the rule, put it in a tag (Ex: <span class = "bold"> bold </span>). If you didn't know the span tag really does nothing, but it's a very important tag for CSS. Same with DIV, but DIV inserts a line break, unlike span. Note: Only Netscape uses the LAYER tag. The "class" attribute sets the rule into the tag, ready to be used.

Also avalible is the use of customizing your own tag that's already setted by the browser. In this example we'll use the A tag. In most websites you'll notice that some of the links have no underline, but how? Thanks to CSS, that underline is now gone. Add the following to the CSS code: a { text-decoration: none} I'm a link!!!

text-decoration - text decoration has several values it can take

underline - add underline rule
line-through - a line runs through text
overline - opposite of underline
blink - blinking text (I can't seem to get this to work with IE)

font-family - list the font type you want the text to be

if the font name has a space (Ex: Courier New) then you must surround it with quotes (Ex: "Courier New") make a list of fonts (Ex: font1, font2, font3,...), with the first item in the list with the highest priority. A visitor may not have the font, so it'll select the next font avaliable in the list.

font-size - change the size of text (px is the default)

And there are many more to things you can do with text.

So how does it save time? If you look above, my examples are in Courier New, bold, size 10pt. Say my visitors didn't like the size of the font. If I didn't set them up with CSS rules, I'd had to go to each and every one of them and change the font size in each FONT tag. With CSS, I made a rule called ".code" and change the size of the font right there and it's easily done!

Imagine typing the following for the examples above:
<font type = "courier new" size = 10> <b>example</b></font>

That's alot to type, when you can set it up with a SPAN tag and insert the rule:
<span class="code">example</span>