CSS

Cascading Style Sheets

What are Cascading Style Sheets?
Cascading Style Sheets, or CSS, allow you add different properties to existing HTML tags. Although most tags allow you to add attributes to them to give them certain characteristics, with style sheets you have the capability to add several attributes that are not available with normal HTML. A few advantages of styles are that you don't have to add extra attributes (i.e., color="red") to individual tags, instead, you can define a style for that tag to achieve that attribute every time that tag is used. Also, styles are easy to edit and change; instead of finding and editing each occurance of a tag, you may change the style that was defined for that tag and all occurances of the tag in the web page will be changed.

Structure of a Style
Styles work similarly to normal HTML tags. They include a tag name and one or more definitions. Just as attributes change the way that a tag works, a style definition does the same thing. Styles have this basic structure:

tag {property: value}
example:
P {font-size: 14pt; color: blue}

Notice the curly brackets that surround the syle. You can add additional definitions to a style by separating them with semicolons. In the example above, the first definition with its accompanying value (font-size: 14pt) tells the browser to display all text within a paragraph in the web page in 14 point font. The second definition (color: blue) will make all paragraphs displayed the color blue. Adding spaces within the style is optional. The style must be surrounded with curly brackets. Each definition must be separated with a semicolon.

Applying Styles
There are three ways to apply styles to a web page: internally, externally, and locally.

An internal style sheet is used to apply styles to an entire HTML document. To apply styles internally, you add a STYLE tag to the head section of your HTML document. Within the STYLE tag, you add style definitions in the following manner.

The above will cause all paragraphs of your web page (if began with a <P> tag) to be displayed in blue, 14 point font and all first degree headings to be displayed red. The actual styles are usually commented out (<!-->) to keep them from displaying in the webpage when viewed with browsers that don't recognize style sheets. Most browser do recognize CSS, so it is not required to comment out the styles. To display an element with these styles, just enter the tags exactly as you normally would and the browser will apply the styles specified in the STYLE tag.

An external style sheet allows you to use the same style definitions in several web pages simultaneously. They are excellent for giving several pages a common look. Each of the pages that you want to be effected by the style sheet will make a reference to an external style sheet document. To create an external style sheet, first create a new text document. You can use any text editor, such as Notepad. Then, begin entering tag names and definitions as you would within an internal style sheet.

P {font-size: 14pt; color: blue}
H1 {color: red}

You do not use a STYLE tag. You may add as many tags and definitions as you choose. You must save the document as a text-only document with the extension .css. To apply the styles from this style sheet document, add the following to the HEAD section of the page you wish to format.

The URL of the location of the style sheet should replace "url.css". Being able to make changes to one external style sheet and affect several pages is the major advantage of using external style sheets.

To apply a local style sheet, you add the STYLE attribute to any tag you want to add a style to.

When styles are applied locally, they only affect the individual tag to which the STYLE attribute is added. Also, the definitions are not surrounded with curly brackets as they are in internal and external styles.

You can use external, internal, and local styles in the same document. Local styles will override internal styles, and internal styles will override external styles.

HTML Classes and IDs
Individual tags can also be categorized into classes. By using classes, you can have one style applied to an occurance of a tag and a different style applied to another occurance of that same tag. For instance, you can have all opening paragraphs be in one style and all other paragraphs be in another style by creating a class of the paragraph tag. To add a style class to a tag, add the style in the following manner:

tagname.classname {property:value}

The only difference when adding a class is to add a period to the tag name followed by the name of the class, which can be anything you choose.

<STYLE>
P.intro {font-size: 14pt;
         color: red}
P       {font-size: 12pt}
</STYLE>

The above example would add a class named intro to the paragraph tag. Notice how the definitions are indented. This is not required, but can aid in editing. To use this class in your web page, you would add the CLASS="intro" attribute to any paragraph tag you want to apply the intro class of style to.

<P CLASS="intro">Intro. paragraph.
<P>Normal paragraph.

would display the intro paragraph in 14 point, red font and the normal paragraph in 12 point font. It does not make sense to add a class to a local style sheet. Classes allow you to use style sheets, yet still have the flexibility of applying different styles to elements of your page that use the same tag name.

Using IDs is very similar to classes. ID's are added to the style sheet in the same way as classes, except replace the period with a # like this:
P#intro {font-size: 14pt}

You call a style ID from within the HTML document by adding the ID attribute to the tag you want to apply the ID style to, in this manner:
<P ID="intro">

