Introduction

One Monday, we began talking about Cascading Style Sheets (CSS) -- one mechanism for controlling how the tags on a web page are drawn by the browser.
The word cascade is used because default values of a CSS property can be overriden if an external stylesheet value for the property exists, which in turn can be overriden if a document level style for the property exists, which can be overriden if an inline style for the property exists.
Inline styles are defined by having a style="property_1:value_1;...property_n:value_n;" attribute on a tag. For example, <p style="color:red;" >.
Document styles are a sequence of style statements within <style> tags in the head of a HTML page.
An external stylesheet is a file associated with a webpage using a <link rel="stylesheet" href="url_of_stylesheet" > (or @import url_of_stylesheet; within <style> tags) containing a sequence of style statements.

We looked at one type of style statement which has the format:

selector {
    property_1:value_1;
    ...
    property_n:value_n;
}

For example,

h1 {
    font-size:20pt; // make the font-size for h1 tags 20pt=20/72inches tall
}

We said paths down a web document tree could be used as selectors. For example, h1 b i as a selector would be any i tag within a b tag within an h1 tag.
Today, we begin by looking at other kinds of selectors.

Class selectors

A class is defined in a style element by putting a period with a name after it:
```
p.normal {prop_list1}
p.narrow {prop_list2}
```
To use we do:
```
<p class="normal">normal look text</p>
```
One can also have generic selectors:
```
.red {color:red}
```

These can be used with multiple tags

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

ID Selectors

In a similar way to class selectors, one can use a "#" to specify an id selector
```
p#sec1 {prop_list2}
```
To use this we do:
```
<p id="sec1">section1 text</p>
```
Although only one id attribute (for instance, sec1) of a given value can appear in a document, such a selector may occur in an external style and thus be applied to id tags with that name in several documents.
For instance, one might specify p#abstract. A typical document has only one abstract but you could use the same style for several documents.

Reset Styles, !important

So far, we have learned that for a given property of a tag, inline style values for that property override document-level style values override external style values override browser defaults.
Because browser defaults used to be somewhat variable, web-designers sometimes use an external stylesheet called a reset stylesheet to set the property values of all the tags to some value they knew (usually 0). They then apply a later stylesheet to achieve the styles they wanted for the particular app.
You can override the cascading-style effect by using !important. For example, color: red !important;, the !important keyword will prevent lower-level stylesheets from changing this value -- you should avoid using this, but in debugging other people's styles you might run into it.

Pseudo Classes

Pseudo selectors allow you to apply styles in the case that certain events happen.
For example, link (unvisited link), visited (visited link), hover and focus.

These might appear in code as:

input:hover {color:red} /* input tag will turn red when mouse over. */
input:focus {color:green} /* when click into 
   input field, it will turn green */

Pseudo selectors also allow you to apply styles if certain conditions are met:

<style">
div:first-child b
{
   color:blue
}
div:before
{
    content:"The following div tag has something to tell you: ";
} 
</style>
<div>
<div>
<b>I'm blue</b>
</div>
<div>
<b>But I'm not</b>
</div>
</div>

Other pseudo-selectors are: :link, :visited, :active, :first-letter, :first-line, :after, :lang(locale-tag), :not(some-class-name)

What values can a property have?

CSS1 supports over 60 properties for tags (the next few slides will discuss these).
First, though, the values one can assign a property can take one of several forms:
Predefined values:

For example, bold, red, disc. These are case insensitive

Signed Number values:

-17, 17em /*1 em =height of letter m */, 17ex, 17mm, 17px, 17cm, 17pt These may or may not have a unit after them.

Percentage values:
75%

URL values:

For example: url(mypic.jpg)

Color values:
These can be predefined as for example the keyword white Or you can specify rgb values in one of two formats:
```
  rgb(0, 0, 0) /*decimal */
  #C8C8C8 /*hex */
```

Color, Fonts, and Text Decoration

Colors

