css for better sites the future s so bright we gotta wear shades
Skip this Video
Download Presentation
CSS for Better Sites (The future’s so bright, we gotta wear shades)

Loading in 2 Seconds...

play fullscreen
1 / 53

CSS for Better Sites The future s so bright, we gotta wear shades - PowerPoint PPT Presentation

  • Uploaded on

CSS for Better Sites (The future’s so bright, we gotta wear shades). Sandra Clark Constella Group [email protected] Why use CSS?. Separates your content from your design. Faster development and download times. Easy to write and maintain Improves accessibility

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'CSS for Better Sites The future s so bright, we gotta wear shades' - frieda

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
why use css
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.
  • Selectors
  • Cascading, Inheritance and Specificity
  • DocType Sniffing
  • The Box Model
  • Multi-column page layouts
  • CSS Hacks
  • 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
Selector Types
  • Type Selector
  • Class Selector
  • ID Selector
  • Descendant Selector
  • Universal Selector
  • Child Selector
  • Adjacent Sibling Selector
  • Attribute Selector
type selectors
Type Selectors
  • A selector which selects elements in the document’s object model (DOM)
    • h1
    • body
    • td
    • br
class selectors
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
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
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
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
Child Selector
  • Selects an element which is a direct child of another element.
    • li > ul > li {color: green;}


adjacent sibling selector
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.


universal selector
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


attribute selector
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
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.
  • 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


  • 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.
  • 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:
  • 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.
  • 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
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.
what does that mean
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!
doctype sniffing
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
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
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
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.
calculating 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 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
multi column page layouts
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
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
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
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)
  • 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.


float cont
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
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.


tableless layouts
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
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
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
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 hacks42
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;


more ie 6 hacks
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.


other bugs
Other Bugs
  • All browsers have CSS rendering bugs.
  • Best place to find the bugs and the fixes is
    • http://www.positioniseverything.net.
what s wrong with internet explorer 6
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
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.


resources books
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
resources web sites design
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
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/
resources css hacks and fixes
Resources - CSS Hacks and Fixes
  • CSS Hacks
    • Position is Everything
      • http://www.positioniseverything.net/
    • CSS Discuss – Hacking
      • http://css-discuss.incutio.com/?page=CssHack
  • IE 7
    • http://dean.edwards.name/IE7/
resources general
Resources - General
  • Multiple IE’s in Windows
    • http://www.insert-title.com/web_design/?page=articles/dev/multi_IE
  • CFPretty
    • ColdFusion, Fusebox, CSS and Accessibility
      • http://www.shayna.com/blog