DIV and SPAN
DIV and SPAN are HTML tags that, when coupled with styles, allow you to add styles to entire sections of your page, without using a style associated with an existing tag. For instance, if you want to apply a style to the first three paragraphs of your web page, you do not have to add a style to each of the three paragraphs. Instead, you could surround the three paragraphs with a DIV or SPAN tag and apply the style to it. By themselves, DIV and SPAN tags really don't do anything, but when you add a style class or ID to them, they become very powerful. DIV is primarilly used for larger sections, while SPAN is used for no more than a few words at a time.

If you wanted the first three paragraphs of your web page to be green, you could add the following to your STYLE sheet, whether it be internal or external -

.begin {text-color: green}

Notice how there is no tag name specified. Every time this class (begin) is referenced, the definitions will apply. To make the paragraphs green, just surround them entirely with a <DIV CLASS="begin"> tag. Be sure to close the </DIV> tag after the end of the third paragraph. Instead of applying a style to each of the three paragraphs, you apply a style to the entire section using one tag. SPAN works exactly the same way, except it is used on short sections, no longer than a few words. You could also use ID's with both DIV and SPAN to get the same effect. In this document, I have used the SPAN tag associated with an internal style sheet to make all of the section headings 14 point font, bold, and blue.

Using Styles in Text
Using normal HTML, you can make numerous formatting changes to text in your webpage. You can use the FONT tag and numerous others to change the font to look just about the way you want to. However, using normal HTML requires a lot of tags and programming to get the results you need. With CSS, you can apply numerous formatting changes to font with the use of one tag. In fact, the newest HTML specifications call for programmers to stop using the FONT tag and many others that format text in favor of styles. Don't worry, your FONT tags are still going to work for a while, but the WWW consortium is doing its best to get programmers converted to styles, and for good reason - they're easier, much faster, and more powerful for text formatting. All of the following formatting styles can be done locally, internally, or externally.

Normal Font
First of all, if you are want your text to display in the default font, weight, and color add the following style definition.

{font-style: normal}

Font Family
Instead of using the FONT FACE tag and attribute for every paragraph or heading in your web page, you can do the same thing with the font-family definition in your style sheet.

P {font-family: "Comic Sans MS", "Helvetica", "Arial"}

This style will affect all paragraph tags. Similarly to the FACE attribute of the FONT tag, you can specify more than one font option in the font-family style. The first font listed should be your first choice. If the first font is not loaded on the viewers computer, the second option will be used, and so on. Be sure to surround the font names with quotation marks and separate font names with commas. It is always wise to specify at least two font options, and at least one of the ones specified should be a commonly used font. If none of the font names are found on the visitors computer, then the style will be ignored and the text displayed in the default font. You can also add any of the following generic font names to tell the browser which general category of font to display - serif, sans-serif, cursive, fantasy, or monospace. Remember that you can add the font-family definition to heading tags as well. It is vital that you remember that these fonts are determined by the viewers computer, so fonts may look quite different on your computer compared to others.

Italics
{font-style: italic}
OR
{font-style: oblique}

The difference between italic and oblique is that italic will call the italicized version of the font, which is usually included in the font file. The oblique version tells the browser to slant the normal font so that it looks italicized. It is best to use the italic value. If there is no italic version of the font available, the browser will automatically make the text oblique.

Bold

{font-weight: bold}
{font-weight: bolder}
{font-weight: lighter}
{font-wieght: 700}

Each of the previous are ways you can add bold text to your document. The bold value will bold the text normally. Bolder will make the text bolder relative to the current weight. Lighter will make the weight lighter relative to the current weight. The value can also be a multiple of 100 between 100 and 900. 700 would be normal bold weight and 400 would be normal, default weight, and 900 is quite bold. You can remove bold from the B and H1 tags by adding a font-weight style with a value of lighter or 400 or below.

Font Size
{font-size: 12pt}

Specifying an exact point size is probably the easiest way to change the font size. The pt value can be from 2 to several hundred. The default font is usually 12 point. You can also specify a pixel size:
{font-size: 24px}
There are about 72 pixels per inch.
You can also make the value one of the following: xx-small, x-small, small, medium, large, x-large, or xx-large.
You could also make the value relative to the current or default size with larger, smaller, or any percentage value (200%). 200% would be twice as big as the current size, or if there isn't a currect size specified, it would be twice as big as the default size. You can see that styles give you much more control over the size of your font than normal HTML with its 6 degrees of heading sizes and 7 font sizes. With styles, the possibilities are nearly endless.

