cascading style sheets css2 - a bit more advanced

Cascading Style Sheets

CSS2 - a bit more advanced

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

media types can follow it@media media_type {…css…}

akin to: if( media_type == true ) { }

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

CSS use in htmlInternally

<head>…<style>…css…</style>…</head><tag style=”…”>

Externally<link rel="Stylesheet" href= "ICS255.css" media="screen" />

Displaydisplay: none; (hide)display: inline; (fits in the line)display: block; (alone on its own line)display: table-row, table-column, table-cell, inline-table

Printingpage-break-beforepage-break-afterpage-break-inside

auto, always, avoid, left, right@page {margin properties…}

pseudo-class selectors

selector:pseudoClassused for generic situations and events:link :visited :hover :active :focus :first-child :lang etca: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, heightmargin, padding,border

position: top,left,bottom,right

Positions & Dimensions

width, heighttop,left,bottom,right

must be positioned to useauto or inherit (used in CSS cascades)##% = relative to parentunits: mm,cm,in,px,pt,pc,em,ex

Relative UnitsSave YOU time long-term% percentage of available sizeem

1= size of 1 (one) line of parent’s textex

1= half of em = 0.5 em

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

absolute Positioningpositions relative to PARENT positionscrolls with the PARENT positionbottom is the bottom of documentgoing off the page can cause browser to make document largernegative positions (left/right/top/bottom) are allowed

fixed Positioningpositioned ON THE WINDOWbottom is the bottom of the window’s page viewing areadoes NOT scroll with the the pageadjusts to when the window does

z-indexLayering controlMultiple positioned boxes overlapping cause a layering problem, this solves itonly works on boxes that are positioned0 and up back to frontauto = default behavior

float Positioningleft or rightThe box moves to the left or right of the area (contained by parent)text flows around the boxworks diagrams or photos in text documents

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

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 usefulCombining positioning, tables, float can create interesting situations (bugs too)

Inspectors & Editors

Most desktop browsers have add-ons for developers to do layoutFirefox’s Web Developer add-on has LIVE CSS editing that displays changes instantlyFireBug provides an inspector for firebug

HINTInspectors like FireBug

View properties of a tagView built-in browser CSS properties of a tag

You can change any CSS property you can see and copy them from other tags

cascading style sheets css2 - a bit more advanced

Documents