CSS: Cascading Style Sheets

#1

About CSS2

CSS2 : Cascading Style Sheets, Level 2
A W3C standard for styling XML.
Implemented in almost all browsers.
You've probably seen it action in most websites.

#2

Basic Model

Everything is formatted as a "box".
Text is represented by "inline areas"
Properties are used to control appearance and behavior.

Example:

title { 
   display: block; 
   text-align: center; 
   font-size: 20pt; font-weight: bold; 
}

description {
   display: block;
   margin: 5pt;
   padding: 5p;
   border: 1pt solid black;
}

#3

Block and Inline

Block areas are essentially boxes (rectangular areas)
The can contain other area types.
Inline areas are things like text, graphics, etc.
Text generates glyph areas (font characters) that are arranged in a line--hence the term "inline".
There are other type of "areas" that are more complex (e.g. lists, tables, etc.).
These areas are essentially like a block area at their highest level.

#4

Inline Areas

Figure 1. Figure

Font are collections of glyphs.
Each Unicode character has a canonical glyph upon which the font glyph is based.
Different languages have different writing directions.
Characters/languages can have different alignment points (e.g. top vs bottom).
The "stack up" next to each other.
Breaking inline areas is language specific (e.g. at spaces, use hyphenation, etc.).

#5

The Box Model

Figure 2. Figure

Boxes all have:
- margins between the sibling areas and the border.
- borders
- padding between the border and the content.
Block areas (display: block) are the most basic box.

#6

Basic Syntax

The basic syntax is:
```
selector { 
   properties
}
```
A selector can be a simple element name:
```
description {
   font-style: italic;
}
```

You can also have multiple selectors:

description, note {
   font-style: italic;
}

#7

Child & Descendant Selectors

You can specify simple parent-child relationships
```
description > p {
}
section > title {
}
```
And for descendants relationships:
```
section note {
}
```
This matches any 'note' element that is a descendant of 'section'.

#8

Attribute Qualifiers

Checking for the presence of an attribute:
```
link[href]
```
Checking an attribute value:
```
assignment[show="true"]
```
Multiple qualifiers:
```
assignment[show="true"][due-date]
```

#9

Properties

Properties have names like element names.
Most properties have single values.
Some are actually "short hand" properties (a complete hack, but...)

Example:

description {
   font-size: 10pt;
   font-style: italic;
   border: 1pt solid black;
}

Check out the CSS2 Appendix F: Property Index

#10

Stylesheets & Instances

Instances are associated with stylesheets by adding a processing instruction at the top.
```
<?xml-stylesheet type="text/css" href="mystyle.css"?>
```

In XHTML, there is also a special element for this:

<link type="text/css" href="mystyle.css" rel="stylesheet"/>

which is in the 'head' element:

<html>
<head><title>My Document</title>
<link type="text/css" href="mystyle.css" rel="stylesheet"/>
</head>
<body>...</body>
</html>

#11

Property Inheritance

Some property values are inherited structurally.
This inheritance follows the structure of the document.
All matching styles are merged by in a least-specific to most-specific order
Example: (xml) (css)

#12

Fonts

CSS supports these font properties:
- font-family - the font family name
- font-style - a font style (e.g. italic)
- font-variant - a variant (e.g. small caps)
- font-weight - the weight of the font (e.g. bold)
- font-stretch - the width of the characters in terms of keywords (e.g. condensed, normal, expanded, etc.)
- font-size - the size of the font from baseline to baseline
You can also specify a font as one shorthand property:
```
font: normal small-caps 24pt fantasy;
```
But I don't recommend it!!!

#13

Units of Measurement

Relative Units:
- em - the 'font-size' of the relevant font
- ex - the 'x-height' of the relevant font
- px - pixels, relative to the viewing device
Absolute Units:
- in - inches
- cm - centimeters
- mm - millimeters
- pt - point - 1/72 of an inch
- pc - pica - 12 points

Examples:

font-size: 1.25em;

border-top-width: 0.5cm;

#14

Color

The 'color' property controls the font color.
The 'background-color' controls the background of a inline area.
Colors are specified by:
- system name - black, white, maroon, etc.
- hexadecimal RGB - #ff0000
- rgb function - rgb(255,0,0)

#15

Borders

Borders are specified by width, color, and style.
Border also have locations: top, bottom, left, right.
Each property is a combination: border-top-color, border-bottom-style, border-left-width etc.
border-style-* values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

#16

Margins & Padding

Margins are specified by width.
They have locations of top, bottom, left, or right.
Each property is a combination: margin-top, padding-right, etc.
There are shorthand properties of 'margin' and 'padding' for all of top, bottom, left, and right.
Examples:
```
padding-top: 5pt;
margin: 10pt;
```

#17

The Display Property

The 'display' property controls what area an element generates.
Your options are: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none
Every element is inline by default.
If you want vertical layouts, use 'block'.
Example: (xml) (css)

#18

Lists

Lists are created in the containing block.
Mark each item with a 'display' value of 'list-item'.
Use the 'list-style-type' to set the bullet or numbering.
Example: (xml) (css)

#19

Tables

The table container should have 'display' value of 'table' or 'inline-table'.
Each table row has a display value of 'table-row'.
Each table cell has a display value of 'table-cell'.
Example: (xml) (css)

#20

Links & Graphics

Links only work in CSS if your language is recognized to have a link (e.g. XHTML)
Graphics only work if your language identifies them as embedded links (e.g. XHTML).
You can try to use XLink but it probably won't work.
Here's an example that only partially works: (xml) (css)

It has a link to the graphic:

#21

Classes

CSS pseudo-classes can be used to style XHTML content in different ways.
In the XHTML:
```
<p class="author">Alex Milowski</p>
```

In the CSS:

p.author {
   font-size: 20pt;
   font-weight: bold;
   color: red;
}

A period in an element name means you need to escape it:
```
dot\.dot.class {
}
```
Example: (xhtml) (css)

#22

Before, After, and Generated Content

You can generate content before and after elements.
This matches before:
```
thespot:before {
}
```
This matches after:
```
thespot:after {
}
```

The content can be specified as a property:

thespot:after {
   display: block;
   content: "After!";
   padding: 5pt;
   font-style: italic;
}

Example: (xml) (css)

#23

Namespaces

If you have namespaces, you need to map a prefix in the stylesheet:
```
@namespace prefix url(value);
```

For example, my tideinfo service namespace:

@namespace t url(http://www.smallx.com/services/tideinfo/2005);

Since ':' (colon) is taken for pseudo classes, the '|' (vertical bar) is use to separate prefix from local name:
```
t|tideinfo {
   display: block;
}
```
Example: (xml) (css)

#24

Attributes in Generated Content

You can access attribute values via the 'attr()' function.
For example, the value of the 'date' attribute:
```
attr(date)
```

You can use these in generated content:

t|tideinfo:before {
   display: block;
   content: "Location: " attr(location) " low: " attr(low-at) " high: " attr(high-at);
}

Example: (xml) (css)