Objectives
Learn about the core components of CSS2.1 and how they can be used to present your content.
- CSS Terms and Definitions
- CSS Box Model
- CSS Positioning
- Layout Examples
Sample CSS Rule
Anatomy of a CSS Rule
Sample Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Example Document</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="sample.css" type="text/css" media="all" /> </head> <body> <div> <p>Getting ahead in the <em>fast</em> paced world of tortoise racing.</p> </div> </body> </html>
Document Tree
Parents and Children
Parents and Children
Parents and Children
Siblings
Descendant
Ancestor
Inheritance
- Elements in the document tree pass on some properties to their children.
- Some properties, such as margins and padding, are not passed on by default.
- Properties can be defined as "inherit", which means that the value for that property will be inherited from the computed value of the parent element.
- See the CSS2 Property Table to see which properties are inherited by default.
Types of CSS Selectors
- Type (Element) selectors
- Class selectors
- ID selectors
- Descendant (Contextual) Selectors
- Universal selector
Type Selector
From the CSS2.1 Specification:
"A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree."
Example of a Type selector:
h1 { ... }
Class Selector
Custom selector that matches any element with a matching class attribute, or any specific element with a matching class attribute.
Examples of Class selectors:
.myClass { ... }
div.myClass { ... }
ID Selector
An ID is unique to one element in an HTML/XHTML document. ID selectors are used to match an element with a matching ID attribute. Can also match a specific element with a matching ID.
Examples of ID selectors:
#myID { ... }
div#myID { ... }
If an ID can only be used once, why would I ever need use the second selector?
Descendant Selector
A Descendant selector is used to match an element that is a descendant of a defined ancestor element.
Example of a Descendant selector:
p a { ... }
This would match any a element that is a descendant of a p element.
Used intelligently, descendant selectors can relieve your HTML documents of class-itis.
Universal Selector
The universal selector (represented by an asterisk "*") is used to match any element.
Example of the universal selector:
* { color: red; }
The above rule would make the foreground (text) color of every element in an HTML document red.
Combining Selector Types for Fun and Profit
Some examples of complex selectors which incorporate one or more selector types:
html, body { margin: 0; padding: 0; }#header h1 { color: #336699; }#navigation ul li.first a { text-decoration: none; }div#reportItem p.sampleItem a:hover { color: red; }
Advanced CSS 2.1 Selectors
- Attribute selector:
h1[title] {}orh1[title=Sample Title] {} - Adjacent sibling selector
h1 + p {} - Child selectors
div > p {} - Pseudo-elements and pseudo-classes
p:first-line {}ora:hover {}
Cascading: Putting the 'C' in CSS
Style rules can come from any or all of these sources:
- linking
- importing
- embedding
- inline styles
- browser default styles
- user styles
Cascading: Putting the 'C' in CSS
- "Cascading" is the process that manages the application of the style rules.
- User agents aggregate all of the CSS rules from various sources and internally create a single virtual style sheet.
- Each style rule carries a weight.
- When more than one rule applies, the user agent follows the rule with the greatest weight.
Cascading Order
Weight is determined by importance (normal or important) and origin (author, user, or user agent):
(most important to least important)
- user important style sheets
- author important style sheets
- author normal style sheets
- user normal style sheets
- user agent style sheets
Cascading Order (Cont.)
- Sort by specificity of selector: more specific selectors will override more general ones.
- Finally, sort by order specified: if more than one rule has the same weight, origin and specificity, the last specified wins.
- Rules in imported style sheets are considered to be before any rules in the style sheet itself.
Specificity
- All selectors are given a specificity.
- More specific selectors take precedence over less specific selectors.
Calculating Specificity (Simple Version)
- Count each ID attribute in the selector
- Count each other attribute in the selector (i.e. classes)
- Count each element in the selector
Create a final value by concatenating A, B, and C
Example Calculations
#home div p a {}
- A = 1
- B = 0
- C = 3
A-B-C -> 1-0-3 = 103
Example Calculations
body#home .content p a {}
- A = 1
- B = 1
- C = 3
A-B-C -> 1-1-3 = 113
Shorthand Properties
There are many ways to say the same thing:
div {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
Shorthand Properties
Could also be written as:
div {
border: 1px solid #000;
}
For more information see Efficient CSS with Shorthand Properties by Roger Johansson.