Cascading Style Sheets

Cascading Style Sheets (CSS) are an easy way to manage a coherent design theme among a set of pages.

There are three types of style sheets: inline, document level, and external. An inline style sheet is a specification of a style within a specific tag. This is relatively tedious and less useful than the other types. Document level style sheets are specified in the header of the document and external style sheets are specified in a separate file. Since the syntax is the same for these two types of style sheets, we will discuss them together.

Style rules take the following form:
tag-selector {property1:value1; property2: value1 value2}

The tag-selector is just the name of the tag for which you are setting the stye. Inside the curly braces are sets of property-value pairs. Each pair is separated by semicolons. Each property needs at least one value, but can have more. Each tag selector needs at least one property-value pair but can have more. Here is an actual example:

h1 {text-align:center; color: red}

What this says is that every h1 tag should be aligned to the center and should be colored red. By specifying this in the style tag, it means instead of needing to surround <center><font color:red></font></center> around each h1 tag, we just simply put in a regular h1 tag and the style sheet automatically aligns and colors it.

You can also make contextual styles. For example, we may want an <li> tag to be numbered in capital letters in the first level of an ordered list, and to have <li> tags be in lower case letters if they are a sub list. To do that, we list the nesting of the tags:

OL LI {list-style: upper-alpha}
OL OL LI {list-style: lower-alpha}

You can have any nesting of tags listed in order as above to create a contextual style.

The next level of style sheets is to create classes. The purpose of classes is to define several different sets of styles to use in different situations. For example, if you are writing a paper online, you may want to have a different set of styles for the abstract, and another for equations. To do that, we list the tag name, a dot, and then the class name. The class name can be any arbitrary name you want to give it. For example:

P.abstract {font-style:italic; margin-left: 100px; margin-right: 100px}
P.equation {font-family: Symbol; text-align:center}

The above code means that a paragraph tag with the class abstract should be in italics with a 100 pixel left and right indent. A P tag with the equation class should have the symbol font and aligned in the center. To use one of these classes, you employ the class attribute and set it equal to the clas you want to use.

You can also make a generic class that is not attached to a specific tag. The classes we defined above are only usable with the paragraph tag. We may want to create a class that makes text italic and red, but use it in any tag we like. To do that, you use the same syntax as above, but you leave the tag name off and start with the dot:

.italicred {font-style:italic; color:red}

Then you can use it in any tag just like above:

Finally, there are five pseudoclasses. These pseudo classes let you define styles for specific states of certain tags. There are five pseudoclasses - they are predefined and you cannot create your own. Three of them are attached to the a tag - link, active, and visited which relate to an unvisited link, an active link, and a visited link respectively. The other two are attached to the P tag and specify styles for the first-line and first-letter. To define a style for a pseudoclass, you use the same syntax as for a regular class, but you use a colon instead of a dot:

a:visited {color:red; font-weight:bold}

So far, I have been listing all sorts of properties above: font-weight, color, font-style, font-family, margin-right, etc. There are 53 properties, but many of them are browser specific. There is a wonderful section in the book - Appendix C - that lists each of the properties, which browsers support them, and what they do. You can use any property with any tag. There are five types of values that these properties take.

1. Color Values - some properties require colors as values. Color is one property. You can use hexidecimal values like we learned before. You can also specify decimal values in red-green-blue like this:

   rgb(255,255,255)
   rgb(100%,50%,25%)

   You can use values 0-255 or percentages from 0 to 100. the three values in the () are red, green, and blue respectively.

2. Length or Size - you can specify size or length in inches(in), cm, mm, or pixels (px). There are some other specifications, but they are not all recognized. Examples are 100px, 1.5cm, 1in, etc.
3. URL's - you can use a url with some properties. It is expressed as
   url(http://yahoo.com)

   You can use alternate services (instead of http you can use ftp, telnet, etc).

4. Percentages - percentages can be used to express values like this:

   line-height: 120%

5. Keyword values - there are also keywords that can be used. These are listed in the book. Some examples are underline, line-through, bold, bolder, etc.

The differnet types

• Inline - to use an inline style sheet, do not have to use the format above. Instead, you add the style attribute in the tag. With CSS Inline styles, you definitely need quotes. The structure for an inline style sheet is as follows:
  <name style="property1:value1; property2: value1 value2">
• Document level - To include a style sheet in your document, you use the style tag in the header of your document: <HTML> <HEAD> <STYLE type="css/text"> </STYLE> </HEAD> The type attribute in the style tag indicates what type of style sheet you will use. Aside from CSS, there are also javascript style sheets. We will focus on CSS in this class. Inside the style tag, you list the style rule.

• External Style Sheets - to make an external style sheet, you list your style rules in a separate file named something.css. To load them into your HTML document, you can use the link tag.
  <link rel=stylesheet type=text/css href=something.css> The rel attribute tells the browser that the item you are importing is a style sheet. The type attribute works the same as it does in the document level style sheets. And finally, the href tag lists the URL of the stylesheet.