[Monny]

[h1]CSS Classes, Font Customization and Text Decoration[/h1]
This tutorial is for CSS or Cascading Style Sheets.  Cascading style sheets can make things a lot easier and take a lot less time if you know what you're

doing.  In each of these tutorials,1-2 topics will be discussed.

This tutorial assumes you've already read the previous tutorial(s).

1.   CSS Classes
If I were to just put

Code:

<p>text</p>

in an HTML document, it'd just put some text on the page adjusted to the user's browser settings.  However, if

I inserted a style sheet into the HTML document, it would look different.

Let's say that in my style sheet, I had the text

Code:

p{color:  #FFFFFF
}

p.red{color:  #FF0000
}

In my HTML document, if I were to put just <p>text</p>, you couldn't see the text!  Why?  Becuase the background is white!

If I put

Code:

<p class="red">text</p>

What color would the font be?

RED!

You can do this with pretty much any HTML tag out there.

To the contrary, if you want every paragraph to be red, you can just do the following:

Code:

p{color:  #FF0000
}

This eliminates the need to define what class of the paragraph tag you're using in the HTML document.

2.   Font Customization

In an HTML document, when you're not using CSS, you usually have to use the <font> tags and put in all of how you want the text in between the tags to look. 

However, if you choose to use CSS, the process is much simpler and requires much less time and typing.

There are several font elements in using CSS, only a few basic ones I'm going to name.

These include:

• font-family
• font-weight
• font-style
• font-size

2.1 Font-family
   If you do not declare what font a selected text should be within the CSS or HTML documents, the browser will use the user's defaults and make the font

whatever it is set to be viewed as (commonly Times New Roman).  This is why this little customization is useful.

[When setting using fonts in an HTML document, I prefer to use the <span> tags, but you can change it to whatever you want (<td>, <p>, etc).]

Let's say I want to have a text in Verdana appear in the middle of a sentence that's Arial.  I would put in the following for the style sheet:

Code:

span.verdana{font-family:  verdana
}
span.arial{font-family:  arial
}

In the HTML document, I'd put

Code:

<span class="arial">This is a</span><span class="verdana"> sentence</span><span class="arial> that is customized with

CSS</span>

UPDATE**:  Comic Sans does, in fact, work.  Instead of just putting Comic Sans, put "Comic Sans MS". Case doesn't matter.
(Many thanks goes to Graham of Graham and Amy.com for this correction!)

2.2 Font-weight
  When you declare the font-weight of a selected text in a style sheet, all you're basically doing is declaring how bold or skinny the font is.

There are 4 basic font-weights that you can use.

• lighter
• normal
• bold
• bolder

Of course, if you're not going to adjust the font-weight of a selected text, you don't need to declare that the font-weight is normal.  Putting it so would

be pretty redundant.

You can declare the font-weight of text just like you did the font-family.

CSS:

Code:

span.bold{font-weight: bold
}
span.lighter{font-weight: lighter
}
span.bolder{font-weight: bolder
}

HTML:

Code:

<span class="lighter">lighter</span><br /><span class="bold">bold</span><br /><span class="bolder">bolder</span>

2.3 Font-style
  When using the font-style declarations, you're instructing your browser whether or not to italicize the text (in its most basic definition).  There are 3

levels associated with this CSS declaration:

• normal
• italic
• oblique (same thing as italic)

2.4 Font-size
  Font-size follows the rules of word-processing programs.  But CSS also has its own sizes.  It's not a good idea to use these becuase the sizes vary between

different browsers.

• xx-small
• x-small
• small
• medium (normal)
• large
• x-large
• xx-large

However, it's a better idea to delcare the size of a selected text differently.  Like so:

Code:

span.small{font-size:  8pt
}

Instead of using one of worded sizes, you should most likely go with actual numbers.  This way, it doesn't vary as much between browsers.

3.  Text Decoration
  There are 5 main text-decorations you can use with CSS.

• underline - underlines the text
• overline - puts a line over the text
• none - no decoration on selected text
• line-through - puts a line through the text
• blink - blinks the text on and off

You declare them in this way:

Code:

span.text{
text-decoration:  underline;
text-decoration:  overline;
text-decoration:  linethough;
text-decoration:  none;
text-decoration:  blink
}

=========

**A word about colors and CSS font declarations:

For colors, you can just put RED or BLUE instead of #FF0000 or #0000FF.  This works for a lot of other colors as wel (purple, yellow, dark blue, light blue,

dark red, etc)l.  But if you're not comfortable using those, you can also imput RGB values by doing the following:

Code:

span.rgb{
//This would result in blue text.
color:  rgb(0,0,255)
}

For other font declarations, if you're going to be making more than one for a specific tag class, you must follow each line with a semi-colon ( ; ), except for

the very last one.  For example:

Code:

tag.class{
line1;
line2;
line3;
line4
}

They must be surrounded by brackets ({ }) to work.  If you're not careful, a whole block of code can be ignored if you don't put in an ending bracket.

==========

Next tutorial:  Hyperlinks and Backgrounds

 

If you like this tutorial, please Click Here to register.

[SKETCHi]

Great tutorial. I didn't even know about the blinking text thing. However you did forget to mention the use of 3 character hex color codes.

[Jonnay]

The Blinking text only works in Netscape I think

[Sunset.]

You forgot Marquee or whatever. The blink works in firefox too but it's realy annoying.

[Reaperrip]

sweet