Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober [email protected].

9
Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober [email protected]

Transcript of Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober [email protected].

Page 1: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.

Cascading Style Sheets

Class 2, Lecture 3

Rachel A Ober

[email protected]

Page 2: 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

Page 3: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.

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.

Page 4: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.

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.

Page 5: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.

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!

Page 6: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.

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?

Page 7: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.

Example 1

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

Page 8: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.

Common Layout Suggestions

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

Page 9: Cascading Style Sheets Class 2, Lecture 3 Rachel A Ober rober@ccs.neu.edu.

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