CSS for Better Sites (The future

1
CSS for Better Sites(The futures so bright,
we gotta wear shades)

• Sandra Clark
• Constella Group
• sclark_at_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
  documents 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
• divcontainer
• 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
• ltp classred /gt does not match p.Red
• Correct
• ltp classred /gt matches p.red
• No spaces or underscores
• Wrong
• ltinput idcampus street /gt
• ltinput idcampus_street /gt
• Correct
• ltinput idcampus-street /gt
• ltinput idcampusStreet /gt
• IDs 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-weightbold
• Any unordered list which is a descendant of p
• ltpgtltulgtltligtltemgtlt/emgtlt/ligtlt/ulgtlt/pgt
• ltpgtltemgtlt/emgtlt/pgt

Example
11
Child Selector

• Selects an element which is a direct child of
  another element.
• li gt ul gt 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
• ahref
• Selects all ltagt elements with an href attribute
• ahrefwww.shayna.com
• Selects all ltagt elements with an href attribute
  with a specified value.
• imgaltFigure
• Selects all images whose attribute title contains
  a space separated list of values.
• Matches ltimg altFigure 1 /gt, ltimg altFigure
  2 /gt
• htmllangen
• 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 ltheadgt 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 selectors
  specificity (its 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 ulfirst 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
• javascriptalert(document.compatMode)
• CSS1CompatMode Standards Based Rendering
• Mozilla Netscape
• CTRL-I for page information.

25
Forcing Browsers into Standards Mode.

• HTML 4.x Strict
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http//www.w3.org/TR/html4/strict.dtd"gt
• HTML 4.01 Transitional
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN" "http//www.w3.org/TR/html4/loos
  e.dtd"gt
• XHTML 1.0 Strict (no xml Declaration)
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• XHTML 1.0 Transitional (no xml Declaration)
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• Using an xml declaration with the DocType will
  Force IE6 and opera into Quirks Mode
• Avoid using lt?xml version"1.0"
  encoding"UTF-8"?gt

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
• Doesnt 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 ltimg alignleft gt (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
  (clearboth) 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 dont 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

• Users shouldnt have to pay the price of bad CSS
  support
• IE 6 is over 2 years old and doesnt 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
• ltlink rel"stylesheet" type"text/css"
  href"styles.css" media"all" /gt
• Netscape 4 only recognizes mediascreen
• _at_import - must be first style sheet in html
  document.
• _at_import "style.css" / hidden from nearly all v4
  browsers /
• _at_import url('style.css') / IE4 can understand,
  but not NN4 /
• _at_ 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 displayinline
• Since floats are always defined as block level
  elements, this works in all browsers.
• Doesnt 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
Whats wrong with Internet Explorer 6?

• IE6 first released in 2001.
• Most updates have dealt with security not CSS or
  HTML rendering issues
• IE 6 doesnt support a lot of CSS 2 including
• Most pseudo-elements
• except a.link, avisited, ahover, aactivity
• Child Selector
• Adjacent Sibling Selector
• Attribute Selector
• Multiple classes in an html class
• classblue bold
• min-width, min-height, max-width, max-height
• Abbr element

47
The solution is IE7

• No, Microsoft hasnt 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 OBrian
• http//www.pmob.co.uk/temp/3colfixedtest_4.htm
• Web Dev CSS Layout Templates
• http//www.benmeadowcroft.com/webdev/

51
Resources - CSS Hacks and Fixes

• CSS Hacks
• Position is Everything
• http//www.positioniseverything.net/
• CSS Discuss Hacking
• http//css-discuss.incutio.com/?pageCssHack
• IE 7
• http//dean.edwards.name/IE7/

52
Resources - General

• Multiple IEs in Windows
• http//www.insert-title.com/web_design/?pageartic
  les/dev/multi_IE
• CFPretty
• ColdFusion, Fusebox, CSS and Accessibility
• http//www.shayna.com/blog

53
QA

• slclark_at_shayna.com