Cascading Style Sheets (CSS) Part II IT210: Web-based IT

Some slides modified based upon Charles Severance’s Creative Common’s Licensed CSS intro slides available in full here: CSS.ppt CSS.ppt

A Slight Diversion

Microformats A microformat is a web-based approach to semantic markup that seeks to re-use existing HTML/XHTML tags to convey metadata and other attributes in web pages... (Wikipedia) In other words, microformats are standards for using agreed upon “class” names for specific things like geographic coordinates, recipe ingredients, phone numbers…

Recipe Microformats

CSS Positioning

Every CSS element in a document is considered to be a rectangular box

The Box Model

CSS Box Model Properties height and width properties size the block element margin properties define the space around the block element border properties define the borders around a a block element padding properties define the space between the element border and the element content background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page

Two kinds of boxes (i.e. elements) Inline - affects how text looks EM, SPAN, actual text or images Block - Containers that can be laid out P, DIV, TABLE, etc CSS can change a tag from inline to block using the “display” property #navigation li { display: inline; }

Inline Elements Flowed with other text span, em, strong, cite, a Inline tags can be nested as long as they are both inline Stuff Block can contain inline - but inline cannot contain block

Block Level Elements Starts on its own line - ends justification and starts a new block Can be a container for other elements h1 - h6, p, div, blockquote, ul, ol, form Blocks can contain other blocks One Two

A block contained inside a block

Positioning/Layout Methods Normal Flow (i.e., static positioning) = default Relative (“shifted” from normal flow position) Absolute (position specified; scrolls as usual) Fixed (position specified; doesn’t scroll) Floating (floats to a side; content wraps around it)

Normal Flow of Block-level elements = vertical Note the collapsed Margins!

Normal Flow of In-line elements = horizontal (with wrapping)

Relative Positioning Overlaps are allowed! Original space of box is still taken up! p { position:relative; left:20px; top:25x; }

Absolute Positioning Treated as block-level elements Removed from normal flow & can overlap other elements p { position:absolute; left:20px; top:25x; }

Fixed Positioning Same as Absolute Positioning except the element does not move when scrolling p { position:fixed; left:20px; top:25x; }

Floats Floated elements are treated like blocks even if they are inline elements span { float:right; width:200px }

Adjacent Floats Multiple floated elements stack horizontally (unless you use the clear property to stack them vertically)

CSS Resources

CSS Validation You can validate your CSS to make sure it has no syntax errors Browsers will generally quietly ignore bad CSS syntax The validator can save you time and sanity Source: W3C

Browser CSS Charts *Look into Quirks & Strict mode if you’re designing for old browsers