HTML - Quiz #2 Attendance CODE:

Today’s Agenda Quiz Announcements CSS Introduction Software

Announcements Mini Project 1 due this morning at 12AM Mini Project 2

Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall CSS Introduction

What is CSS? Takes our plain-Jane HTML doc and turns it into this…

What is CSS? …continued Cascading Style Sheets Works by associating styles with HTML elements Allows us to separate display code from our structural code (HTML) Allows us to format documents beyond what HTML would allow on its own Avoids repetition of code Smaller files Less bugs Consistent look Standardized by WC3 (W3.org) Online validator

CSS Syntax CSS rules go into a file with.css extension body { font-weight: bold; } selectorpropertyvalue Rule Every declaration Terminated by ; Style.css

CSS Selectors We need a way to label the HTML elements we want to style so we can refer to them in our separate CSS code Style.css #myEle { font-weight: bold; font-size: 20px; }

Element Selector We can select HTML elements by their element type HTML Document Image Page Here’s a description of the image you see above CSS Style Sheet img { border: 1px solid #333; } p { font-color: #333; }

Class / ID Selector We can tag HTML elements by giving them an # id or. class HTML Document Here’s a description of the image you see above Here’s the photo equipment I used Here’s where I took the photo CSS Style Sheet #description { font-color: red; }.extraInfo { font-color: blue; }

Class / ID Selector..continued ID Used to identify ONE particular HTML element Must be unique for entire document Class Used to identify ONE or MORE HTML elements

Universal Selector We can select all HTML elements HTML Document Image Page Here’s a description of the image you see above Here’s the photo equipment I used Here’s where I took the photo CSS Style Sheet * { font-family: verdana, arial, helvetica, sans-serif; color: #000; }

Pseudo Class Selector Link a:visited { color: red; } a:hover { font-weight: bold; } a:active { color: blue; } :visited After a link has been clicked :hover When your mouse cursor is over the HTML object :active While a link is being clicked

Combining Selectors Descendant (nested) Selects by nested structure p span { color: red; }.description a { color: blue; } Combined Selects between elements of same class p.info { color: red; } a.info { color: #FFF; } Grouped Applies style to list a, p, span { color: red; } para link a link a span a link a span a link a span para link para link a para a link a span a para a link a span

Specificity Text p { color: red; }.para { color: blue; } #myPara { color: green; } What color is the text? GREEN

Specificity …continued #id >.class > element p { color: red; }.para { color: blue; } #myPara { color: green; } TEXT

Attaching CSS Styles After we write our CSS rules we need to link our rules to our HTML document External Style Sheets Inline Styling Embedded Style Sheets HTML CSSHTML & CSS

External Style Sheets ”/style.css Most common way to link CSS to HTML CSS and HTML in separate files Same CSS rules throughout site Best practice!

Inline Styling Useful for single cases Poor practice to use this extensively throughout site If applying same style to multiple elements, consider using class instead red text

Embedded Style Sheets Like inline styling, only use this for exceptions If elements in this page are styled differently than the rest of the site Try to avoid ever using this Better option is to link to another.CSS file p { color: red; }

Multiple Style Sources HTML documents can include multiple sources of CSS styles A HTML document may link to any number of external style sheets In addition to those style sheets, the documents may use inline styling and embedded style sheets SomeHTMLDoc.html ”/style.css ”/style2.css ”/style3.css

Cascade Order Proximity: Inline > Embedded > External Last style wins Rules in last style sheet overwrite previous rules Style.css p { color: red; font-weight: bold} Style2.css p { color: green; } Style3.css p { color: blue; } some text some text some text some text

Software Dreamweaver’s tools Firebug for Firefox Lets you modify CSS in realtime

Useful CSS All Objects color: #FFF / #FFFFFF / white; font-size: 12px; font-weight: bold / normal; text-decoration: none / underline; background-color: #FFF / #FFFFFF / white; Block Objects margin: 10px 20px; padding: 10px 20px; background-image: url(‘/images/background.gif’); background-repeat: no-repeat / repeat-x / repeat-y / repeat; background-position: 10px 0px; border: 1px solid #000; text-align: left / center / right;