HTML - Quiz #2 Attendance CODE: 803655 .

HTML - Quiz #2Attendance CODE: 803655

http://decal.aw-industries.com

Web Design:Basic to Advanced Techniques


Today’s AgendaQuiz

Announcements

CSS Introduction

Software

AnnouncementsMini Project 1 due this morning at 12AM

Mini Project 2



Spring 2010Tuesdays 7-8pm

200 Sutardja-Dai Hall

CSS Introduction


What is CSS?Takes our plain-Jane HTML docand 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; }

selector property value

Rule

Every declaration

Terminated by ;

Style.css

CSS SelectorsWe 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 SelectorWe can select HTML elements by their element type

HTML Document

<h1>Image Page</h1>

<img src=“image.gif” />

Here’s a description of the image you see above

CSS Style Sheet

img {

border: 1px solid #333;

}

p {

font-color: #333;

}

Class / ID SelectorWe 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 

IDUsed to identify ONE particular HTML elementMust be unique for entire document



ClassUsed to identify ONE or MORE HTML elements

Universal SelectorWe can select all HTML elements

HTML Document

<h1>Image Page</h1>

<img src=“image.gif” />

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<a href=“URL”>Link</a>

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 SelectorsDescendant (nested)

Selects by nested structurep span { color: red; } .description a { color: blue; }

CombinedSelects between elements of same classp.info { color: red; }a.info { color: #FFF; }

GroupedApplies style to lista, p, span { color: red; }

para<a class=“info” href=“#”>link</a>

<a href=“#”>a

link</a> a

span


link</a> a

span


link</a> a

span



a para<a href=“#”>a link</a>a span

a para<a href=“#”>a link</a>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; } TEXTTEXTTEXT

Attaching CSS StylesAfter we write our CSS rules we need to link our rules to

our HTML documentExternal Style Sheets Inline StylingEmbedded Style Sheets

HTML CSS HTML & CSS

External Style Sheets

<head>

<link href=”/style.css” rel="stylesheet" type="text/css" />

</head>

•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

<head>

<style type="text/css”>p { color: red; }

</style></head>

Multiple Style SourcesHTML documents can include multiple sources of CSS

stylesA 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<head>

<link href=”/style.css” rel="stylesheet" type="text/css" /> <link href=”/style2.css” rel="stylesheet"

type="text/css" /> <link href=”/style3.css” rel="stylesheet"

type="text/css" /> </head>

Cascade OrderProximity: Inline > Embedded > External

Last style winsRules in last style sheet overwrite previous rules

Style.cssp { color: red; font-weight: bold}

Style2.cssp { color: green; }

Style3.cssp { color: blue; }

some text



some text



some text



some text

SoftwareDreamweaver’s tools

Firebug for FirefoxLets you modify CSS in realtimehttp://getfirebug.com/

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;

HTML - Quiz #2 Attendance CODE: 803655 .

Documents

Transcript of HTML - Quiz #2 Attendance CODE: 803655 .