Mastering CSS for Effective Web Design

1. CSS for Better Sites(The future’s so bright, we gotta wear shades) Sandra Clark Constella Group sclark@constellagroup.com

2. 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.

3. Overview • Selectors • Cascading, Inheritance and Specificity • DocType Sniffing • The Box Model • Multi-column page layouts • CSS Hacks

4. 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

5. Selector Types • Type Selector • Class Selector • ID Selector • Descendant Selector • Universal Selector • Child Selector • Adjacent Sibling Selector • Attribute Selector

6. Type Selectors • A selector which selects elements in the document’s object model (DOM) • h1 • body • td • br

7. 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”. Example

8. 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”.

9. 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.

10. 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> Example

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

12. 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

13. 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

14. 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.

15. Cascading, Inheritance and Specificityan 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.

16. 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

17. 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.

18. 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:

19. 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.

20. 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.

21. 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 dash 1 • The higher the specificity, the higher the weight and the rule wins.

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

23. 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

24. 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.

25. 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"?>

26. 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.

27. The Box Model

28. 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 100px set • width: 100px; padding: 10px; border: 10px • IE 5 (all modes) IE 6 quirks mode • Width deals with entire box model. Padding, and border are contained within the width. • Box of 100px set • width: 140px; padding: 10px; border: 10px

29. Calculating the Box Model – IE

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

31. 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.

32. 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.

33. 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)

34. 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

35. 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

36. 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

37. 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

38. 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.

39. 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.

40. 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.

41. 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

42. CSS Hacks Tantek Hack – Tricks IE 5x 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

43. 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, this works in all browsers. • Doesn’t change the float to inline in IE, just fixes the problem. Sample

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

45. The ultimate CSS Hack

46. 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

47. 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

48. Resources - Books • Eric Meyer • Cascading Style Sheets 2.0 Programmer's Reference • Cascading 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

49. 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

50. 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/3colfixedtest_4.htm • Web Dev CSS Layout Templates • http://www.benmeadowcroft.com/webdev/