You should remember when specifying colors that they might look different on different machines / monitors. There is a list of 216 so called web-safe colors on Wikipedia.
To specify the foreground color of a tag you can set the color property. For example, div.changed {color: red} <div class="changed"><p>first paragraph that's new</p><p>2nd...</p></div>
To specify the background you use the background-color property

Fonts

There are several properties of fonts that you can control.

font-family (examples: Arial, Times, Courier)
font-size (examples: 20pt, 15px, xx-small, x-small, small, medium, large, smaller, larger, etc)
font-style (example: italic, oblique)
font-weight (example: bold, bolder)

Text-Decoration

The text-decoration property can be further used to control how text looks. Some values are line-through, overline, underline, and none.

In-Class Exercise

Create a web page with document style statements for two generic classes .red and .giant. The former makes the text color red, the latter the font-size 3inches tall.
Also have a selector .giant .red which makes the background-color pink.
Your web document should have six paragraphs each with text "hello world", one without a class attribute, one with class attribute value red, one with class attribute giant, one with "giant red", one with class attribute red with a nested span tag with class attribute giant, and finally, one with class attribute giant which a nested span tag with class attribute red.
What does your page look like in the browser?
Post your solution to the Sep 16 In-Class Exercise Thread.

List Properties

Here are some properties which can be used to control how ordered and unordered lists are displayed:
list-style-type:
For unordered lists one can have values disc, square, circle; for ordered lists one can have values decimal, upper-alpha, lower-alpha, upper-roman, lower-roman.

list-style-image:
Can be set to the url of an image to be used for the bullet. For example,
```
  <li style="list-style-image: url(mybullet.png)"> item </li> 
```

Alignment of Text

There are several properties which control the flow of text and images in a given set of tags.

text-indent
Usually used to control how much the first line of a paragraph is indented. Ex: p.indent {text-indent: 0.5in}

text-align
This controls how the text is aligned within margins. It can have the values: left, right, center, and justify.

float
This property often used with images and tables to control how text flows around the element. possible values are left, right, and none. The float tag can be used to make a simple two column layout (float one div tag to the left and set its width, follow it by another div tag). Recall that HTML 5 introduced several new semantic containers tags such as: header, footer, main, nav, section -- float is a very useful tool in doing the layout for these tags.

Box Model

Each element in XHTML/HTML has properties which control its border and the amount of white space around it.
This is called the box model:
This model is also used when you use CSS with other kinds of XML documents.

More on the Box Model

We next look at properties to control the box model. In addition to thhe ones below, thhere are also the master properties border:, padding:, margin: which can take a white space separated list of properties from thhe below.
Controlling the border:

border-style:
This can be none, solid, dotted, dashed, double

border-width:
This can be a length in pixels or thin, medium, or thick. You can more finely control each side of the border by using the properties: border-top-width, border-bottom-width, border-left-width, bottom-right-width.

border-color:
This sets the color of the border. This can also be more finely controlled with border-top-color, border-bottom-color, border-left-color, and border-right-color.

border-radius:
Sets the radius of a circle used to curve the corners of a box. Default is 0. You can give it a single value or list each of thhe four corners.
Controlling margins and padding: These can be controlled using the properties: margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom.
For block elements like the table tag, we use the margin property if we want to center them within a container -- you can't do this with text-align. To do this, set the left and right margin to have value auto and then define the table's width.

Background Images

The background-image property is used to place an image in the background of an element:
```
body {background-image: url(background.jpg);}
```
The way this image is displayed can be further controlled using the properties:

background-repeat:
this may have values: no-repeat, repeat-x, repeat-y

background-position:
this may have values which are space separated combinations of top, center, bottom, left, and right. You can also give an x and y value for the image offset in each direction. This is useful for sprites.

Position and Display Properties

The position property can have the value static (default), relative (says to place element relative to the last element), absolute (says to place element at some offset from top left of containing element), fixed (keep at that location even if scroll bar used).