HTML with Style!

What is a Style Sheet? CSS?

Style Sheet

CSS Cascading Style Sheets A “language” for defining style rules.

Rules that tell the browser how to present information.

Style Assignment Syntax

Target property value property2 value2

p background: YELLOW

Identifying Targets 1

Selector

Class

ID Defines a style for a single element based on the element’s ID. (Avoid)

Defines a style for all elements of a given class.

Defines a style for all elements of a given type (e.g., all paragraphs).

Examples

Selector

Class

ID

Class

ID

Identifying Targets 2

Contextual Defines a style based on the order of selectors, going from right to left.

p em strong background: YELLOW

p em background: YELLOW

Examples

Examples

Margin

Basic Property Groups

Font

₪Ω€Text

T he

Background

Padding

The contents go here!Border

BoxModel

Internal Style Sheets

Local (Inline) Styles

External Style Sheets

CSS Order Matters

1

2

3

1

Why Style Sheets?

+ Flexible, powerful presentation.

+ Control – author, user, browser.

+ Clearly separates content and presentation.

+ Transition to future technologies.

– Can get confusing (e.g., conflicts)

div And span

• Both group information.

• Great for formatting all sorts of elements!

• div– Block level.

• span– Inline.

We have just skimmed the surface of CSS! Feel free to explore.

By the way, CSS3 is under development right now.