Cascading Style Sheets CSS2 - a bit more advanced

“…”; url( … ); media types can follow media_type {…css…} akin to: if( media_type == true ) { } “fancy.css” print, screen;

CSS use in html Internally … …css… … Externally

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

Printing page-break-before page-break-after page-break-inside auto, always, avoid, left, {margin properties…}

pseudo-class selectors selector:pseudoClass used for generic situations and events :link :visited :hover :active :focus :first-child :lang etc a:visited anchor tags the user clicked on before

Example.myclass:hover the pseudo-class is PART of the selector Browser’s search: Find all tags with class=”myclass” Is the mouse ‘hovering’ over that tag?

text pseudo-element selectors :before = before the content :after = after the content {content: “text”} = lets you insert text! :first-letter :first-line

event pseudo-element selectors :visited (visited anchor link) :active (working anchor link) :hover (mouse over) :focus (forms)

Box Model All Elements (tags) have a box around them. width, height margin, 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 Units Save YOU time long-term % percentage of available size em 1= size of 1 (one) line of parent’s text ex 1= half of em = 0.5 em

example h1{ font-size: 0.5em; } ALL tags are now half size (50%) note - text height based

absolute Positioning positions 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

video

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

video

z-index Layering 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

video

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

video

relative Positioning Position relative to the text flow (sibling text and tags) If the text moves, it moves Example: sub-text or super-text (1 st 2 nd X² ) negative positions allowed

video

tricks bugs (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)

Inspectors & Editors Most desktop browsers have add-ons for developers to do layout Firefox’s Web Developer add-on has LIVE CSS editing that displays changes instantly FireBug provides an inspector for firebug

HINT Inspectors like FireBug View properties of a tag View built-in browser CSS properties of a tag You can change any CSS property you can see and copy them from other tags

video