Cascading Style Sheets (CSS)

Part IIIT210: Web-based IT

Some slides modified based upon Charles Severance’s Creative Common’s

Licensed CSS intro slides available in full here:

http://open.umich.edu/sites/default/files/Severance-SI502-W09-Week10-CSS.ppt

A Slight Diversion

MicroformatsA 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

http://reference.sitepoint.com/css/boxmodel

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

•<span class=”important”><cite>Stuff</cite></span>

•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

<div id=”content”> <p>One </p> <p>Two</p></div>

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 Flowof Block-level elements =

verticalNote 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 PositioningSame 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 FloatsMultiple 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

•http://jigsaw.w3.org/css-validator

•The validator can save you time and sanity

Source: W3C http://validator.w3.org/check

Browser CSS Charts

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