Cascad ing S t y l e Shee t s2004 WebGUI Users Conference

Orig in s o f CSS

Why was i t c rea ted ?

• Result of inefficient use of tables.

• Separate content from presentation.

• Standardize web design.

Bene f i t s o f CSS

F lex ib i l i t y

• no need for nested tables means easier maintentance..

• separates style from presentation.

• define the look of your page in one place.

• easily change the look.

F lex ib i l i t y

<table>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 1</b></font></td></tr>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 2</b></font></td></tr>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 3</b></font></td></tr>

</table>

Classic HTML

F lex ib i l i t y

<table><tr><td class="subtext">this is line 1</td></tr><tr><td class="subtext">this is line 2</td></tr><tr><td class="subtext">this is line 3</td></tr></table>

With CSS

Render ing

• Less tables = faster load times.

• Spacer images are a thing of the past.

• Bandwidth friendly: a single 1k document can control the appearance of an entire site.

Access ib i l i t y

• No nested tables makes it easier for screen readers.

• Can apply different style sheets for different types of presentation. For example, can supply a high contrast style sheet for people with bad vision.

Forward Compat ib l e

• created with the future standards in mind

• removes need for deprecated tags

• works with todays standards (mostly)

S ty l e Shee t Types

3 Opt ions

• Inline

• Embedded

• Linked

I n l i neUse an inline style sheet to modifya single element one time in a page.

<p style=”color: red; font-style: italic;”>Content here...</p>

EmbeddedUse an embedded style sheet tocontrol styles on an entire page.

<style type=”text/css”>p { color: navy; font-weight: bold; font-size: 10px; background-color: white;}</style>

L inked

Use a linked style sheet to control styles on multiple pages.

<link rel=”stylesheet” type=”text/css”href=”stylesheet.css” />

CSS Bas i c s

CSS Ru le s

• Selector: defines the HTML element to which the rule applies.

• Declarations: contains at least one property and value.

Every style contains one or more rules, each rule containing two parts:

selector { property: value;}

CSS Ru le s

Selector Properties

h1 { color: red; font-size: large;}

Values

Clas ses & IDs

Clas s Se l ec tor

Create your own selectors based onclasses or unique names you define.

Class selectors are indicated by a period.

Clas s Se l ec tor

.recipeName { font-family: Arial; color: red;}

CSS CSS Applied

<p class=”recipeName”>Chicken Pasta</p><p class=”recipeName”>Pizza</p>

Clas s Se l ec tor

i d Se l ec tor

Similar to the class it can be set on nearlyany tag and can be used as a CSS selector.

You can only used an id selectoronce on a given page.

i d Se l ec tor

#copyright { font-family: Arial; font-size:15px;}

CSS CSS Applied

<p id=”copyright”>Copyright 2004 YourCompany Here</p>

i d Se l ec tor

<d iv> & <span>

<d iv> & <span>

• <div> is short for division (within a document), and is a container, a block level element that has a variety of uses.

• <span> is an inline element.

• both are generic in nature.

<d iv> & <span>

.tips{ color: black; background-color: #e8e8e8; font-family: Arial;}

#footer{ color: green; background-color: #white; font-family: Times; font-style: italic;}

CSS CSS Applied<span class=”tips”> <p>USEFUL TIPS FOR YOU</p> <ul> <li>Tip 1</li> <li>Tip 2</li> <li>Tip 3</li> <li>Tip 4</li> </ul></span><hr><div id=”footer”>Your Footer Here</div>

<d iv> & <span>

Contro l l i n g Font D i sp l ay

Font - f am i ly

allows you to specify what font you want to display

p { font-family: Arial;}

Font - s t y l e

toggles between normal and italic fonts

p { font-family: Arial; font-style: italic;}

Font - var i an t

this allows you to select between normal and small caps

p { font-family: Arial; font-style: italic; font-variant: small-caps;}

Font -we i gh tprovides a wider range of choices thanthe HTML <b> element. Choose from

norman, bold, lighter, bolder, or a numericalvalue of 100 -900 (in increments of 100).

p { font-family: Arial; font-style: italic; font-variant: small-caps; font-weight: 500;}

Font - s i zefrees you from HTML’s font restrictions.

in, mm, cm, pt, pc, px, em, ex, #%

p { font-family: Arial; font-style: italic; font-variant: small-caps; font-weight: 500; font-size: 12px;}

Colorchoose color by using color names, hexidecimal values, or RGB values

p { font-family: Arial; font-style: italic; font-variant: small-caps; font-weight: 500; font-size: 12px; color: blue;}

Spac ing & A l i gnment

Word-spac ing

specify space between words (default is normal)

h1 { word-spacing: 2px;}

Let ter- spac ing

specify space between letters (default is normal)

h1 { word-spacing: 2px; letter-spacing: 3px;}

Text -decora t ion

add values of underline, overline, line-through, blink (default is none)

h1 { word-spacing: 2px; letter-spacing: 3px; text-decoration: underline;}

Ver t i c a l - a l i gnsimilar to HTML’s valign property.

Values include baseline, sub, super, top, text-top, middle, bottom, text-bottom, and %

h1 { word-spacing: 2px; letter-spacing: 3px; text-decoration: underline; vertical-align: top;}

Text - t r ans formcapitalize text, or change

text to uppercase or lowercase

h1 { word-spacing: 2px; letter-spacing: 3px; text-decoration: underline; vertical-align: top; text-transform: capitalize;}

Text - a l i gnsimilar to HTML’s align attribute.

Values include left, right, center, and justify

h1 { word-spacing: 2px; letter-spacing: 3px; text-decoration: underline; vertical-align: top; text-transform: capitalize; text-align: right;}

Background Proper t i e s

Background-co lor

allows you to set a background colorfor any element.

body { background-color: black;}

Background- image

allows you to set a background imagefor any element.

body { background-color: black; background-image: url(image.gif);}

Background- repea trepeat your image horizontally, vertically,

through the entire page, or not at all.Values are repeat, repeat-x, repeat-y, no-repeat

body { background-color: black; background-image: url(image.gif); background-repeat: repeat-y;}

Background-a t t achmentcontrols the scrolling of your background.

Values are fixed or scroll.

body { background-color: black; background-image: url(image.gif); background-repeat: repeat-y; background-attachment: fixed;}

Background-pos i t ionspecifies where an image occurs in an element.

Values are top/center/bottom andleft/center/right.

body { background-color: black; background-image: url(image.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: top right;}

The Box Mode lmargins

margins

borders

borders

padding

padding

CONTENT

marg in - top ( l e f t ,bo t tom, r i gh t )

specify margins in measurements or percentages

body { background-color: black; background-image: url(image.gif); background-repeat: repeat-y; background-attachment: fixed; background-position: top right; margin-left: 15px;}

padd ing - top ( l e f t ,bo t tom, r i gh t )similar to cell padding of tables.

You can add padding to any element.

p { padding-top: 15px; padding-left: 15px;}

border

used to draw a border around your element. Border styles include solid, dashed, dotted.

p { padding-top: 15px; padding-left: 15px; border: 2px solid red;}

Resources

Tops ty l e CSS ed i tor

http://www.bradsoft.com

Onl ine Resources

• http://www.alistapart.com

• http://www.meyerweb.com

• http://www.cssvault.com/resources.php

• http://www.mezzoblue.com/zengarden/resources

• http://www.w3.org/Style/CSS

• http://www.simplebits.com/css/publications/tips

• http://www.cssbeauty.com

• many more

QUESTIONS