Cascading Style Sheets

Kevin Lawver

This is a presentation. If you'd like to view all the slides like a normal web page, you can.

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

Basics

h1 { color: blue }

Importing and Declaring Styles

There are several ways to import a style sheet into a document, or apply styles:

<link rel="stylesheet" type="text/css" href="styles.css"/>
<a href="#" style="text-decoration:none;">foo</a>

Best Practices for Importing

Semantics, Valid Markup and Style

Definitions

Semantics:

CSS:

Units

Selectors

And Now... The Pseudo's!!

Pseudo-Classes

The pseudo-classes in CSS 2.1 are the most widely support. There are more in 3, but no one supports them yet.

The Pseudo-Elements

Specificity

Inheritance

Common Properties That Inherit

The Cascade

Block vs. Inline

The Box Model

The Illustrated Box Model

When A Box Is Not A Box

When An X Is Not An X

Shorthand

Shorthand Continued

Shorthand Example

padding-top:5px;
padding-right:10px;
padding-bottom: 15px;
padding-left: 2px;
padding: 5px 10px 15px 2px;

Backgrounds

Background Shorthand

background: #000 url("image.gif") no-repeat fixed left top

Lists

List Style Examples

Setting Fonts

font: font-style font-variant font-weight font-size/line-height font-family
body {
  font: italic small-caps bold 76%/1 sans, "lucida grande", tahoma, verdana, sans-serif; 
  color:#000;
}

The Trouble With Fonts

Fixing Font "Issues"

Aligning Text With text-align

More Refined Text Controls

Boxes Can Have Borders!

There are several kinds of borders - try them all!

solid

dotted (the same as dashed in IE at 1px)

dashed

double

groove

ridge

inset

Overflow

Floating and "The Flow"

Getting Out Of A Float

#foot { clear:both; }

Floating Gotchas

Float Example: Two Column Layout

Float Example: The Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Two Columns</title>
</head>
<body>
<div id="nav">
  <ul>
    <li><a href="#">Main</a></li>
    <li><a href="#">Archives</a></li>
    <li><a href="#">News</a>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<div id="content">
  <h1>The Content</h1>
  <p>I am the content.  I am full of text.  
I am full of text.  I am full of text.  I am full of text.  I am full of text.  
I am full of text.  I am full of text.  I am full of text.  I am full of text.  
I am full of text.  I am full of text.  I am full of text.  I am full of text...</p>
</div>
<div id="foot">Copyright America Online 2005</div>
</body>
</html>

Float Example: Questions

Float Example: My CSS

Available here

body {
    margin:0;
    padding:0;
    font: 77% sans, "lucida grande", tahoma, verdana, sans-serif;
    color:#000;
}

#nav {
    float:left;
    width:200px;
}

#content {
    margin:0 0 0 205px;
}

#foot {
    clear:left;
}

Beyond Float: Positioning

Positioning Example: Relative - The Markup

We'll use the markup from our float example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Two Columns</title>
</head>
<body>
<div id="nav">
  <ul>
    <li><a href="#">Main</a></li>
    <li><a href="#">Archives</a></li>
    <li><a href="#">News</a>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<div id="content">
  <h1>The Content</h1>
  <p>I am the content.  I am full of text.  
I am full of text.  I am full of text.  I am full of text.  I am full of text.  
I am full of text.  I am full of text.  I am full of text.  I am full of text.  
I am full of text.  I am full of text.  I am full of text.  I am full of text...</p>
</div>
<div id="foot">Copyright America Online 2005</div>
</body>
</html>

Positioning Example: Relative - Initial CSS

We'll even start with the same CSS:

body {
    margin:0;
    padding:0;
    font: 77% sans, "lucida grande", tahoma, verdana, sans-serif;
    color:#000;
}

#nav {
    float:left;
    width:200px;
}

#content {
    margin:0 0 0 205px;
}

Positioning Example: Relative - New CSS

#content h1 {
    position:relative;
    top:20px;
    left:5px;
    padding:5px;
    border:solid 1px #000;
    background:#eee;
}

#content p {
    padding:10px;
    border:solid 1px #9cf;
    background:#def;
}

Positioning Example: Relative - Explanation

Positioning Example: Absolute

Positioning Example: Absolute - CSS Step One

body {
    margin:0;
    padding:0;
    font: 77% sans, "lucida grande", tahoma, verdana, sans-serif;
    color:#000;
}

#nav {
    position:absolute;
    right:0;
    width:200px;
}

Positioning Example: Absolute - What's That Look Like?

Positioning Example: Absolute - CSS Step Two

body {
    margin:0;
    padding:0;
    font: 77% sans, "lucida grande", tahoma, verdana, sans-serif;
    color:#000;
}

#nav {
    position:absolute;
    right:0;
    width:200px;
}

#content {
    margin: 0 205px 0 0;
}

Positioning Example: Absolute - Explanation

CSS Media Types & Profiles

Declaring A Media Type or Profile

<link rel="stylesheet" type="text/css" href="/css.css" media="screen"/>
@import url("/css.css") screen;
@media print { 
   #ad { display:none; } 
}

@media print

@media handheld

The Method In The Madness

  1. Use a compliant browser for development
  2. Start with content - what is it? How should I mark it up?.
  3. Style layout first
  4. After that, colors and font sizes
  5. "Effects"
  6. Check in IE
  7. Hacks and extra (non-semantic markup) as a last resort
  8. Combine styles where possible (links, for example)

Keeping Your Style Sane

Optimizing Your CSS

Hack One: The Underscore

_margin: 0 0 0 0;

Hack Two: The Child Selector

html>body ul { margin:0; }

The Preferred Hacks

IE Bug: Double Margins

IE Bug: Floated Elements and Comments

IE Bug: Whitespace

Extra Credit: CSS Zen Garden

  1. Grab the markup from the zen garden.
  2. Do something:
    • Change the font.
    • Try floating the intro div and make it look OK with the other elements.
    • Do something interesting with the header.
    • What can you do with the header (inside of intro)?

Zen Garden Notes

Conclusions

Further Reading

Questions?

category: Presentations, CSS