CSS for Better Sites The future s so bright

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 Doc. Type 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) üh 1 übody ütd übr

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 name ü Examples • 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 selector üdiv#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=“campus. Street” /> • 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></li></ul></p> • <p><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 Specificity an overview. • Inheritance üElements often inherit properties from their parent elements. • Cascading üStyle sheets can be linked together to create a hierarchy of related style sheets • Specificity üWhen 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 elements üBody {font-size: 100%; color: blue; } • Inheritance is determined by the DOM üDocument Object Model Sample

Cascades • With CSS more than one style sheet can be applied to a presentation. • 3 Types of Style Sheets ü Author: Created by the document author ü User: 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 rule ü The 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 selector ü Count 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 ü The higher the specificity, the higher the weight and the rule wins.

What does that mean? • Element Names (=c) ü H 1 ü div ul li • Selectors and pseudo selectors ü. term ü pre. example ü div. help h 1 em. term • ID Selectors ü #sidenav ü body ul#first li ol. steps li • The higher weight wins! 0 -0 -1 0 -0 -3 0 -1 -0 0 -1 -1 0 -2 -3 1 -0 -0 1 -1 -5

Doc. Type Sniffing • A Doc. Type contains the formal delimitation of the markup grammar. • Most modern browsers use the Doc. Type 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: üIE 6 – Opera • javascript: alert(document. compat. Mode); • CSS 1 Compat. Mode – Standards Based Rendering üMozilla – Netscape • CTRL-I for page information.

Forcing Browsers into Standards Mode. • HTML 4. x Strict ü <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/strict. dtd"> • HTML 4. 01 Transitional ü <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN" "http: //www. w 3. org/TR/html 4/loose. dtd"> • XHTML 1. 0 Strict (no xml Declaration) ü <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> • XHTML 1. 0 Transitional (no xml Declaration) ü <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> • Using an xml declaration with the Doc. Type will Force IE 6 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 components ü Content • 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 Calculation üWidth deals with content only. Padding and border and margin are set in addition to the width. üBox of 100 px set • width: 100 px; padding: 10 px; border: 10 px • IE 5 (all modes) IE 6 quirks mode üWidth deals with entire box model. Padding, and border are contained within the width. üBox of 100 px set • width: 140 px; padding: 10 px; border: 10 px

Calculating the Box Model – IE

Multi-column page layouts • The ultimate in cool • Uses divs for positioning blocks of text • Depends on CSS üPositioning üFloats

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 properties üSpecify 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 floated üAny floated element becomes a block level element. • Floats are required to have a width property. • Floats are removed from the flow üPositioned directly after the last flow element that precedes them. Example

Float (cont). • Floats can act like inline elements üText 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 them üSet 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 nonstandards 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 v 4 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 v 4 browsers */ • @import url('style. css'); /* IE 4 can understand, but not NN 4 */ • @ import in stylesheet

CSS Hacks Tantek Hack – Tricks IE 5 x PC üUsed 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 Bug üThe 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, • Sample this works in all browsers. Doesn’t change the float to inline in IE, just fixes the problem.

Other Bugs • All browsers have CSS rendering bugs. • Best place to find the bugs and the fixes is ühttp: //www. positioniseverything. net.

The ultimate CSS Hack

What’s wrong with Internet Explorer 6? • IE 6 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 IE 7 • 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 Meyer üCascading Style Sheets 2. 0 Programmer's Reference üCascading Style Sheets: The Definitive Guide, 2 nd 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 Garden ühttp: //www. csszengarden. com • University of Minnesota Duluth – Cascading Style Sheets ühttp: //www. d. umn. edu/itss/support/Training/ Online/webdesign/css. html

Resources Tableless Layouts • Glish ühttp: //glish. com/css/ • The Layout Reservoir ühttp: //www. bluerobot. com/web/layouts/ • Paul O’Brian ühttp: //www. pmob. co. uk/temp/3 colfixedtest_4. htm • Web Dev CSS Layout Templates ühttp: //www. benmeadowcroft. com/webdev/

Resources - CSS Hacks and Fixes • CSS Hacks üPosition is Everything • http: //www. positioniseverything. net/ üCSS Discuss – Hacking • http: //css-discuss. incutio. com/? page=Css. Hack • IE 7 ühttp: //dean. edwards. name/IE 7/

Resources - General • Multiple IE’s in Windows ühttp: //www. inserttitle. com/web_design/? page=articles/dev/m ulti_IE • CFPretty üCold. Fusion, Fusebox, CSS and Accessibility • http: //www. shayna. com/blog

QA slclark@shayna. com