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 language It is primarily used for layouts, colors, and fonts It can be applied to HTML, XML, XHTML and some other languages It may be linked separately or embedded in the 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: # } 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 section, insert the CSS link: 

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: 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}