Levels of Style Sheets

On Monday, we introduced Cascading Stylesheets (CSS) as a means of controlling the presentation of a web page, and we discussed the various spec's that define CSS.
The word cascading is used because styles affecting the presentation properties of a tag can be applied at different levels with the nearest-to-the-tag set level values overriding those set farther away.
So what are the levels of stylesheets?
inline
sets property value for single tag. For example,
```
red paragraph
```
document
sets property value for the whole document

external
sets property value for several documents till value is changed.
If no style information is available for a given property the browser will use a default value.
It is often useful to use the same stylesheet for several documents. The MIME type for stylesheets is text/css. You can link a stylesheet file into an xhtml file with a line like:
```
<link rel="stylesheet" type="text/css" href="mystyles.css" />
```
Styles can be validated at the W3C site.

Basics of Styles

The basic inline style command looks like:

<tag style="property_1: value1 ; property2: value2; ..." >

The basic document level style in the head of the document looks like

<style type="text/css" >
    /* here is a comment */
	rule_list
</style>

Each rule has the format

selector {property_1: value1 ; property2: value2; ...}

External style sheets are similar to document level styles except you don't need the style tags.

Examples of Simple Selectors

h1 {font-size: 24pt;} /* would apply to all h1 tags in the document */

h2, h3 {font-size: 14pt;} /* notice applies to both h2 and h3 tags */

You can also specify that styles should only apply to elements in certain positions within the file:

body b i {font-size: 30pt;} /* only for bolded italic'd text within file, doesn't work NS7*/

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:
```
normal look text
```
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:
```
section1 text
```
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.
We learned about simple, class, and id selectors in CSS.

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 type="text/css">
div:first-child b
{
   color:blue
}
div:before
{
    content:"The following div tag has something to tell you: ";
} 
</style>
<div>
<b>I'm blue</b>
</div>
<div>
<b>But I'm not</b>
</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">first paragraph that's new2nd...</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.

Let's Build Something... (In-Class Exercise)

Make an HTML 5 page with a table on it.
The background of the table should look like yellowed paper.
The caption of table should read: Medici Ledger
The table should consist of two columns with table headers: Borrower and Amount. These should be in a 14pt font.
After the table heading row you should have at least three rows of data with famous Renaissance people and amounts they borrowed from the Medici (can make up). Table data cells should be in a 12pt font.
Once you are done, upload your code to the Feb 15, Class Thread, and I'll try to look at it and give some feedback in class.

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.

More CSS

Outline