cascading style sheets
DESCRIPTION
Cascading Style Sheets. CSS2. HINT. Use 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. - PowerPoint PPT PresentationTRANSCRIPT
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