What you need to know about CSS for the CISC103 Final, Fall 2005

What CSS Is

CSS stands for "Cascading Style Sheets". It is a language that is used to control the visual appearance (style) of web pages.

How CSS Is Used

Inline, e.g. in a <div> or <span> tag, or other HTML element, for example <span style="color:red">Text</span>
In an embedded style sheet, i.e. a <style></style> element embedded in the <head> element of the document, where styles for elements and or classes are specified
In an external style sheet; a file with a .css extension (e.g. myStyles.css) that is linked to with a <link> element embedded in the <head> element of the document, for example: <link rel="stylesheet" type="text/css" href="cssPage.css" />

Inline CSS Examples

For inline CSS, span and div tags are very helpful. Here is a nice summary of span vs. div:

http://webdesign.about.com/cs/htmltags/a/aa011000a.htm

Note that you can use span or div, or you can apply CSS directly to any element by putting a style attribute directly on that element.

In fact, the main purpose of span and div is to be able to apply either a style attribute for use with CSS, or an id attribute for use with Dynamic HTML (via JavaScript, for example.)

Code	What it looks like	Comments
This changes the <span style="color:blue">color</span> of some text	This changes the color of some text.	The span element is used inside a paragraph.
<p style="color:red">This first paragraph is red.</p> <p style="color:blue; background-color:#CCCCFF;"> The second paragraph has blue on a light blue background</p> <p>The third paragraph uses default foreground and background colors</p>	This first paragraph is red. The second paragraph has blue on a light blue background The third paragraph uses default foreground and background colors	We use the style attribute of each paragraph to apply some CSS properties to that paragraph.
<div style="background-color:yellow"> <p>The first paragraph. </p> <p>The second paragraph</p> </div> <p>The third paragraph</p>	The first paragraph. The second paragraph The third paragraph	The <div> element is used to apply CSS properties to several block-level elements on a page (block level elements are paragraph-like things, including table, ol, ul, h2, etc... things that have line breaks between them.)

Code

What it looks like

Comments

This changes the
<span style="color:blue">color</span>
of some text

This changes the color of some text.

The span element is used inside a paragraph.

<p style="color:red">This first paragraph is red.</p>
<p style="color:blue; background-color:#CCCCFF;">
The second paragraph has blue on a light blue background</p>
<p>The third paragraph uses default foreground and background colors</p>

This first paragraph is red.

The second paragraph has blue on a light blue background

The third paragraph uses default foreground and background colors

We use the style attribute of each paragraph to apply some CSS properties to that paragraph.

<div style="background-color:yellow">
<p>The first paragraph. </p>
<p>The second paragraph</p>
</div>
<p>The third paragraph</p>

The first paragraph.

The second paragraph

The third paragraph

The <div> element is used to apply CSS properties to several block-level elements on a page (block level elements are paragraph-like things, including table, ol, ul, h2, etc... things that have line breaks between them.)

CSS Properties

CSS is specified with "properties". When you use Dreamweaver to type in the value of the style attribute, a list of legal properties pops up. If you type your XHTML by hand, you need to have a reference for CSS to look up the properties you need.

You should know a few basic CSS properties by heart. Here is the list of the ones you should know for the CISC103 final exam (this list is FINAL for Fall 2005).

Property	Example	meaning
color	color: red;	foreground color (e.g. red, yellow, blue, or #FFCCFF, #FFFFFF, #FF00CC, etc.)
background-color	background-color:yellow;	background color (e.g. red, or #FFCCFF, etc.)
text-align	text-align:center;	alignment of text (e.g. left, right, center)
font-family	font-family:sans-serif;	the font family to use (e.g. serif, sans-serif, mono)
font-size	font-size:1.5em;	the size (best expressed in "em", traditionally the width of an uppercase "M") Specifying in terms of "ems" means the size changes with the default text size being used.
font-weight	font-weight:bold;	possible values include: bold, normal
font-style	font-style:italic;	possible values include: italic, normal

Using CSS in a Style Sheet

Examples of what you'd see in a style sheet (either internal or external)

Things starting with a period (.) refer to "class" names... the class name is applied as an attribute of an HTML or XHTML element.

Things that don't start with a (.) refer to elements (e.g. p, li, strong, em) in the table below.

These can be combined, e.g. all em elements that are highlighted.

Example	meaning
td {font-family: Arial, sans-serif; font-size: 0.8em;}	make all td elements text size 0.8em in Arial if possible, otherwise any sans-serif font will do.
li strong {color: blue;}	any strong element that is inside a list item, make it blue For example, this strong text is not in a list here is a list it has some strong text in it
.highlighted {background-color: yellow;}	any element marked with class="highlighted" should have a background of yellow
em.highlighted {background-color: orange;}	any em element marked with class="highlighted", should be in orange instead of yellow

You should also know anything else that is in the lecture notes about CSS

For example lecture notes from 9/15, 9/20, 9/22, 9/27.