Introduction to CSS Cascading Style Sheets

ETC Workshop CSS is a stylesheet language used to describe the

Tuesday, December 6, 3:00pm 5:00pm presentation of a document written in a markup

language. Its most common application is to style

web pages written in HTML and XHTML The CSS

Charlynda Winkley
specifications are maintained by the World Wide
Assistant Director of Web Services

Office of the Provost Web Consortium (W3C).

- Wikipedia

Three Ways to Style The Cascade


Inline Styles Styles fall from one level of the document hierarchy


Embedded Styles down to the next


Linked Styles 

Default browser style sheet


User style sheet


Author style sheet (external)


Author embedded style sheet


Author inline styles

CSS Rules Writing CSS Rules


Selector Multiple declarations can be contained within a rule


Declaration { property: value; } p { color: #000; font-size: 12px; line-height: 15px; }

Multiple selectors can be grouped

p { color: #000; } h1, h2, h3 { color: #069; font-weight: bold; }

Multiple rules can be applied to the same selector

h1, h2, h3 { color: #069; font-weight: bold; }

h3 { margin-bottom: 10px; }

1
Contextual Selectors IDs and Classes

Use more than one tag name in the selector to target 
Only a single instance of an ID may be used per

tags more selectively (follows document hierarchy) page


Classes can be used many times

p { color: red; }

div p { color: red; }

The Cascade Rules Simplified Specifying Fonts


Selectors with IDs win over selectors with body { font-family: verdana, arial, helvetica, sans-

classes, selectors with classes win over selectors serif; }

with only tags


If the same property for the same tag is defined in h1 { font-family: serif; }

more than one place, style display follows the

cascade hierarchy


Defined styles win over inherited styles

Sizing Fonts Font Properties

body { font-family: verdana, arial, helvetica, sans- h1 { font-family: serif; font-size: 0.9em; font-style:

serif; font-size: 100%; } italic; font-weight: bold; }

h1 { font-family: serif; font-size: 0.9em; } h1 { font: bold italic 0.9em serif; }

2
Text Properties Styling Links (Pseudo-Classes)

text-indent a:link

letter-spacing a:visited

word-spacing a:hover

text-decoration
a:active
text-align

line-height

text-transform

vertical-align

The Box Model Box Borders

h1 { border: 1px solid #000; }

h1 { border-bottom: 1px solid #000; }

#content { border: 1px dashed #369; }

Box Padding and Margins Box Sizing

body { margin: 0; padding: 0; } p { margin: 10px; padding: 10px; border: 1px solid

#000; background-color: #ccc; width: 400px; }

h1 { padding: 10px; border: 1px solid #000;

background-color: #333; } * In all modern standards-compliant browsers, when you set

the width of an element, you are really setting the width

of the content within it, and any padding, borders and

p { margin: 10px 5px; padding: 5px 10px; border: 1px
margins you set increase the overall space the element
solid #000; }
occupies over and above the specified width value.

3
Positioning Float Property

Static Positioning (default) img { margin: 10px; float: left; }

Relative Positioning

p.relative { position: relative; top: 20px; left: 30px; } #left { margin: 0; width: 200px; float: left; }

Absolute Positioning #right { margin: 0; float: left; }

p.absolute { position: absolute; top: 20px; left: 30px; }

Fixed Positioning (does not work in IE)

Clear Property Recommended Books

.clear { clear: both; }
Stylin' with CSS: A Designer's Guide - Charles Wyke-Smith

Eric Meyer on CSS - Eric Meyer

More Eric Meyer on CSS - Eric Meyer

.clearfix:after {content: "."; display: block; height: 0;

Web Standards Solutions - Dan Cederholm
clear: both; visibility: hidden;}

Designing with Web Standards - Jeffrey Zeldman
.clearfix {display: inline-block;}

* html .clearfix {height: 1%;}

.clearfix {display: block;}