Introduction toCascading

Style Sheets

Agenda!

• Theory of CSS

• Code, code, code

• “Boxes” concept

• Editing CSS in Dreamweaver

What are some of the similarities between:

a Word Document

and

a Web Page?

Differences?

image audio

style sheet javascript

video

HTML Document CSS Document

Headings Fonts

Colors

Background images

Borders

Margins

Padding

Letter Spacing

Positioning

Alignment

Stacking Order

More, More, More!

Image or Video

Placeholders

Paragraph text that’s lovely to read…

• Bulleted

• Lists

1. Numbered

2. Lists

HTML Document CSS Document

Headings Be Blue

Be Centered

Be Aligned Right

Image or Video

Placeholders

Paragraph text that’s lovely to read…

• Bulleted

• Lists

1. Numbered

2. Lists

Example:

http://www.msu.edu

CSS Showcase Examples

CSS Zen Garden

How does it work?

Changing Properties of an HTML Element

<p>Paragraph text.</p>

HTML document says:

Changing Properties of an HTML Element

p { color: red; }

“selector” “property” “value”

CSS document says:

The Result:

Paragraph text.

Creating your own “class”

.myClass { color: green; }

“selector” “property” “value”

CSS document says:

<p class=“myClass”>

Paragraph text.

</p>

HTML document says:

Creating your own “class”

The Result:

Paragraph text.

What if we combine what we have so far?

.myClass { color: green; }

p { color: red; }CSS

HTML<p class=“myClass”>Paragraph text.</p>

<p>Paragraph text.</p>

The Result

Paragraph text.

Paragraph text.

Other Examples

<table class=“myClass”>

<img class=“myClass”>

<object class=“myClass”>

HTML document says:

Remember, we can control a LOT with CSS!

• Background images & colors

• Letter spacing

• Margins and padding

• Borders

• Lists

• Positioning

Maintenance example

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

TitleTitle

Some random Some random text here. You text here. You can’t read it can’t read it anyway! Har anyway! Har har har! Use har har! Use Css.Css.

CSSCSS

“Boxes”

block level element(div, paragraph, heading)

content area

margin

border

padding

Box Example

block level element(div, paragraph, heading)

block level element(div, paragraph, heading)block level element(div, paragraph, heading)

Dreamweaver Examples & Workflow

Main Container

Sidebar Container

Main Content

Container

HTML Document CSS Document

<div id=“mainContainer”>

</div>

#mainContainer {

width: 780px;

margin: 0 auto;

}

Width = 780px

HTML Document CSS Document

<div id=“sidebar”>

</div>

#sidebar {

float:left;

width:200px;

}

Width = 200px

HTML Document CSS Document

<div id=“mainContent”>

</div>

#mainContent {

margin: 0 0 0 250px;

}

0

00250

Width automatically

fills theremaining

space

Margin of 250pixels on the

left side

Increase the“width” property

Increase theleft “margin”