CSS for Better Sites(The future’s so bright, we gotta wear shades)

Sandra Clark

Constella Group

sclark@constellagroup.com

Why use CSS?

• Separates your content from your design.

• Faster development and download times.

• Easy to write and maintain• Improves accessibility• Greater control over presentation,

including placement and typography.

• Allows different styles to be applied for different media types (screen, printer) without changing your HTML.

Overview

• Selectors

• Cascading, Inheritance and Specificity

• DocType Sniffing

• The Box Model

• Multi-column page layouts

• CSS Hacks

Selectors

• Selectors are used to select associated elements, ids and classes to apply a particular style rule to.

• More than one selector may be associated with a style rule.

• There are many different types of selectors

Selector Types

• Type Selector

• Class Selector

• ID Selector

• Descendant Selector

• Universal Selector

• Child Selector

• Adjacent Sibling Selector

• Attribute Selector

Type Selectors

• A selector which selects elements in the document’s object model (DOM)h1bodytdbr

Class Selectors

• Applies a style to an element having the specified class attribute.More than one element may have the

same class.Specified with ‘.’ before the class nameExamples

• p.quote• Applies to all paragraphs with a class of

“quote”

• .error• Applies to any element with a class of

“error”.

ID Selectors

• Similar to class selectors, except that an id must be unique in a page.Use a # in the selectordiv#container

• selects the div element with the id of “container”.

#container• selects the element with the id of

“container”.

Class and ID Selectors – Things to know

• The name of the class or id in the HTML/XHTML must match the name of the selector exactly. Wrong

• <p class=“red” /> does not match p.Red{} Correct

• <p class=“red” /> matches p.red{}

• No spaces or underscores Wrong

• <input id=“campus street” />• <input id=“campus_street” />

Correct• <input id=“campus-street” />• <input id=“campusStreet” />

• ID’s may start with a digit.

Descendant Selector

• Used to select elements which are descendants of another element in the document tree.Example:

• p em {font-weight:bold;}• Any unordered list which is a descendant of p

• <p><ul><li><em></em></li></ul></p>

• <p><em></em></p>

Child Selector

• Selects an element which is a direct child of another element.li > ul > li {color: green;}

Example

Adjacent Sibling Selector

• Selects an element which immediately follows another element in the document markup.Any text appearing between

markup will not affect this selector.

Not supported in IE.

Example

Universal Selector

• Used to select any element.Acts as a wildcard symbol.

• div * p• Selects paragraphs that are at least one selector

removed (grandhildren) of a div

Example

Attribute Selector

• Used to select elements based on the presence of either specific attributes or their values.

• 4 types of Attribute Selectors• a[href]

Selects all <a> element’s with an href attribute• a[href=“www.shayna.com”]

Selects all <a> elements with an href attribute with a specified value.• img[alt~=”Figure”]

Selects all images whose attribute title contains a space separated list of values.

• Matches <img alt=“Figure 1” />, <img alt=“Figure 2” />

• html[lang|=“en”] Selects any element whose attribute has a value which is a hyphen

separated list beginning with a specified value.• Matches en, en-us,en-uk.

Cascading, Inheritance and Specificityan overview.

• InheritanceElements often inherit properties from their parent

elements.• Cascading

Style sheets can be linked together to create a hierarchy of related style sheets

• SpecificityWhen two properties in separate rules apply to an

element and contradict each other, CSS provides a mechanism to resolve these conflicts called specificity.

Inheritance

• Styles may be inherited from one element to its descendant elementsBody {font-size: 100%; color: blue;}

• Inheritance is determined by the DOMDocument Object Model

Sample

Cascades

• With CSS more than one style sheet can be applied to a presentation.

• 3 Types of Style SheetsAuthor: Created by the document authorUser: Created by the user.User Agent: Default style sheet applied by the

browser.

• These stylesheets overlap in scope and interact in the cascade which applies a weight to each ruleThe rule with the greatest weight takes

precedence.

Cascades

• Cascading Order is calculated according to the following rules: Find all declarations that apply to the

element and property in question, for the target media type.

Sort the declarations by weight and origin:

Cascades

Sort by specificity of selector• more specific selectors will override more general ones.

Sort by order specified:• If two rules have the same weight, the last item specified wins.

Author style sheets are evaluated in the following order:• Browser default • External Style Sheet • Internal Style Sheet (inside the <head> tag) • Inline Style (inside HTML element)

