HTML with Style!

What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser how to present information.

Style Assignment Syntax Target propertyvalueproperty2value2 p { background: YELLOW }

Identifying Targets 1 Selector Class IDDefines 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 ContextualDefines a style based on the order of selectors, going from right to left. p em strong { background: YELLOW } p em { background: YELLOW }

Examples

Margin Basic Property Groups Font ₪Ω€ Text T he Background Padding The contents go here! Border Box Model

Internal Style Sheets

Local (Inline) Styles

External Style Sheets

CSS Order Matters

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.