1. Neal Stublen nstublen@jccc.edu

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

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

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

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

7. 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 element directly within a : div>p { font-family: Verdana; } …

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

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

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

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

12. 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; } …

13. 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; } …

14. 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; } …

15. 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]

16. Many, Many More  Complete list available online http://www.w3schools.com/cssref/css_select ors.asp

17. Practice Activity  Practice using selectors to specify background colors  Does the ordering of selectors matter?

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

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

20. Using CSS Files  We can place CSS markup in the section or on an element  Disadvantages? Duplicated across pages Difficult to change

21. External CSS Files  tags in section  Multiple tags merge multiple CSS files

22. Import CSS Files  @import in the section @import “filename.css” @import url(filename.css)  Multiple tags merge multiple CSS files

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

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

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

26. Conditional Comments  Comments can help instruct Internet Explorer on how a site should be rendered code for IE-only code for non-IE-browsers  Used in or, not external CSS

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

28. Alternate CSS  Some CSS styles may be difficult for all users  Alternate CSS styles can provide larger fonts or high contrast color schemes  The browser will make the alternate style available to the user (possibly)

29. 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

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

32. Select Me Which selector specifies the anchor element? A..menu a B. a.menu C. a li ul.menu D. ul a Review

33. Select Me Which selector specifies the anchor element? A..menu a B. a.menu C. a li ul.menu D. ul a Review

34. First paragraph Select Me Which selector specifies the 2 nd paragraph? A. div p p B..header p>p C. div p+p D. #header p>p

35. Review First paragraph Select Me Which selector specifies the 2 nd paragraph? A. div p p B..header p>p C. div p+p D. #header p>p

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

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