An inline style will override styles set in either an internal style sheet or an external style sheet.

Specificity

• Cascades are determined by the selector’s specificity (it’s weight).Each selector in CSS is

assigned a specificity based on the composition of the selector based on specific rules.

Specificity Rules

• For a selectorCount the number of ID Selectors (=a)Count the number of other selectors and pseudo class

selectors. (=b)Count the number of element names (=c) Ignore pseudo-elements

• The concatenation of the values yields the specificity (a-b-c)

• Not base 10. Think of the number as 1 dash 1 dash 1The higher the specificity, the higher the weight and the rule

wins.

What does that mean?

• Element Names (=c)H1 0-0-1div ul li 0-0-3

• Selectors and pseudo selectors .term 0-1-0pre.example 0-1-1div.help h1 em.term 0-2-3

• ID Selectors#sidenav 1-0-0body ul#first li ol.steps li 1-1-5

• The higher weight wins!

DocType Sniffing

• A DocType contains the formal delimitation of the markup grammar.

• Most modern browsers use the DocType to choose what mode it will render your HTML

Which Mode am I In?

• To check which Rendering mode your computer is in, use the following:IE6 – Opera

• javascript:alert(document.compatMode); • CSS1CompatMode – Standards Based Rendering

Mozilla – Netscape• CTRL-I for page information.

Forcing Browsers into Standards Mode.

• HTML 4.x Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

• HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

• XHTML 1.0 Strict (no xml Declaration) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• XHTML 1.0 Transitional (no xml Declaration) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

• Using an xml declaration with the DocType will Force IE6 and opera into Quirks Mode Avoid using <?xml version="1.0" encoding="UTF-8"?>

The Box Model

• Every CSS element forms a box composed of the following componentsContent

• The actual content of the element such as text or an image.

Padding• White space set around the content.

Border• Set around the padding

Margin• Set around the Border.

The Box Model

Calculating the Box Model

• Web Standards CalculationWidth deals with content only. Padding and border

and margin are set in addition to the width.Box of 100px set

• width: 100px; padding: 10px; border: 10px

• IE 5 (all modes) IE 6 quirks modeWidth deals with entire box model. Padding, and

border are contained within the width.Box of 100px set

• width: 140px; padding: 10px; border: 10px

Calculating the Box Model – IE

Multi-column page layouts• The ultimate in cool

• Uses divs for positioning blocks of text

• Depends on CSSPositioningFloats

Multi columns depend on positioning

• Depends on the Positioning Model static

• (default) – places elements in a continuous flow representing the HTML page • Mirrors the traditional HTML positioning model.

relative• Places an element at some position relative to where it would be placed in the

static model.• Only the current element is affected, other elements return back to the static

absolute• Fixes an element at an absolute position within the document.• The document is not part of the flow• Doesn’t affect the positioning of other items above or below it.

fixed• Similar to the absolute model• The element is positioned within the document window.• The document scrolls, but the fixed element will not move.

Managing position

• Use the left, right, top and bottom properties to place the element.

• Right and bottom propertiesSpecify where the edges of the element

should be relative to the top and left.

• Left and top properties interpreted differently based on the positioning model.

Positioning Top and Left

• static Top and left properties are ignored.

• relative Interprets top and left as offsets to the position the element would

take in a static positioning Negative values shift element to the left and up Positive values move it to the right and down.

• absolute Uses top and left to determine position within the document page

for the element.• fixed

Acts like the absolute model, but uses the top and left as an offset of the position of the browser window

The top left corner of the window has a position of (0,0)

Float

• Any element can be floatedAny floated element becomes a block level

element.

• Floats are required to have a width property.

• Floats are removed from the flowPositioned directly after the last flow

element that precedes them.

Example

Float (cont).

• Floats can act like inline elementsText and images can go along a float and

continue below it.• Use instead of <img align=“left” > (deprecated)

Text and inline images can never be covered by a float • Except if they are in separate containers.

• Regular boxes would pass behind a float

Example

Clearing Floats

• Static box elements ignore floats and display against previously placed static boxes.

• If a static box uses the clear property (clear:both) it is pushed down until it clears the bottom of the float.

• IE and Opera 7, automatically enclose nested floats within the block element they reside in regardless of if cleared is used.This is in violation of the spec.

Example

Tableless Layouts

• Relies on positioning and float.

