View
221
Download
0
Category
Preview:
DESCRIPTION
A Slight Diversion
Citation preview
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…
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
Recommended