What are they?
- Cascading Style Sheets, level 1: CSS1
- Cascading Style Sheets, level 2: CCS2 (May'98)
Types of Cascading Style Sheets
- Inline styles
<P STYLE="font-size:120%; text-align:center; background:white">This creates a white centered paragraph with a larger font</P>
- Global style
sheets
<HEAD> <TITLE>Styles: Example 1</TITLE> <STYLE TYPE="text/css"> P {font-size:90%; text-align=left; background:yellow}
H2 {color:red; font-size=36pt}
H2.cool {color:#CCCCFF; font-size=24pt} .myGrayBackground {background:gray}
A:link, A:visited, A:active
{text-decoration:none}
</STYLE>
</HEAD> - Linked style
sheets (.css extension)
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="egseminars.css">
</HEAD>
- CCS Example: display and code
Cascading Style Sheets Syntax
- The CSS is a very extensive language
- Watch out for the ":" used in place of "=" signs, curly braces used in groupings, double quotes and case.
- W3C CSS Level 1 Specs (Easy Reference Reading)
Cascading Precedence
- It can get complicated, but in general...
- The most specific settings take precedence:
- Global style sheets take predence over linked style sheets and inline styles overwrite anything else
Cascading Style Sheets, level 2
- CCS1 backward-compatible
- Essentially, more poweful design capability
- Improved typographic control
- Dynamic downloadable fonts (a la Microsoft)
- New position properties
to control layout
- e.g. sidebars and navigation areas
- Images and text can be layered and overlaped
- More control for table layout (for XML)
- CCS2 feature set for XML
- Increased support for Web authoring internationalization
- W3C CCS Level 2 Specs (longish)