Css for better sites the future s so bright we gotta wear shades
1 / 53

- PowerPoint PPT Presentation

  • Uploaded on

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

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 '' - 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
Css for better sites the future s so bright we gotta wear shades l.jpg

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

Sandra Clark

Constella Group


Why use css l.jpg
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 l.jpg

  • Selectors

  • Cascading, Inheritance and Specificity

  • DocType Sniffing

  • The Box Model

  • Multi-column page layouts

  • CSS Hacks

Selectors l.jpg

  • 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 l.jpg
Selector Types

  • Type Selector

  • Class Selector

  • ID Selector

  • Descendant Selector

  • Universal Selector

  • Child Selector

  • Adjacent Sibling Selector

  • Attribute Selector

Type selectors l.jpg
Type Selectors

  • A selector which selects elements in the document’s object model (DOM)

    • h1

    • body

    • td

    • br

Class selectors l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
Child Selector

  • Selects an element which is a direct child of another element.

    • li > ul > li {color: green;}


Adjacent sibling selector l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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.

Inheritance l.jpg

  • 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


Cascades l.jpg

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

Cascades18 l.jpg

  • 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:

Cascades19 l.jpg

  • 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 l.jpg

  • 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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg

  • 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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg

  • 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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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

Slide53 l.jpg