• Most of us want to re-create a 2 to 3 column layout (with header and footer).

• No need to recreate the wheel.

• Lots of sites available with code available!

•Example

CSS Hacks

• Techniques developed to Hide CSS from browsers that don’t support

themSet different values to the same CSS

property in different browsers to achieve the same appearance on all browsers.

Why use CSS Hacks

• User’s shouldn’t have to pay the price of bad CSS support IE 6 is over 2 years old and doesn’t support all of

CSS 2.

• Fixing a CSS Hack when no longer needed involves a few stylesheets, not an entire web site.

• Hacks usually exploit a bug in older browsers and work well in newer, more compliant browsers.

Why not to use CSS Hacks

• If a site works correctly in an older, non compliant version, it gives the public no reason to upgrade.

• The whole reason for standards in the first place is not to have to deal with non-standards compliancy.

• Accept the way browsers display CSS now and keep your sites simple.

• It goes against good programming to use one bug in a browser to fix another bug in the same browser.

XHTML Hacks

• Use to hide or serve specific stylesheets from/to specific browsers.Hide stylesheets from v4 Browsers

• <link rel="stylesheet" type="text/css" href="styles.css" media="all" />

• Netscape 4 only recognizes media=“screen”

• @import - must be first style sheet in html document.• @import "style.css"; /* hidden from nearly all v4 browsers

*/ • @import url('style.css'); /* IE4 can understand, but not NN4

*/

• @ import in stylesheet

CSS Hacks

Tantek Hack – Tricks IE 5x PCUsed inline to trick older browsers into

prematurely closing a rule.Commonly used to solve the IE Box Model

problem.voice-family: "\"}\"";

voice-family: inherit;

Example

More IE 6 hacks

• Double Float Margin and Text Indent BugThe Problem

• Float and margin are both applied the same way, IE erroneously doubles the margin.

The Fix• Fix is to add display:inline

• Since floats are always defined as block level elements, this works in all browsers.

• Doesn’t change the float to inline in IE, just fixes the problem.

Sample

Other Bugs

• All browsers have CSS rendering bugs.

• Best place to find the bugs and the fixes ishttp://www.positioniseverything.net.

The ultimate CSS Hack

What’s wrong with Internet Explorer 6?

• IE6 first released in 2001. Most updates have dealt with security not CSS or HTML rendering

issues

• IE 6 doesn’t support a lot of CSS 2 including: Most pseudo-elements

• except a.link, a:visited, a:hover, a:activity Child Selector Adjacent Sibling Selector Attribute Selector Multiple classes in an html class

• class=“blue bold” min-width, min-height, max-width, max-height Abbr element

The solution is IE7

• No, Microsoft hasn’t released a new version.

• Dean Edwards created a set of behaviors that add those items into IE 5.5 and IE 6.Behavior is an .htc file which combines

CSS and Javascript to implement new behaviors in IE.

Example

Resources - Books

• Eric MeyerCascading Style Sheets 2.0 Programmer's

ReferenceCascading Style Sheets: The Definitive Guide,

2nd Edition  Eric Meyer on CSS: Mastering the Language

of Web Design• Jeffery Zeldman

Designing with Web Standards• Molly Holzchlag

Cascading Style Sheets: The Designer's Edge

Resources (Web Sites - Design)

• CSS Zen Gardenhttp://www.csszengarden.com

• University of Minnesota Duluth – Cascading Style Sheetshttp://www.d.umn.edu/itss/support/

Training/Online/webdesign/css.html

Resources Tableless Layouts

• Glishhttp://glish.com/css/

• The Layout Reservoirhttp://www.bluerobot.com/web/layouts/

• Paul O’Brianhttp://www.pmob.co.uk/temp/3colfixedtest_4.htm

• Web Dev CSS Layout Templateshttp://www.benmeadowcroft.com/webdev/

Resources - CSS Hacks and Fixes

• CSS HacksPosition is Everything

• http://www.positioniseverything.net/

CSS Discuss – Hacking• http://css-discuss.incutio.com/?page=CssHack

• IE 7http://dean.edwards.name/IE7/

Resources - General

• Multiple IE’s in Windowshttp://www.insert-title.com/web_design/?

page=articles/dev/multi_IE

• CFPrettyColdFusion, Fusebox, CSS and

Accessibility• http://www.shayna.com/blog

QA

slclark@shayna.com