Download presentation
Presentation is loading. Please wait.
Published byCandice Gibbs Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.