Castro Chapter 7


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Castro Chapter 7

  1. 1. STYLE SHEETBUILDING BLOCKSHTML5 & CSS Visual Quickstart GuideChapter 7
  2. 2. Our Special Guest: the Cascading StyleSheet• HTML gives Web pages their basic structure • Cascading Style Sheets (CSS) defines their appearance• What is a style sheet? • A text file containing one or more rules that determine how certain elements in your Web page should be displayed. • Done via properties and values• Currently, best supported version of CSS is CSS 2. • CSS 3 is catching up! • Modern browsers already support several CSS3 components
  3. 3. What Can I Do With CSS?• CSS properties can control: • Font size & color • Layout properties (like positioning and float) • Print controls for deciding where page breaks should appear • Dynamic properties, which allow items to appear & disappear • Useful for creating drop-down menus and other interactive components.
  4. 4. Constructing a Style Rule• Each style rule has two main parts: the selector and the declaration. • Selector determines which elements are affected by the rule • Declaration specifies just what should be done through one or more property/value pairs.• To construct a style rule: • selector { property: value; } • h1 { color: red; } • h1 { color: red; background: yellow; }• Can add extra spaces, tabs, or returns to keep style sheet readable• Missing (or duplicate) semicolons can (and often do!) break the style rule!
  5. 5. Adding Comments to Style Rules• Commenting your style rules is even more important than commenting your HTML.• Done differently than in HTML—CSS commenting is more like C or C++ commenting • /* This is a comment in CSS */• May include returns, so your comment can span several lines• Comments are a great way to temporarily disable style rules!• No nested comments!
  6. 6. When Rules Collide: the Cascade• Quite often, it will be possible for more than one style rule that applies to a given element • Every browser has a default style sheet • You can write style rules and apply them to a specific HTML element right in the code • You might have style rules at the type of your document • You might import style rules from another file • Some browsers allow your visitors to create and apply their own style sheets to any pages they visit • Some styles are inherited from parent element to child.• This creates a collision
  7. 7. How to Decide Which Rule to Follow?• CSS uses principle of the cascade to determine this • Takes into account inheritance, specificity, and location in order to determine which of a group of conflicting rules should win out• Follows those principles in that order! • Specificity is more important in CSS than inheritance. • Location is more important than specificity.
  8. 8. Inheritance• Many CSS properties are inherited by the descendants of those elements • Remember our discussion of parents and children back at the beginning of the semester? Yeah…we‘re back to that. • Not all CSS properties can be inherited (border cannot be inherited.) • Individual section of text covering each property (and Appendix B) details whether or not a property can be inherited.• For example, you could set a rule that says every <p> element will be blue. Inside one of your <p> elements, you have a <em> element. What color will the <em> element be, if you don‘t have a rule for <em>?
  9. 9. Specificity• When more than one rule is applied to an element, the law of specificity states that the more specific the selector, the stronger the rule.• If one rule states that all h1 elements should be blue, but a second rule states that all h1 elements with a class of Spanish should be red, the second rule overrides the first for all those h1 elements whose class is Spanish.• Important note: id attributes are considered the most specific, since they‘re unique in a document!• For the exact rules of calculating specificity, see Section 6.4.3 of the CSS specifications •
  10. 10. Location• If specificity isn‘t enough to determine a winner among competing rules, location trumps ‗em all • The location of the rule breaks the tie• Rules that appear later have more weight • Rules applied locally (right inside the HTML element) are considered to appear after rules at the top of the HTML document • The basic rule is this: all else being equal, the later the style appears, the more precedence or importance it has
  11. 11. Visualizing Location Imported Style Sheet Rules Style Rules Imported by Other Imported Style Sheets Style Rules in <head> of Web Page Style Rules in the Element Itself Rules with !important at the end.
  12. 12. A Property‘s Value• Each CSS property has different rules about what values it can accept: • Some properties only accept one of a list of predefined values. • Others accept numbers, integers, relative values, percentages, URLs, or colors. • Some can accept more than one value.• Inherit value: use for any property value when you want to explicitly specify that the value for that property should be the same as that of the element‘s parent.• Predefined Values exist for most CSS properties: • The display property can be set to block, inline, list-item, or none • Difference between HTML and CSS: predefined values cannot be enclosed in quotation marks!
  13. 13. A Property‘s Value (cont‘d)• Many CSS properties take a length for their value• All length values must contain a quantity and a unit, with no spaces between them • 3em • 10px• Some length types are relative to other values • An em is usually equal to the element‘s font-size • 2em would mean ―twice the font size.‖ • Pixels (px) are relative to the resolution of the monitor • Most monitors display 80ppi (but range from 72ppi to 96ppi) • 16 pixels is about 1/5 of an inch (0.5cm)
  14. 14. A Property‘s Value (cont‘d again)• There are also absolute units • inches (in) • centimeters (cm) • millimeters (mm) • points (pt) • picas (pc) • Only use absolute units when the size of the output is known, as with the printed page.• Percentage values, like 65%, work like ems—they‘re relative to some other value
  15. 15. A Property‘s Value (cont‘d for the lasttime!)• A few CSS properties accept a bare number as a value. • line-height • line-height: 1.5; • z-index • There are others, but they‘re mostly used for print and aural style sheets and are not yet well supported• Some CSS properties allow you to specify the URL of another file • Use url(file.ext) where file.ext is the path and file name of the desired document. • background: url(bg_flax.jpg); • You can use quotation marks around the file name, but they‘re not required. • But! There cannot be any space between the word url and the opening parentheses!
  16. 16. CSS Colors• Several ways to specify colors for CSS properties • One of 16 predefined color names • color: yellow; • Specifying the red/green/blue amounts • color: rgb(35%, 0%, 50%); • Your text puts the % before 35; this might work in some browsers, but it‘s not universally supported! • color: rgb(89, 0, 127); • Specifying the hexadecimal value • color: #59007F;
  17. 17. CSS3 Color Options — RGBA• RGBA is the same as RGB, except… • The A stands for alpha transparency • Decimal from 0 to 1 after red, green, blue values • property: rgba(red, green, blue, alpha transparency);• Closer to 0 the alpha setting, the more transparent • 0 is completely transparent • 1 is completely opaque
  18. 18. RGBA Examples• /* no transparency, so the same as rgb(89, 0, 127); */ background: rgba(89,0,127,1);• /* completely transparent */ background: rgba(89,0,127,0);• /* 25% transparent */ background: rgba(89,0,127,0.75);• /* 60% transparent */• background: rgba(89,0,127,0.4);
  19. 19. CSS3 Color Options – HSL & HSLA• Hue, Saturation, Lightness • Hue: number from 0-360 • Saturation & Lightness: percentages from 0-100 • color: hsl(282, 100%, 25%);• HSLA adds alpha transparency • /* 25% transparent */ h1 { background: hsla(282,100%, 25%,0.75); }
  20. 20. A Warning on CSS3 Color Options• No version of Internet Explorer prior to IE9 supports rgba, hsl, or hsla• Ignores any declaration it doesn‘t understand• Best workaround is to provide a fallback color declaration • background: #59007f; /* for pre-IE9 */ background: rgba(89,0,127,0.75); /* All other browsers */
  21. 21. Sixteen Predefined Colors Aqua Black Blue Fuchsia #00FFFF #000000 #0000FF #FF00FF Gray Green Lime Maroon #808080 #008000 #00FF00 #800000 Navy Olive Purple Red #000080 #808000 #800080 #FF0000 Silver Teal White Yellow #C0C0C0 #008080 #FFFFFF #FFFF00