CSS – 1h

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 XHTML for content CSS for presentation

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

It’s in all in the head!

Three ways of introducing styling 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 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 Priority: –Styling at tag takes highest priority –Then styling in the head –Last comes the stylesheet file

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 But, these rules are not enforced by all browsers

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.

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 {text-decoration:none;} a:hover {text-decoration: underline;} a:visited {color: #aaaaaa;} In the body: The style of this link uses pseudo-classes.

Pseudo-elements Similar to pseudo-classes Limited scope: –:first-letter –:first-line –:before (not supported yet) –:after (not supported yet)

Summary selector #id.class :pseudo-class

Where to reference / read more References: - W3schools - W3C

Example 1: text formatting Write a stylesheet that formats paragraphs as follows: -first line of each paragraph is indented by 10% of the length of a paragraph -The text colour is The font is arial