CLASSESREVIEW: HREF, CONTEXT, FILE STRUCTURE

BIG CAVEAT•Never cut and paste from a Powerpoint slide

•Punctuation is not the same

•Note that the “ is curly. It should not be in HTML

PUBLIC_HTML STRUCTURE

onyen

public_html

comp101

index.html

project1

index.html

project1.css

HREF FORMATS (HREF=“ “)To reference Use

Another file in the same folder file.ext

A file in a subfolder subfolder/file.ext

index.html in a subfolder subfolder

A file in a containing folder ../file.ext

An anchor point on this page (need an id!)

#anchor

The top of this page #

An anchor point on another page in same folder

file.ext#anchor

An external page (target=“_blank”) http://www.complete.url

CSS IN CONTEXT

• HTML used to structure the context

• Use that structure to format

• Structure tags: header, nav, main, div, section

MULTIPLE STYLES: CLASSESHTML: class=“name”

•Use names to imply content, not style

•Multiple ways to define

• Style that applies to only one element

• Style that applies to many elements

CLASS FOR ONE ELEMENT

•Name the declaration set for a specific selector (tag)

•HTML: class=“name”

•CSS: tag.namediv.intro{

text-align: center;}

<div class=“intro”></div>

CLASS FOR MANY ELEMENTS

•HTML: class=“name”

•CSS: .name

• Particularly useful for maintaining consistency

.intro{text-align: center;color: red;

}

<h1 class=“intro”>Header 1</h1><h2 class=“intro”>Header 2</h2>

USING CLASS AND PSEUDO

p.intro:first-letter {    color: red;

}

a.highlight:hover {    color: red;}

NESTED SELECTOR

•Only applies within context

•Avoids putting class= everywhere!

•Useful for formatting lists

•HTML: class=“name” only for encompassing

•CSS: tag.name tag

ul.horizontal { list-style-type: none;}ul.horizontal li { display: inline;}

SHORTHAND: MULTIPLE SELECTORS

h1 {

text-align: center;

}

h2 {

text-align: center;

}

h1, h2 {

text-align: center;

}

Two forms have same effectGood way to maintain consistency

REFERENCING IDS • id can also act as a class• But notice that you can only use it once on any page• Can repeat it on multiple pages

• To reference an id in CSS• #idname instead of .classname• All the same forms (one element, any element, context)

•Or limit ids to location and classes to format•can have both