Cascading Style Sheets

CSS

Cascading Style Sheets

What is CSS?

CSS stands for Cascading Style Sheets (the page—or sheet—helps you create a style that will cascade across all associated web pages)

Like HTML, it is a languageIt is primarily used for layouts, colors, and

fontsIt can be applied to HTML, XML, XHTML and

some other languagesIt may be linked separately or embedded in

the <HEAD> section of your HTML

Why use CSS?

With style sheets, one only needs to specify such presentational preferences once, and the style can be applied to an entire site.

Style sheets also offer much more flexibility in terms of the presentation effects that they provide.

A style sheet is made up of style rules that tell a browser how to present a document.

CSS is validated in HTML 4, and some elements are valid in HTML 3.2.

Browsers that don’t support CSS will ignore it.

So CSS format looks like this:

Grouping selectors is CSS

In order to decrease repetitious statements within style sheets, grouping of selectors is allowed.

For example, all of the headings in a document could be given identical declarations through the use of combined selectors:

H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif } h1,h2,p

{color:green;}

A:link, A:visited, A:active {text-decoration: blink}

Examples of CSS Selectors & Properties

Body background image & color BODY { background: url(foo.gif) red; color: black }

Large drop cap first letter P:first-letter { font-size: 300%; float: left }

Link: A:link { color: red }

Active link: A:active { color: blue; font-size: 125% }

Visited link: A:visited { color: green; font-size: 85% }

Font Properties & Values

Family-name (Ariel, Times New Roman, Helvetica)

Generic-family (serif, sans serif, fantasy, monospace) P { font-family: "New Century Schoolbook", serif }

Style (normal, italics, oblique) H1 { font-style: oblique}

Weight (bolder, lighter, 100, 300, 600, 800, etc.) H1 { font-weight: 800 }

Size (xx-small, large, x-large, larger, 12pt, 80%) LI { font-size: 90%}

BG and Color Properties & Values

Color (specifies color of element) H2 { color: #000080 }

Background-color (specifies color of background) BODY { background-color: white }

Background-image (assigns an image to background) BODY { background-image: url(/images/foo.gif)}

Background-repeat (repeat-x, repeat-y, no-repeat) BODY { background: white url(candybar.gif);

background-repeat: repeat-x } Repeats image horizontally

Text Properties & Values

Text-decoration (underline, overline, line-through, blink) A:link, A:visited, A:active {text-decoration: none}

Vertical-align (sub, super, top, middle, bottom, 50%) IMG.middle { vertical-align: middle}

Text-align (center, justify, left, right) H1 { text-align: center}

Text-indent (any number) P { text-indent: 5em}

How to place your style sheet

Style sheets are linked to from your HTML page

Sheets should be saved as “style.css”The link indicates the HREF and type of file.In your document’s <HEAD> section, insert

the CSS link:

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">

Single or Multiple line CSS

Some CSS is written using multiple lines:h1 {

float: left; width: 155px; height: 50px; }

How you write your CSS is entirely up to you, but multi-line CSS makes scanning for selectors, properties, and values much easier

It's good practice to place a semicolon after every declaration, including the last one so you can easily add properties

Here’s some fun CSS

Custom cursor { cursor: url(mycursor.cur) } Replace “mycursor.cur” with your file name (must be .cur or .ani

file) Downloadable .ani here: http://www.draac.com/cursors/index.html

Dotted underline A:hover { COLOR: #518293; border-bottom:1px dotted #FFFFFF;}

Change the browser’s scrollbar {scrollbar-face-color: #000000; scrollbar-shadow-color:

#BED8BF; scrollbar-highlight-color: #BED8BF; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000; scrollbar-arrow-color: #BED8BF}

Documents

Cascading Style Sheets