lec 6 Advance CSS (Introduction CSS Part B).pdf
- 1. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar Chapter 4 1 2 3 4 5 6 What Is CSS? CSS Syntax Location of Styles Selectors The Cascade: How Styles Interact The Box Model 7 CSS Text Styling 8 Summary
- 2. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Cascade: How Styles Interact The “Cascade” in CSS refers to how conflicting rules are handled. The downward movement of water down a cascade is meant to be analogous to how a given style rule will continue to take precedence with child elements CSS uses the following cascade principles to help it deal with conflicts: • inheritance, • specificity, and • location CSS
- 3. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Cascade: How Styles Interact Many (but not all) CSS properties affect not only themselves but their descendants as well. Are inheritable: • Font, • color, • list, and • text properties Not inheritable: • layout, • sizing, • border, • background, and • spacing properties Inheritance
- 4. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Cascade: How Styles Interact Inheritance
- 5. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Cascade: How Styles Interact Inheritance
- 6. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Cascade: How Styles Interact Specificity
- 7. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Cascade: How Styles Interact Specificity
- 8. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Cascade: How Styles Interact Specificity Algorithm
- 9. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Cascade: How Styles Interact Location
- 10. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar Chapter 4 1 2 3 4 5 6 What Is CSS? CSS Syntax Location of Styles Selectors The Cascade: How Styles Interact The Box Model 7 CSS Text Styling 8 Summary
- 11. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Box Model Overview
- 12. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Box Model • Background • Background-attachment • Background-color • Background-image • Background-position • Background-repeat • Background-size Background
- 13. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Box Model Background
- 14. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Box Model Collapsing Margins
- 15. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Box Model border-top-color: red; /* sets just the top side */ border-right-color: green; /* sets just the right side */ border-bottom-color: yellow; /* sets just the bottom side */ border-left-color: blue; /* sets just the left side */ Alternately, we can set all four sides at once: border-color: red; /* sets all four sides to red */ border-color: red green orange blue; /* sets 4 colors */ CSS TRBL Shortcut
- 16. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Box Model Box Dimensions
- 17. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Box Model Limitations of Height Property
- 18. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Box Model Overflow Property
- 19. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Box Model Box Sizing Using Percents
- 20. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar The Box Model Inspecting CSS using modern browsers
- 21. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar Chapter 4 1 2 3 4 5 6 What Is CSS? CSS Syntax Location of Styles Selectors The Cascade: How Styles Interact The Box Model 7 CSS Text Styling 8 Summary
- 22. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar CSS Text Styling Property Description font A combined shorthand property that allows you to set the family, style, size, variant, and weight in one property. style weight variant size font-family font-family Specifies the typeface/font to use. More than one can be specified. font-size The size of the font in one of the measurement units font-style Specifies whether italic, oblique, or normal font-variant Specifies either small-caps text or none font-weight Specifies either normal, bold, bolder, lighter, or a value between 100 and 900 in multiples of 100, where larger number represents weightier (i.e., bolder) text. Font Family
- 23. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar CSS Text Styling Specifying the Font Family
- 24. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar CSS Text Styling Different Font Families
- 25. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar CSS Text Styling Font Sizes
- 26. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar CSS Text Styling Font Face
- 27. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar CSS Text Styling Just as there are properties that affect the font in CSS, there are also a range of CSS properties that affect text independently of the font. • letter-spacing • line-height • text-align • text-decoration • text-diretion • text-shadow • … Paragraph Properties
- 28. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar CSS Text Styling Just look at text-shadow
- 29. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar Chapter 4 1 2 3 4 5 6 What Is CSS? CSS Syntax Location of Styles Selectors The Cascade: How Styles Interact The Box Model 7 CSS Text Styling 8 Summary
- 30. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar Summary absolute units attribute selector author-created style sheets box model browser style sheets cascade class selector collapsing margins combinators contextual selector CSS CSS3 modules declaration declaration block descendant selector element box element selectors em units embedded style sheets external style sheets Key Terms
- 31. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar Summary generic font grouped selector id selector inheritance inline styles internal styles location margin padding percentages presentation property:value pair pseudo-class selector pseudo-element selector relative units rem units responsive design selector specificity style rules TRouBLe universal element selector user style sheets vendor prefixes web font stack x-height Key Terms
- 32. Fundamentals of Web Development - 2nd Ed. Randy Connolly and Ricardo Hoar Questions