With a little CSS, your xHTML pages will become mysterious shapeshifters! Like the styles on CSS Zen Garden, our pages will magically transform with a sleight of hand and some well-thought out code. Let’s begin!

Some More Selectors

Class – a custom selector that can be applied to other elements. It uses a “.” before the class name in the stylesheet.

.homepage { font-family:Arial; }

ID - Similar to a class in that it is a custom selector, but used in a different way. It is typically used only once in a document for something that is unique, wheras class can be used for a range of similar elements.

#container { margin:10px; }

Pseudo-class – used to specify a particular state of certain selectors (Ex. a:link, a:hover, a:active, a:visited)

a:hover { text-decoration: underline; }

Fact: LISTS ARE AWESOME.

Not only can you use lists in the body of a document to organize your work experience, hobbies, etc, but you can also use lists to create menus. They can run up and down, left to right, be with or without icons, etc. Let’s see how:

Making them inline:

li {
display: inline;
list-style:circle;
list-style-image: “http://www.url.com/image/list_image.jpg”;
}

CSS layout: The Box Model

Margin - Clears an area around the border. The margin does not have a background color, and it is completely transparent

• margin: 10px 20px 30px 40px; (top 10px, right 20px, bottom 30px, left 40px)
• margin: 10px 20px 30px; (top 10px, right left 20px, bottom 30px)
• margin: 10px 20px; (top bottom 10px, right left 20px)
• margin: 10px; (all 10px)

Border - A border that lies around the padding and content. The border is affected by the background color of the box

Padding – Clears an area around the content. The padding is affected by the background color of the box

Content – The content of the box, where text and images appear

Width – Add up the content + padding , border, and margins on both sides.

Visibility - hidden/visible;

Z-Index – Controls the way that the layers are stacked. Higher z-index means the further up the layer will be

Positioning:

• Relative – The box is positioned relative to where it would normally be.
• Absolute – The box is positioned in relationship to the window.
• Float  - Allows block-level elements to sit next to each other, but takes them out of the normal document flow.
• Clear – Clears the floated items so the document flow can continue.

Paper Prototype

• http://www.snyderconsulting.net/article_paperprototyping.htm
• http://www.alistapart.com/articles/paperprototyping/
• http://www.youtube.com/watch?v=OT3yYXkafy8&feature=related

Exercise:

Remake the following layouts

Assignment

1. Download the layout below and recreate it using the CSS that we learned in class. Read the chapter from CSS Mastery (photocopied handout) for useful tips. Upload it with an external css file onto your pratt server.
2. Read Ch. 4-6 in Don’t Make Me Think.
3. Read the article on A List Apart on Paper Prototypes.
4. Find a design/art portfolio site and break it down using a paper prototype.
5. Change it to suit your own portfolio site.