HTLM and CSS Advanced

Neal Stublen nstublen@jccc.edu HTLM and CSS Advanced

Course Road Map • Create web page layouts using CSS • Manage CSS • Test website validity • Create navigation menus using CSS • Incorporate meta content and multimedia

Chapter 2:Managing CSS

What’s Ahead? • Using CSS selectors • Where does CSS markup go? • Handling browser-specific issues • Making web sites accessible • Using alternate CSS

CSS Selectors • Simple CSS selectors • .class (element class) • .highlight { font-weight: bold; } • #id (element id) • #footer { font-size: 12px; } • element • body { background-color: white; } • * (all elements) • * { margin: 0; }

Multiple Elements • Apply a set of style attributes to multiple element types • element1, element2 (multiple elements) All <h1> and <h2> elements: h1, h2 { font-color: blue; } <h1>…</h1>…<h2>…</h2>

Parent-Child Attributes • Apply a set of style attributes to an element that is a child of another element type • element1>element2 (parent-child) Any <p> element directly within a <div>: div>p { font-family: Verdana; } <div><p>…</p></div>

Any Descendent • Apply a set of style attributes to an element type, but only within another specific element type • element1 element2 (any descendant) Any <a> element within a <div>: div a { font-family: Verdana; } <div>…<p>…<a>…</a>…</p>…</div>

Immediate Siblings • Apply a set of style attributes to an element that is placed directly after another element • element1+element2 (immediate siblings) Any <p> followed by a <div>: p+div { clear: both; } <p>…</p><div>…</div>

Older Sibling • Apply a set of style attributes to an element that is preceded by another element • element1~element2 (any sibling) Any <ul> preceded by <p>: ul~p { background-color: red; } <p>…</p>…<h2>…</h2>…<ul>…</ul>

Combining with Class • Combining selectors can mix class, id, and element selectors • .menu ul { … } • #footer a { … } • (Using Brackets)

Element with Class • Apply a set of style attributes to an element that has a specific class • element.class List items with the nav_menu class: li.nav_menu { font-color: blue; } <li class=“nav_menu”>…</li> <li class=“grocery_list”>…</li>

Element with Attribute • Apply a set of style attributes to an element that has a specific attribute • element[attribute] Any anchor tag with a target attribute: a[target] { background-color: yellow; } <a target=“_blank”>…</a> <a target=“_top”>…</a>

Element with Attribute Value • Apply a set of style attributes to an element that has a specific attribute value • element[attribute=value] Any anchor tag with a target attribute of “_blank”: a[target=_blank] { background-color: yellow; } <a target=“_blank”>…</a> <a target=“_top”>…</a>

Element with Partial Value • Apply a set of style attributes to an element that partially matches an attribute value • element[attribute^=prefix] • element[attribute$=postfix] • element[attribute*=contains]

Many, Many More • Complete list available online • http://www.w3schools.com/cssref/css_selectors.asp

Practice Activity • Practice using selectors to specify background colors • Does the ordering of selectors matter?

Practice Activity • Advanced Selectors, Activity 1 • Change link appearance (p.37)

What’s Ahead? • Using CSS selectors • Where does CSS markup go? • Handling browser-specific issues • Using alternate CSS

Using CSS Files • We can place CSS markup in the <style> section or on an element • Disadvantages? • Duplicated across pages • Difficult to change

External CSS Files • <link> tags in <head> section <link rel=“stylesheet” type=“text/css” href=“filename.css” /> • Multiple <link> tags merge multiple CSS files

Import CSS Files • @import in the <head> section @import “filename.css” @import url(filename.css) • Multiple <link> tags merge multiple CSS files

Practice Activity • External CSS, Activity 2 • Move styles to external CSS file (p.44)

Practice Activity • External CSS, Activity 3 • Use external CSS file on multiple pages (p.47)

Browser-specific CSS • Not all browsers agree • Sites should be tested with all the major browsers (old and new) that may access the site

Conditional Comments • Comments can help instruct Internet Explorer on how a site should be rendered   code for non-IE-browsers  • Used in <head> or <body>, not external CSS

Practice Activity • Conditional Comments, Activity 4 • Create styles for non-IE browsers (p.53) • http://www.quirksmode.org

Alternate CSS • Some CSS styles may be difficult for all users • Alternate CSS styles can provide larger fonts or high contrast color schemes <link rel=“alternatestylesheet” ... title=“High Contrast” /> • The browser will make the alternate style available to the user (possibly)

Practice Activity • Alternate CSS, Activity 5 • Link alternate CSS to site pages (p.60) • You may want to consider using cookies and server-side support to assist in providing alternate CSS

What’s Behind? • Using CSS selectors • Where does CSS markup go? • Handling browser-specific issues • Using alternate CSS

Review

Review <div> <ul class=“menu”> <li><a href=“…”>Select Me</a></li> </ul> </div> Which selector specifies the anchor element? A. .menu a B. a.menu C. a liul.menu D. ul a

Review <div class=“header”> <p>First paragraph</p> <p>Select Me</p> </div> Which selector specifies the 2nd paragraph? A. div p p B. .header p>p C. div p+p D. #header p>p

Review Which display property value can be used to create vertical menus? A. block B. inline C. vertical D. top bottom

HTLM and CSS Advanced