2. Our Special Guest: the Cascading Style
Sheet
• 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. 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. 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. 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. 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. 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. 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. 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
• http://www.w3.org/TR/CSS21/cascade.html#specificity
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. 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. 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. 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. 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. A Property’s Value (cont’d for the last
time!)
• 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. 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. 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. 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);
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 */
