CSS Building Blocks
Jason Garber
E-site Marketing
When last we met...
- (X)HTML for structure
- CSS for presentation
- JavaScript for behavior
- Tables aren't evil – they're just not for layout
First things first
- Two types of elements
- Block-level elements
Examples: div, h1, p"Block-level elements typically contain inline elements and other block-level elements. When rendered visually, block-level elements usually begin on a new line."
- Inline elements
Examples: span, a, img"Inline elements typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line."
- Block-level elements
ID vs. Class
- IDs can be used once and only once per page
- Primarly used for structural elements ( <div id="wrapper"> )
- Easy access to element via the DOM ( document.getElementById() )
- Classes can be reused
- Good for providing styles to a variety of elements
- Example: an "alert" class that draws the user's attention to a particular element
- Who came up with these names?
- ID: think of it as a person – there's only one of you
- Class: a number of people can belong to a particular class
The Structure of a Style Rule
h1, p {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: blue;
}
p em { color: yellow; }
- h1 & p = selectors
- font-family, etc. = declarations
- "p em" = contextual selector
Using styles
- Inline styles
<p style="font-weight: bold;">This text will be bold.</p>- Pros: always most specific
- Cons: not really separating presentation and structure
- Embedded stylesheet
<head> <style type="text/css" media="screen"> h1, p { font-weight: bold; color: blue; } </style> </head>- Pros: good for one-off pages (404 page, etc.)
- Cons: not good for managing styles across an entire site
Using styles (continued)
- External Stylesheet
<head> <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" /> </head> <head> <style type="text/css" media="screen"> @import url("css/style.css"); </style> </head>- Pros: changes in a stylesheet effect entire site
- Cons: changes in a stylesheet effect entire site
The CSS Box Model
Links
- Resources:
- Presentation available at:
- http://sixtwothree.org/presentations/css-building-blocks/