Cascading Style Sheets

Cascading Style Sheets
Making the World Wide Web pretty since 1996, no, 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" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "

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

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:

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 =

#home div p a { color: blue; } A = 1 B = C =

#home div p a { color: blue; } A = 1 B = 0 C =

#home div p a { color: blue; } A = 1 B = 0 C = 3 ABC = 103

body#home .content p a { color: blue; } A = B = C =

body#home .content p a { color: blue; } A = 1 B = C =

body#home .content p a { color: blue; } A = 1 B = 1 C =

body#home .content p a { color: blue; } A = 1 B = 1 C = 3 ABC = 113

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

Overflowing Boxes a Boxes that are to small to contain their content will overflow (presenter shows example)

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)

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.

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)

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)

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;

RTerms and Definitions RBox Model RPositioning

Cascading Style Sheets

Similar presentations

Presentation on theme: "Cascading Style Sheets"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Cascading Style Sheets

Similar presentations

Presentation on theme: "Cascading Style Sheets"— Presentation transcript:

Similar presentations

About project

Feedback