Recommended
More Related Content
What's hot
What's hot (20)
Similar to WEBD 162: Intro to CSS
Similar to WEBD 162: Intro to CSS (20)
Recently uploaded
Recently uploaded (20)
WEBD 162: Intro to CSS
- 1. WEBD 162 Week 5: Introduction to Cascading Style Sheets (CSS)
- 2. CSS Evolution CSS1: 1996 CSS2.1: 2011 CSS3: in progress
- 3. Why CSS? • Separates web page “appearance” from content for easier maintenance • Reusable styles – use to unify pages in a web site • DRY: Don’t Repeat Yourself
- 4. What does Cascading mean? • Different levels of style sheets can be applied to HTML • Default Browser style (User Agent) • Most general: The default if there is no specific style sheet • Author style • Web page author creates a style sheet to give HTML a particular look • Takes precedence over the Default Browser style • Most common • User style • The end user creates their own style sheet to override Author and Default Browser styles • One reason might be to accommodate impaired vision (larger font) • Least common • See Figure 2-1 Hierarchy of Styles on p.86 of textbook
- 5. CSS: Cascading Style Sheets • CSS is great because it separates style from structure • Ex: If you wanted to change all h2 tags from red to blue • Ex: www.csszengarden.com • 3 ways to apply CSS • In-line: single instance of a style • Embedded: style for a single file declared in <head> • External file: style for one or more files; linked in <head>
- 6. Anatomy of a CSS Rule
- 7. CSS Rules • selector • Which element is going to be affected? • The rightmost part of selector is the type of element • Everything to the left specifies which set of elements is affected • declaration block • There may be 0 or more declarations between the braces • declaration • Property • Which property of the element gets affected • Value • How that property (attribute) gets affected
- 8. “Cascading” Style Sheets • From least important to most important rules/style sheets: 1. User Agent (Browser) 2. User (You) style sheet 3. Author’s rules (Web page designer) 4. Author (Web page designer) !important declarations 5. User (You) !important declarations • http://www.w3.org/TR/CSS2/cascade.html • Note: CSS3 is not yet a formal standard • http://www.sitepoint.com/web-foundations/cascade/
- 9. Minimize use of !important • Using !important makes stylesheets hard to maintain • Can make it hard to track down rule conflicts • Useful in user stylesheets to accommodate users with special needs (e.g. larger fonts for vision impairment) • http://www.smashingmagazine.com/2010/11/02/the- important-css-declaration-how-and-when-to-use-it/ • https://css-tricks.com/when-using-important-is-the- right-choice/
- 10. Rule Inheritance • Simple case: • If a CSS rule for a selector is not specifically declared in the web page or associated CSS file • The CSS rule from the User Agent (browser) is inherited
- 11. Last Rule and Fallback Rule • If a CSS rule appears multiple times on a web page • Last rule in order of appearance takes effect • Unless there is a rule with higher specificity • If last rule cannot be applied, then next to last rule will take effect • Progressive Enhancement 2.1 p. 104