Videos

• The CSS Zen Garden - for some starting inspiration
• Inline Style Sheets
• Document level and external style sheets
• Using CSS Templates

Examples from Videos

• Inline and external CSS examples
• mystyle.css, our external style sheet
• The green CSS template we used

Links

• A simple CSS Reference
• W3 Schools CSS Tutorial
• Page Structure with DIVs - I didn't go through this in the videos, but this tutorial is worth doing to learn how to format your pages in the modern way.
• CSS Zen Garden Examples
  • Main page
  • Movies
  • Killer Style

Notes

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. Document level style sheets are specified in the header of the document and external style sheets are specified in a separate file.

to use an inline style sheet, you add the style attribute in the tag. The structure for an inline style sheet is as follows:

<name style="property1:value1; property2: value1 value2">

Document-level and external of style sheets use the same structure, which is different from inline styles.

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

The tag-selector is generally 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 document-level or external style sheet, 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 a set 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.

<p class=abstract>

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:

<h1 class=italicred>This is italic red</h1>
 
 or
 
 <B class=italicred>This is bold, italic, and red</b>
 

Finally, there are pre-defined pseudoclasses. These pseudo classes let you define styles for specific states of certain tags. These are all predefined and you cannot create your own. Three of them are attached to the a tag - link, active, visited, and hover which relate to an unvisited link, an active link, a visited link, and a link where someone is hovering their mouse over it respectively. Two more 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 lots of online references that will show you these different properties, and you will really learn them by experimentation and practice.

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. URLs - you can use a url with some properties. It is expressed as
   url(http://yahoo.com)
   Note the URL is not in quotes, which is typical for CSS.

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. These are values you will learn as you practice.

The different types

• Inline -As mentioned above to use an inline style sheet, you add the style attribute in the tag. 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.