Cascading Style Sheets - Overview

Why CSS?

• Integrate styles with your HTML
• Separate content from presentation
• Apply different styles to same content in different media: Web browser, cell phone, auditory, print
• Adherence to standards

CSS does take longer at the beginning

• Takes longer to plan the Web site
• Takes longer to set up the Web site
• However, CSS vastly reduces maintenance time
• Alter 10,000 Web pages by making one change on one CSS page!
• Maintenance is the hidden part of the iceberg
• Will take up most of your time
• Most people never plan for it, however

What does CSS look like?

• In HTML, the basic syntax is: <element attribute="value">
• In CSS, the basic syntax is: selector {property:value;}
• selector {property:value;}
selector: describes the HTML you wish to style
property: describes the thing you want to change in the HTML
value: describes the actual formatting you want

• Example: p {color:red;}
selector = “p” = you wish to alter the <p> element
property = “color” = you want to change the color of text inside <p> ... </p>
 value = “red” = you want the color of the text to be red

Selector can be any one of the following:

• HTML element
• Affects every instance of an element
• Example: p {color:red;}
• Class: Affects multiple elements you associate with the class: Example: .attention {color:red;}
• ID: Affects one unique element per page with the ID : Example: #attention {color:red;}

HTML element Example: p {color:red; font-weight:bold;}
• Results: every <p> ... </p> will be red & bold
• if you want more than 51% of all <p> elements to be red and bold, then go ahead and use
“p {color:red; font-weight:bold;}”
• Used when you want to affect every instance of an element
• Advantages: changes every instance of the selected HTML element
• Disadvantages: changes every instance of the selected HTML element
• Use this with caution!

Class Example (note the dot): .attention {color:red; font-weight:bold;}
• HTML results (note the lack of a dot!): <p class="attention"> ... </p> is red & bold , <p> ... </p> is not
<td class="attention"> ... </td> is red & bold, <td> ... </td> is not
<hr class="attention"> does nothing

Rules for Class Names
• No spaces or underscores
Bad class names: .author name, .#1_title
Good class names: .authorName, .title1, .footnote
• Class names should describe function, not appearance
Bad class names: .bold, .small, .bigRed
Good class names: .emphasis, .title, .footnote

What if you want a class to only work inside a particular HTML element?
• Do this in CSS:
p.title {font-weight:bold; text-align:center; font-size:16px; font-family:"Times New Roman",Times,serif;}
• Do this in HTML
<p class="title">Madam, I'm Adam</p>
This is used when you want to define a unique style for an appropriate element, once per page only
• Example (note the pound sign!):
#navigation {color:#00FF00; font-size:14px;}
• HTML results (note the lack of a pound sign):
<p id="navigation"> ... </p> is green & 14px
<p> ... </p> is not
OR ...
<td id="navigation"> ... </td> is green & 14px
<td> ... </td> is not
• Remember: only once per page!

Contextual Selectors
• Example: td p {font-size:10px;}
Meaning:
any <p> inside a <td> will be 10px
Any other <p> is unaffected
• <span> & <div> were introduced as HTML elements designed solely as selectors for CSS
• All other HTML elements do something even if they do not have attributes & values
<p>, for instance, creates a paragraph
<td> creates a table cell
• 2 exceptions: <img> & <a>
• <span> & <div> by themselves, however, do nothing on a Web page
They MUST have an CSS-based attribute/value pair (class="x" or id="x" or style="x") to do anything productive

• HTML elements in <body> are either block-level or inline
• Block-level
General purpose: describe structure of document
In the browser, block-level elements begin on a new line
Defines a large section of a document
Can contain inline & block-level elements
Ex's: blockquote, h1, li, ol, p, pre, table, td, ul

• Inline
General purpose: describe appearance of document
Can contain inline elements; CANNOT contain block-level elements
Defines a smaller section inside another section
Ex's: a, b, br, font, i, img

• Inline HTML element
• <span> ... </span> does nothing
• Use <span> to hold attribute/value pairs relevant to CSS:
Example: <p>Steve is the <span class="emphasis">man</span>.</p>

• Block-level HTML element
• <div> ... </div> does nothing
• Use <div> to hold attribute/value pairs relevant to CSS:
<div class="navigation"><p class="off"><a href="index.htm">Home</a></p>
<p class="on"><a href="contact.html">Contact</a></p>
<p class="off"><a href="widget.html">Widgets</a></p>
</div>

<p class="sidebarTitle">Sidebar Title</p>
<p class="sidebarText">
This is some text inside a sidebar.
It is very <span class="emphasis"> important</span> that you understand the difference between span and div, or you are <span class="emphasis"> out of luck</span>!</p>
</p>

• Consider this CSS:
p {font-family:"Times New Roman",serif;font-size:12px;}
.emphasis {font-weight:bold;}

• Also consider this HTML (don't worry about <span> for now):
<p>And they called her <span class="emphasis">Zena</span>.</p>
"Zena" is going to be Times New Roman, 12px, & bold – why?
• A selector inside a selector inherits the outermost selector's property values, unless specifically overridden

• C inside B inside A:<a><b><c></c></b></a>
B inherits A
C inherits B & A
However ...
If A says font-size:12px & C says font-size:10px, then C will override A
• The closest selector being affected by the CSS wins

1.Inline styles 2.Embedded styles 3.Linking to external styles
Before: <p><font face="Times New Roman, Times, serif" size="12" color="red">Steve is your man.</font></p>
After, using the style attribute:
<p style="font-family:'Times New Roman', Times, serif; font-size:12px; color:red;"> Steve is your man. </p>
• Quick & easy to create, but difficult & time-consuming to manage
• Must repeat over and over for every element (if you want every <p> on a page to be red, bold, & Times New Roman ...)
• Can't change the style according to the media, so styles apply to all media
• Doesn't really separate content & presentation

Use inline styles for unique instances
• Place <style> ... </style> in <head>
• Example:
<head>
<style type="text/css">
p {font-family:Verdana,sans-serif;
font-size:12px;}
.emphasis {font-weight:bold;}
</style>
</head>

• Embedded styles are great for one page, but they rapidly become difficult to manage on multiple pages

Create an external style sheet: a text file ending in ".css"
• Link to external style sheet on all pages in site:
<head>
<link rel="stylesheet"
type="text/css"
href="address/to/style/sheet.css">
</head>
• Path to CSS file can be any of the following:
• Relative path: href="client.css"
• Useful only if all your files are in the same directory, which is not good practice
• Absolute path: href="http://www.client.com/css/client.css"
• All the disadvantages of absolute paths, so avoid href="/css/client.css"
• Absolute path with advantages of relative path
• I always place a css directory in my root directory, and I never move it
• Example, saved as "tl110.css":
/* CSS for TL 110; Created 20 Jan. 2009 */
/* Common */
p, blockquote, td {font•family:Verdana,Arial,sans-serif; font•size:12px;}
.emphasis {font-weight:bold;}
/* Navigation */
.on {font-size:14px; font-weight:bold;}
.off {font-size:14px;}

• Use comments in CSS for the same reason you use them in HTML
Notes to yourself & others , Debug: comment out troublesome CSS for testing

• HTML comments:
<!-- blah blah blah html html html blah blah blah html html html -->

• CSS comments:
/* blah blah blah css css css blah blah blah css css css */