Cascading Style Sheets

Class 2, Lecture 3

Rachel A Ober

rober@ccs.neu.edu

Using “display: inline”

W3 Schools does it best… http://www.w3schools.com/css/tryit.asp?filen

ame=trycss_display

How to Structure

If you’ve peeked at some of my code, you’ll see I make use of <div> tags a lot.

You can also use <span> tags for short passages you’d like to change.

Possible Structures

Separate Header elements from Content and Footer.

You may also want to include a Navigation element.

Break up your page into logical organizations. This way, you can manipulate many different parts of the document or the whole document.

Design

If you have a good document design, you can just change the style sheet whenever you want to change your design. You won’t even have to touch your HTML again!

Tables vs. DIVs

Tables aren’t very flexible when designing pages.

DIV tags can be directly manipulated through CSS.

What if your manager wants the design of a page to change and everything is controlled by tables? What if he wants the bottom row of every design to now be at the top?

Example 1

http://cpu.rachelober.com/lecture3/example1.html

Common Layout Suggestions

http://www.intensivstation.ch/en/templates/

Lab #3: Designing Without Tables

http://cpu.rachelober.com/lab3 Objective:

Change a <table> layout into a <div> layout! Stock Images for use:

http://cpu.rachelober.com/stock