Introduction to CSS

ETC Workshop Tuesday, December 6, 3:00pm – 5:00pm

Cascading Style Sheets
CSS is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style

Charlynda Winkley
Assistant Director of Web Services Office of the Provost

web pages written in HTML and XHTML… The CSS specifications are maintained by the World Wide Web Consortium (W3C).
- Wikipedia

Three Ways to Style
Inline Styles Embedded Styles Linked Styles

The Cascade
Styles fall from one level of the document hierarchy down to the next
Default browser style sheet User style sheet Author style sheet (external) Author embedded style sheet Author inline styles

CSS Rules
Selector Declaration { property: value; }

Writing CSS Rules
Multiple declarations can be contained within a rule
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
Use more than one tag name in the selector to target tags more selectively (follows document hierarchy)

IDs and Classes
Only a single instance of an ID may be used per page Classes can be used many times

p { color: red; } div p { color: red; }

The Cascade Rules Simplified
Selectors with IDs “win” over selectors with classes, selectors with classes “win” over selectors with only tags If the same property for the same tag is defined in more than one place, style display follows the cascade hierarchy Defined styles win over inherited styles

Specifying Fonts
body { font-family: verdana, arial, helvetica, sansserif; }

h1 { font-family: serif; }

Sizing Fonts
body { font-family: verdana, arial, helvetica, sansserif; font-size: 100%; }

Font Properties
h1 { font-family: serif; font-size: 0.9em; font-style: italic; font-weight: bold; }

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

h1 { font: bold italic 0.9em serif; }

2

Text Properties
text-indent letter-spacing word-spacing text-decoration text-align line-height text-transform vertical-align

Styling Links (Pseudo-Classes)
a:link a:visited a:hover a:active

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
body { margin: 0; padding: 0; }

Box Sizing
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

p { margin: 10px 5px; padding: 5px 10px; border: 1px solid #000; }

of the content within it, and any padding, borders and margins you set increase the overall space the element occupies over and above the specified width value.

3

Positioning
Static Positioning (default) Relative Positioning
p.relative { position: relative; top: 20px; left: 30px; }

Float Property
img { margin: 10px; float: left; }

#left { margin: 0; width: 200px; float: left; } #right { margin: 0; float: left; }

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

Fixed Positioning (does not work in IE)

Clear Property
.clear { clear: both; }

Recommended Books
Stylin' with CSS: A Designer's Guide - Charles Wyke-Smith Eric Meyer on CSS - Eric Meyer

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;}

More Eric Meyer on CSS - Eric Meyer Web Standards Solutions - Dan Cederholm Designing with Web Standards - Jeffrey Zeldman

4

Sign up to vote on this title
UsefulNot useful