Get Your Hands Dirty With CSS
Kevin Lawver
This is a presentation. If you'd like to view all the slides like a normal web page, you can.
IN PROGRESS
- No where near done, but wanted to get it up to the server so I don't accidentally delete it from my drafts folder.
Before We Get Started
- Install Firefox
- If you're using Windows, use the Advanced option during the install and make sure you install the DOM Inspector
- Install the Web Developer Toolbar
- Restart Firefox
Introduction to CSS
First, let's talk about what it can do when given semantic, valid markup:
What Is CSS?
A Short History of CSS
- CSS as we know it today was invented by Håkon Wium Lie and Bert Bos.
- CSS1 became a recommendation in December of 1996
- CSS2 became candidate recommendation in February of 2004
- More Details
Basics
- CSS consists of selectors and declarations. For example:
h1 { color: blue } - h1 is the selector
- everything inside { and } is the declaration.
- color is the property.
- blue is the value.
- It "selects" all h1 elements in the document, and makes their color "blue".
- We'll go into the specifics of selectors and the properties later.
Importing and Declaring Styles
There are several ways to import a style sheet into a document, or apply styles:
- link:
<link rel="stylesheet" type="text/css" href="styles.css"/>- import:
@import url("styles.css");
* style element
* style attribute: <pre><a href="#" style="text-decoration:none;">foo</a>Best Practices for Importing
- The link or import methods are preferred.
- The give a better separation of content and presentation.
- Easier to manage because styles are now in one place instead of repeated all over a document.
- are easier on the user because the HTML will be smaller, and faster to download.
- We usually use the link method, and all link elements must be inside the HEAD.
Semantics, Valid Markup and Style
- The more semantic, well-formed and valid your markup, the easier it is to style.
- Give yourself usable hooks into your markup, but don't overdo it (divitis and classitis)
- Use descendant selectors to get at the children of containers.
Definitions
Semantics:
- parent: the element that contains the current element. Example: html is always the parent of body.
- child: an element that is immediately contained by another element. Example: li is always a child of a ul.
- ancestor: an element that appears more than one level above the parent, but within the same tree. Example: html is always an ancestor of p, because p is at least a child of body, which is a child of html.
- descendant: an element with within the tree of another. Example: p is always a descendant of html because p is always at least a child of body and body is always a child of html.
CSS:
- Viewport: The browser window.
- Page: The HTML document
Getting Our Hands Dirty
- In Firefox here
- Open up the Edit CSS pane: Tools > Web Developer > CSS > Edit CSS
- In the first tab, remove all that text
- Now we're ready to get our hands dirty!
Specificity
Backgrounds
Fonts
Box vs. Inline
The Box Model
The Illustrated Box Model
Box Model: Padding
Box Model: Margin
Box Model: Borders
Floats
Positioning
Relative
Absolute
Talking About Hacks
- Underscore Hack
- Child selectors