, 

, etc.

Example:

h1 { text­align: center; }

Grouping Selectors If you have two or more rules that are the  same: h2 { font­family: Optima, Arial, sans­serif; } p { font­family: Optima, Arial, sans­serif; }

You can group them:

h2, p { font­family: Optima, Arial, sans­serif; }

CSS Selectors: Class An HTML element can be assigned a class:

Which specifies a particular selector in the  style sheet: h1.header { text­align: center; }

Classes can apply to multiple elements: .header { text­align: center; } will apply to , etc.

CSS Selectors: Psuedo Class Selectors that are inferred by the  browser, not coded in the XHTML  document a:link — untraveled, inactive link a:hover — mouse on top of a:active — being clicked on a:visited — traveled

CSS Selectors: Psuedo Element :first­letter — first letter in a block  element like 

 or 

:first­line— first line in a block element  like 

 or 

See samples on the next screen

CSS Selectors: Psuedo Element

CSS Selectors: Contextual

Selectors that only match under certain  contexts; for example, the style: h1 em { color: red; } And this XHTML:

This is header text, and <em>this text is  emphasized but this is not.

 results in this:

Popular Text Properties text­align: left | center | right | justify font­size: small | medium…| % font­family: fontname, fontname,  familyname font­weight: bold | lighter font­style: italic

Colors color: red | blue…| hexcode background­color: red | blue…| hexcode Colors you may be able to use by name  instead of hex code: Black  = #000000    Green  = #008000    Silver = #C0C0C0     Lime   = #00FF00    Gray   = #808080    Olive  = #808000     White  = #FFFFFF   Yellow = #FFFF00  Maroon = #800000     Navy   = #000080    Red    = #FF0000    Blue   = #0000FF     Purple = #800080    Teal   = #008080     Fuchsia= #FF00FF     Aqua   = #00FFFF

Types of Elements “Block” elements are HTML elements that are  displayed on a line by themselves  (paragraphs, headings, lists, tables, divs,  etc.) and can only be enclosed by other block  elements “Inline” elements are HTML elements that do  not force a line break and can be enclosed  within any other element (a, em, span, etc.) “List­item elements” are HTML elements that  have a marker (bullet, number) and an order

Controlling Element Display This HTML:

This is header text, and <em>this text is emphasized but this is  not.

 

If the "display: none" rule works, there will be nothing  displayed after the colon: <em class="disappear">This text should not  display

And these styles: .disappear { display: none; } Result in:

h1 { display: inline; } em { display: block; }

CSS: Inheritance Unless a more specific style rule applies, tags  enclosed by another tag will inherit its style A style rule like this: h1 { color: red; } And HTML like this:

A Document <em>Title

Will result in “Title” being both red and italic  (the default display of <em>) But if a rule like this exists: em { color: blue; }  then it will override the style inherited from the 

CSS: The Cascade Specifying styles in a separate file allows web  managers to specify global settings The display of an unlimited number of web  documents can be changed by changing a  setting in a global style sheet Global settings can be overridden by using  the cascade of precedence Therefore, CSS offers both power and  flexibility in determining how documents are  displayed

CSS: How the Cascade Works The process:

Find all declarations that apply to a given  element Sort by specificity (e.g., a simple selector like  h1 = 1; class selector like .highlight = 10) Sort by order of appearance; the later a  declaration appears, the more weight it is  given

CSS: Diagram of Precedence XHTML File 2) [call to external

stylesheet] 1)[styles embedded inside the document]

Generalized order of precedence, all other things being equal

Extern al Style Sheet

http://jigsaw.w3.org/css-validator/

Making the Transition: Learning Do you know HTML code?

Use XHTML Transitional Validate your docs so you can learn where  you tend to make errors Begin to wean yourself from ,  , etc.

Is it all new to you?

Learn and use XHTML Strict Validate your docs until you get the hang of it

Making the Transition: Tidy HTML Tidy is free software that can read your  HTML and output a much better file by: Automatically fixing some errors Changing uppercase tags to lowercase Indenting your code to make to make it more  readable Quote all attribute values And other things, depends on configuration file

An error report may also be generated that  can identify remaining problems

Making the Transition: Migrating an Existing Site All at once:

Copy entire site to another location Run Tidy; check and re­run as needed Clean up remaining problems Transfer back

Gradual:

Do all new things in XHTML/CSS Migrate old files as you update them for other  reasons

The Future Will XML replace HTML? It already has! That’s why you’re here! XML will typically not be delivered to web  clients; that is what XHTML will be for So, is this the last markup you have to learn? No way! Use this as a stepping­stone to XML,  for which you will have many additional uses Remember — Never stop learning!