Part 1: CSS - Why? - How it works - Writing rules - Examples

Why style sheets?

Without stylesheets proprietary HTML extensions making text into images proliferate use of "spacer" GIF images deprecated HTML elements and/or attributes using tables for layout General lack of flexibility

Stylesheets HTML for content CSS for presentation

With stylesheets Separation of content and presentation Increased flexibility Increased accessibility Simple yet powerful

Example The Zen Garden (showcasing various CSS styles) W3 core stylesheets: Doing it ourselves …

It ’ s in all in the head!

Three levels of separation 1.style attribute 2.style element 3.Link element

1. Style attribute This is a paragraph formatted using CSS.

2. Style element In head: p { color: red; font-family: helvetica; } In body: This is a paragraph formatted using CSS.

3. Link element In head: In style.css: p{ color: red; font-family: helvetica; }

CSS Rules

CSS Rule Rule p { color: red;} Selectors and Declarations p{ color: red;} Selector: p Declaration : {color: red;} Properties and Values color: red Property: color Value : red

Combining rules p{color: red;} p{font-family: helvetica;} ⇕ p{ color: red; font-family: helvetica; }

Combining selectors h1 {color: red;} h2 {color: red;} h3 {color: red;} h4 {color: red;} ⇕ h1, h2, h3, h4 {color: red;}

Inheritance What happens if you have (head): body {color:blue;} em {color: red;} And (body): Here’s a short paragraph.

Inheritance Rules are inherited from parent Unless overwritten specifically

Problem Ex: different “ types ” of paragraphs

Solution id and class

id In the head: p{color:black;} #quote{font-style:italic;} In the body: Here's a short paragraph formatted in a standard way. Here's a type of paragraph that is intended to be displayed in italic.

class In the head: p{color:black;}.quote{font-style:italic;} In the body: Here's a short paragraph formatted in a standard way. Here's a type of paragraph that is intended to be displayed in italic. Here's a section of text. Using a unique class identifier, the previous paragraph and the current div share the same formatting property.

Differences between class and id id applies to a single element, class to any element Only one id per element, several classes per element These rules are not enforced by all browsers, but that’s no help when you’re designing a site.

Problem Ex: format all children of in a particular way

Solution Contextual selectors

In the head: div em{color: blue;} p em{color: green;} In the body: Here is one context for this em tag. Here is another context for this em tag.

Problem Ex: I want links NOT to be underlined, except when the mouse hovers over them.

Solution Pseudo-classes

Used to represent properties of a limited number of elements: Used essentially for links Selector:pseudo-class {property: value;}

Pseudo-classes In the head: a:link {text-decoration:none;} a:visited {color: #aaaaaa;} a:hover {text-decoration: underline;} a:active {color: red;} n.b. The order "link, visited, hover, active" is critical. In the body: The style of this link uses pseudo-classes.

Pseudo-elements Similar to pseudo-classes Limited scope: – :first-letter – :first-line

Summary selector #id.class :pseudo-class

Question Why cascading?

Cascading Stylesheet Publisher/reader Inheritance Order (last rule has priority) Implication: Prefer relative to absolute values.

Writing rules You know how it works You simply have to write rules: property: value

Property:value pairs References: - W3schools - W3C