Cascading Style Sheets Making the World Wide Web pretty since 1996, no, 2001. I mean, sort of. Listen, it’s a long story. . Jason Gleman NYS Department of Civil Service September 9, 2008
Today’s Objectives What and Why? Getting Started Terms and Definitions Box Model Positioning
What are Cascading Style Sheets? Used to describe the presentation of a document Can be used for HTML or any XML document Requires clean separation of content and presentation
Why Use Cascading Style Sheets? Improves document accessibility Reduces document complexity Reduces bandwidth consumption (or, put another way, saves money) Increases Forehead
What do you mean Increases Forehead? It is a major paradigm shift Not trivial to learn Web browsers are inconsistent It’s worth it
Today’s Objectives RWhat and Why? Getting Started Terms and Definitions Box Model Positioning
a Getting Started Step one: Markup Should I use HTML 4 or XHTML? (hint: it doesn’t matter)
Semantic Markup a Simply deciding to use HTML 4 or XHTML is not good enough Not just any markup will do. You must use tags with meaning to add structure Do not use presentational tags! So listen, <font>, we need to talk. It’s not me, it’s you.
a DOCTYPE Short for document type declaration Tells the browser what version of HTML or XHTML to render Without a DOCTYPE expect the unexpected
a Example DOCTYPEs HTML 4.01 Strict, Transitional, Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DOCTYPEs from the Future a HTML 5 <!DOCTYPE html>
No More Tag Soup
Today’s Objectives RWhat and Why? RGetting Started Terms and Definitions Box Model Positioning
Sample CSS Rule a
Anatomy of a CSS Rule a
Sample Document
Document Object Model (DOM) a Like a family tree
Document Object Model (DOM) a Like an asexual family tree. Each child only has one parent The model represents the relationships between elements Elements in the DOM have properties
Document Tree
Parents and Children
Parents and Children
Parents and Children
Siblings
Descendants
Ancestors
Inheritance a Elements in the document tree pass on some properties to their children Some properties such as margins and padding are not passed on by default
Inheritance a Properties can be defined as inherit. The value for that property will be inherited from the computed value of the parent element See the CSS2 Property Table: http://www.w3.org/TR/REC-CSS2/propidx.html
A Quick Note on Computed Value If a rule defines a value relatively: div { font-size: 90%; } The computed value is what the browser determines the value is An element can only inherit a computed value
Selectors a Selectors determine which elements a CSS rule will be applied to
a Types of Selectors Type (Element) selectors Class selectors ID selectors Descendant (Contextual) selectors Universal selector
a Type Selector From the CSS2.1 Specification: What?! A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree. What?!
Type Selector (in English) a A Type Selector matches elements by name h1 { font-size: 2em; } Matches every occurrence of <h1> in a document
.myClass { font-weight: bold; } Class Selector a Custom selector that matches any element with a matching class attribute: .myClass { font-weight: bold; }
div.myClass { font-weight: bold; } Class Selector a Or, matches a specific element type with a matching class attribute: div.myClass { font-weight: bold; }
#myID { font-weight: bold; } ID Selector a An ID is unique to one element in a document. ID selector matches any element with a matching ID attribute: #myID { font-weight: bold; }
div#myID { font-weight: bold; } ID Selector a Or, matches a specific element type with a matching ID attribute: div#myID { font-weight: bold; } If an ID can only be used once per document, why would this be needed?
Descendant Selector a A descendant selector is used to match an element that is a descendant of a defined ancestor element p a { color: blue; } This would match any <a> element that is a descendant of a <p> element
Universal Selector a The universal selector is used to match any element: * { color: red; } This would make the foreground (text) color of every element in an HTML document red
Combining Selector Types a Complex selectors which incorporate one or more selector types: html, body { margin: 0; padding: 0; } #header h1 { color: #336699; } #navigation ul li.first a { text-decoration: none; } div#reportItem p.sampleItem a:hover { color: red; }
Advanced Selector Types Attribute selector: h1[title] { color: green;} or h1[title=Sample Title] { color: green; } Adjacent sibling selector: h1 + p { color: blue; } Child selectors: div > p { color: #dddddd; } Pseudo-element and pseudo class selectors: p:first-line { font-size: 1.5em; } or a:hover { text-decoration: underline; }
(presenter shows example) Style Sheet Origins a Style rules can come from any or all of these sources: linking importing embedding inline styles browser default Styles user styles (presenter shows example)
Cascading a Cascading is the process that manages the application of style rules
Cascading a User agents aggregate all of the CSS rules and builds a single virtual style sheet Each style rule is weighted When more than one rule would modify the same property of an element the rule with the greatest weight is applied
Cascading Order - Weight Weight is determined by importance (normal or important) and origin (author, user, or user agent) user important style sheets author important style sheets author normal style sheets user normal style sheets user agent style sheets
Cascading Order a Sort by specificity of selector: more specific selectors override general ones Finally, sort by order specified: if more than one rule has the same weight, origin and specificity, the last specified wins Rules in imported style sheets are considered to be before any rules in the importing style sheet
a Specificity All selectors are given a specificity More specific selectors take precedence over less specific selectors
Calculating Specificity - Example Count each ID attribute in the selector Count each other attribute in the selector (i.e. classes) Count each element in the selector Create a final value by concatenating A, B, and C
Calculating Specificity (Simplified) #home div p a { color: blue; } A = B = C =
Calculating Specificity (Simplified) #home div p a { color: blue; } A = 1 B = C =
Calculating Specificity (Simplified) #home div p a { color: blue; } A = 1 B = 0 C =
Calculating Specificity (Simplified) #home div p a { color: blue; } A = 1 B = 0 C = 3 ABC = 103
Calculating Specificity (Simplified) body#home .content p a { color: blue; } A = B = C =
Calculating Specificity (Simplified) body#home .content p a { color: blue; } A = 1 B = C =
Calculating Specificity (Simplified) body#home .content p a { color: blue; } A = 1 B = 1 C =
Calculating Specificity (Simplified) body#home .content p a { color: blue; } A = 1 B = 1 C = 3 ABC = 113
Today’s Objectives RWhat and Why? RGetting Started RTerms and Definitions Box Model Positioning
CSS Box Model
CSS Box Model Basics a (For today’s purposes) boxes have two layout types: block and inline The box type of any element can be controlled with the CSS display property div { display: block; }
a CSS Box Types Block boxes: Inline boxes: <div> <p> <h1> Inline boxes: <em> <a> <strong>
The Components of Boxes a A box consists of a content area surrounded by padding, border and margins
a Margins Outer most component of a box Always transparent Dictates how much space is between a box and any adjacent boxes Values can be negative Margin Properties: margin-top, margin-right, margin-bottom, margin-left, and margin
a Padding Area between content and border Color is background color of box Padding Properties: padding-top, padding-right, padding-bottom, padding-left, and padding
Borders a The border area of a box is the area between the margin and padding of an element Border Properties: border-top-width, border-right-width, border-bottom-width, border-left-width Similar properties exist for border color and style
Box Model Diagram
Calculating Box Dimensions Consider the rule: div { width: 100px; padding: 5px; margin: 5px; border: 1px solid black; } How wide is this box?
Box Model Math
More About Boxes a Box size can be specified using width and height properties: div { width: 100px; height: 100px; } …But defining dimensions for a box is optional
a Fluid Boxes Boxes with no specified dimensions are considered fluid Fluid boxes are as wide as the content area of their containing box Fluid boxes are as tall as they need to be to contain their content Boxes can be fluid in one dimension or both
(presenter shows example) Overflowing Boxes a Boxes that are to small to contain their content will overflow (presenter shows example)
Today’s Objectives RWhat and Why? RGetting Started RTerms and Definitions RBox Model Positioning
CSS Positioning
a CSS Positioning CSS 2.1 has three positioning schemes: Normal Flow Absolute Positioning Float Positioning
a Normal Flow Includes Block formatting of block boxes Inline formatting of inline boxes Relative positioning of block or inline boxes Positioning of run-in boxes (due to limited support we will not cover this today)
(presenter shows example) Block Formatting a Boxes are laid out vertically. Vertical space between boxes is determined by margins. Vertical margins between boxes are collapsed. (presenter shows example)
Margin Collapsing Notice how the bottom box has a smaller 5px margin and the top box has a 10px margin. The margins between them are collapsed so that margin is 10px, and not 15px if they were combined.
(presenter shows example) Inline Formatting a Boxes are laid out horizontally Horizontal margins are not collapsed Inline boxes that do not fit horizontally in their container are split across multiple lines (presenter shows example)
(presenter shows example) Relative Positioning a Boxes are laid out according to the normal flow The box is then shifted relative to its initial position Offsetting a box only affects the position of descendant boxes (presenter shows example)
(presenter shows example) Absolute Positioning a Absolutely positioned boxes are removed from the document flow Does not affect the position of sibling elements Creates a new containing block for normal flow and absolutely positioned descendants Contents do not flow around other boxes (presenter shows example)
More Absolute Positioning Absolutely positioned elements are positioned relative to the nearest positioned ancestor element If no positioned ancestor element exists, the initial containing block is used. This is typically the browser view port background: #99CCFF;
a Fixed Positioning A subcategory of absolute positioning Always positioned relative to view port Position does not change as the page is scrolled Otherwise the same as absolute positioning
Float Positioning a Before we get started, a few things to keep in mind: Width should be specified to prevent floated boxes from filling their container horizontally Floated boxes are always treated like block boxes Unlike block boxes, vertical margins are not collapsed
A Look at Floats A basic normal flow with no elements floated.
A Look at Floats Floated elements shift to the right or left on the current line. The top of the floated object is aligned to the top of the current line box
A Look at Floats Line boxes flow around floated boxes on the opposite side to which the box is floated.
A Look at Floats Floated elements are shifted until its outer edge meets the containing block…
A Look at Floats …or until its outer edge meets the outer edge of another floated element.
A Look at Floats Notice how the containing block does not grow to contain the floated block.
A Look at Floats If there is not enough horizontal space, floated boxes are shifted down until there is room, or there are no more floats.
a A Look at Floats Block boxes can clear floated boxes Block boxes can clear left, right or both sides div { clear: left; } If the clear property is set, a box will be pushed downward until the specified side is no longer adjacent to a floated box
A Look at Floats A box with no clear property
A Look at Floats A box with the property clear: left;
Today’s Objectives RWhat and Why? RGetting Started RTerms and Definitions RBox Model RPositioning
a