HTML - Quiz #2Attendance CODE: 715834

http://decal.aw-industries.com

Web Design:Basic to Advanced Techniques

AnnouncementsCourse FTP accounts set up

Enrollment should all be sorted out

Quizzes have been graded

Mini Project 1Extension on last week’s HTML lab, with CSS stylingDue next Monday!

Web Design:Basic to Advanced Techniques

Web Design:Basic to Advanced Techniques

Today’s AgendaQuiz

Announcements

CSS Introduction

CSS Practice

CSS Lab

Mini Project #1

Web Design:Basic to Advanced Techniques

Fall 2010Mondays 7-9pm

200 Sutardja-Dai Hall

CSS Introduction

Web Design:Basic to Advanced Techniques

What is CSS?Cascading Style Sheets

Separate structured content (HTML) from visual appearance (CSS) In good web design code, these should be COMPLETELY

separated (no formatting in the HTML!)

More formatting/styling options than HTML alone

Avoids repetition of code

What is CSS?<font color="#0000FF”>Emphasized Text<font>

This is regular text.

<font color="#0000FF”>Emphasized Text<font>

This is regular text.

…

…

What is CSS?<span class=‘emphasized’>Emphasized Text<span>

This is regular text.

<span class=‘emphasized’>Emphasized Text<span>

This is regular text.

span.emphasized{

color: #0000FF;

}

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

Useful CSS All Elements

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;

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

<p id=“myEle”></p>

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” />

<p>Here’s a description of the image you see above</p>

CSS Style Sheet

img {

border: 1px solid #333;

}

p {

font-color: #333;

}

Class / ID Selector <p id=“myUniqueElement”></p>

IDUsed to identify ONE particular HTML elementMust be unique for entire document Invalid XHTML if more than one element with same ID

<p class=“groupOfElements”></p>

ClassUsed to identify ONE or MORE HTML elementsGive multiple elements the same styling

Class / ID SelectorWe can tag HTML elements by giving them an #id or .class

HTML Document

<p id=“description”>Here’s a description of the image you see above</p>

<p class=“extraInfo”>Here’s the photo equipment I used</p>

<p class=“extraInfo”>Here’s where I took the photo</p>

CSS Style Sheet

#description {

font-color: red;

}

.extraInfo {

font-color: blue;

}

Universal SelectorWe can select all HTML elements

HTML Document

<h1>Image Page</h1>

<img src=“image.gif” />

<p id=“description”>Here’s a description of the image you see above</p>

<p class=“extraInfo”>Here’s the photo equipment I used</p>

<p class=“extraInfo”>Here’s where I took the photo </p>

CSS Style Sheet

* {

font-family: verdana, arial, helvetica, sans-serif;

color: #000;

}

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; }

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

<p class=“description”><a href=“#”>a

link</a> <span>a

span</span></p>

<p class=“description”><a href=“#”>a

link</a> <span>a

span</span></p>

<p class=“description”><a href=“#”>a link</a> <span>a span</span>

</p>

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

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

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

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

Specificity<p class=“para” id=“myPara”>Text</p>

p { color: red; }

.para { color: blue; }

#myPara { color: green; }

• What color is the text?

GREEN

#id > .class > element

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

our HTML documentExternal Style Sheets Inline StylingEmbedded Style Sheets

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

<p style=“color: red;”>red text</p>

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; }

<p style=“color: orange;”>some text

</p>

<p>some text

</p>

<p>some text

</p>

<p>some text

</p>