Cascading Style Sheets

CSS2

HINTUse a LIVE CSS editor

Web Developer Tools for FireFox have this

Firefox has addons for CSS reference

Someday somebody will merge the CSS reference with a live editor… maybe you? Firefox add-ons are coded in javascript...

CSS3 properties

Draft finalized end of 2005? still in draft 2008…

Browser support initially limited

Problems:

buggy limited support

POORLY designed standard

Naming Conventions

If you didn’t notice…

CSS attributes are LOWERCASE

background color = background-color

colors in CSS

named (a short list) red, blue, green…

#99CC33 → #9C3

Display

display: none; (hide)

display: inline; (fits in the line)

display: block; (alone on its own line)

display: table-row, table-column, table-cell, inline-table

Import

@import “…” or @import url( … )

media types can follow it

@media media_type {…css…}

like: if( media_type == true ) { }

ex: @import “fancy.css” print, screen;

Printing

page-break-before

page-break-after

page-break-inside

auto, always, avoid, left, right

@page {margin properties…}

Box Model

All Elements (tags) have a box around them.

width, heightmargin, padding,border

position: top,left,bottom,right

Positions & Dimensions

width, height

top,left,bottom,right

must be positioned to use

auto or inherit (used in CSS cascades)

##% = relative to parent

units: mm,cm,in,px,pt,pc,em,ex

relative Positioning

Position relative to the text flow (sibling text and tags)

If the text moves, it moves

Example: sub-text or super-text (1st 2nd X² )

negative positions allowed

absolute Positioningpositions relative to PARENT position

scrolls with the PARENT position

bottom is the bottom of document

going off the page can cause browser to make document larger

negative positions (left/right/top/bottom) are allowed

fixed Positioning

positioned ON THE WINDOW

bottom is the bottom of the window’s page viewing area

does NOT scroll with the the page

adjusts to when the window does

float Positioning

left or right

The box moves to the left or right of the area (contained by parent)

text flows around the box

works diagrams or photos in text documents

z-indexLayering control

Multiple positioned boxes overlapping cause a layering problem, this solves it

only works on boxes that are positioned

0 and up back to front

auto = default behavior

tricksbugs (look up the Acid Tests for CSS)

there are IE specific comments that help in coding around IE bugs

Absolute positioning inside a PARENT with relative positioning can be useful

Combining positioning, tables, float can create interesting situations (bugs too)