Leading

Leading, or line height, is the amount of space between lines of text.
{line-height: 2}
{line-height: 150%}
{line-height: 18pt}
{line-height: 20px}

These are all possibilities to change the leading. A number value will be multiplied by the current font size. A value of 2 will make the space between lines twice as high as the font is. Percentage values are a percentage of the currect font size. Point and pixel values specifically specify the leading or line heigth. This paragraph is set to 18pt line-height.

Text Color
{color: red}
{color: #FF0000}
{color: rgb(255, 0, 0)}
{color: rgb(100%, 0%, 0%)}

Each of the previous will make the font color red. You can specify the color value to be one of the predefined color names found here or a hexadecimal RGB value preceded by the pound sign. The last two values specify either a number value (from 0 to 255) or a percentage value for each of the three basic colors - red, green, and blue. Your browser will process color names and RGB values faster than number or percentage values.

Text Background
{background: red}
{background: #FF0000}
{background: transparent}
{background: url(jared.gif)}

You can add a background to individual elements on you page, such as heading, paragraphs, etc. The value can be one of the color names or an RGB value, preceded with a pound sign. If you set the value to transparent, the text background will be transparent. You can also add a graphic as an element background by specifying the URL of the image you want. You can also add the following values to further format the background image. Be sure to separate values with commas.
repeat - tiles the image
repeat-x - tiles the image horizontally
repeat-y - tiles the image vertically
no-repeat - will not tile the image
fixed - the background image will not scroll with the window
scroll - the image will scroll with the window
x y - where x and y are percentage or absolute distances from the upper left corner where you want the image to be displayed. You can also add top, center, or bottom for x and left, center, or right for y.

Word and Letter Spacing and Indenting
{word-spacing: 10pt}
{letter-spacing: 3pt}
{text-indent: 20px}

You have probably learned that spacing and indenting are some of the hardest things to achieve using HTML. With styles, they are very easy. Each of the values for the above styles can be in point values or pixel values. This paragraph has the above styles applied. Text-indent can also be a negative number, but would probably look weird that way. Netscape 4.x does not recognize word and letter spacing.

Text Alignment
{text-align: center}

Text-align controls the way an element is always aligned. It's values can be left, right, center, or justify. Justify will stretch the text across the page to both margins. Word and letter spacing are affected if you justify the text. Notice that in this paragraph each of the lines starts at the left margin and the words are stretched out so that the text at the right margin is flush with the right margin - this is how justify works. It has no effect on the last line, because it doesn't reach the right margin.

Underlining
{text-decoration: underline}
{text-decoration: overline}
{text-decoration: line-through}

You can easily add underlining with the text-decoration style. Overline places a line above the text. Line-through places a line through the text, the same as the STRIKE tag. You can set the value to none to remove underlining. You can also make text blink by making the value blink. Internet Explorer does not recognize the blink value, stemming from its deep-rooted battle with Netscape over their addition of the BLINK tag to HTML.

Text Case

{text-transform: capitalize}
{text-transform: uppercase}
{text-transform: lowercase}

This style affects the case of the text in the element. Capitalize will change the first character of each word to uppercase.

Combining Styles

You can combine as many styles as you choose for individual elements by separating definitions with semicolons. Here is an example of combining styles in an internal style sheet.

<STYLE>
P	{color: red;
	text-indent: 14pt;
	font-family: "Comic Sans MS", "serif";
	font-size: 15pt}

H1	{color: red;
	font-weight: bolder}
</STYLE>

Notice how I placed individual definitions on separate lines. This is not required, but can greatly aid in editing. You can add as many styles as you wish. For greater flexibility, add classes or IDs.

Formatting Links
To add styles to links, you add style definitions to the A tag.

A:link {color: blue; text-decoration: none}
A:visited {color: red; text-decoration: none}
A:hover {color: red; text-decoration: underline}
A:active {color:green; text-decoration: underline}

The most common use of styles for links is to remove the underline from links. Be sure that your visitors can tell what are links and what are not. Hover is the style of the link when the mouse is floating over it. Active is the style when the link is being clicked. The link below has all of the above styles applied to it. Go ahead and try it!

That's all for now!
Back to the Class Homepage.