1 / 53

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

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

frieda
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  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>

  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/

More Related