Cascading Style Sheets

CSS

div

<div>…</div>

Used like a container to group content

Gives context to the elements in the grouping

Give it a descriptive name with id or class

Ex: <div class=“products”> can be used to group an

<img> with <p> to show they are conceptually related

Ex: <div id=“news”> can be used to group a section of

content for context, structure or layout purposes.

span

<span>…</span>

Generic inline element

Used to add meaning to content

Give it a descriptive name with id or class

Ex: <ul>

<li> Andy: <span class=“phone”>123-

4567</span></li>

<li> Joe: <span class=“phone”>101-

0101</span></li>

</ul>

Element identifiers - id

Id identifier

Used to identify a piece of data

Unique element in the document

Value of id must be used only once in a document

<div id=“header”> (masthead & navigation here)</div>

<div id=“main”> (main content elements here) </div>

<div id=“links”>(list of links here)</div>

<div id=“news”>(news sidebar items here)</div>

<div id=“footer”>(copyright info, etc)</div>

Element identifiers - class

class identifier

Used to group similar elements

Multiple elements may share a class name

<div class=“listing”>

<img src=“book.gif” alt=“name” />

<p><cite>The Complete Manual of

Typography</cite>, James Felici</p>

<p>A combination of type history and examples of

good and bad type.</p>

</div>

<p class=“description”>A combination of type history and examples of good

and bad type.</p>

CSS Positioning

Normal Flow

Top -> bottom | left -> right

Arranged in the order they appear in the code

make room for one another (objects affect the layout of the

objects around them)

CSS Positioning

float

Values: left | right | none

Ex: img { float: right; }

positions an element to left or right allowing surrounding content to

wrap around

Floating Inline Elements

Must provide width & height values

Floating Block Elements

Must provide width & height values

Elements do not float higher than their reference in the source code

CSS Positioning

Clearing floated elements

clear

Values: left | right | both | none

Prevents elements from appearing next to a floated

element

CSS Positioning

position

Values: static | relative | absolute | fixed

offset

Values: top | right | bottom | left

Defines the distance the element should be moved

Ex: em { position: relative;

top: 30px;

left: 60px; }

CSS Positioning

position

Values: static | relative | absolute | fixed

Static: elements positioned as in normal flow

Relative: moves an element relative to its original

position

space it would have occupied is preserved (empty

space left behind)

Overlap happens

CSS Positioning

CSS Positioning

position

Absolute: removes element from normal

document flow

Absolute positioned elements have NO influence

on layout of surrounding elements

Positioned relative to its containing element

Space it would have occupied is closed

Overlap happens

CSS Positioning

CSS Positioning

position

Fixed: element fixed in one position (does

not scroll)

Similar to absolute positioning

Offset values are relative to the browser window

(viewport)

CSS Positioning

Stacking Order

Elements stack in the order they appear in the source doc.

Z-index (change the stacking order)

Higher the z-index - higher the element will appear in the stack

CSS Page Layout

Liquid (fluid): Page reflow in browser window

Advantage: Design for any monitor resolution

Disadvantage: may end up with long lines of text (uncomfortable to read)

www.W3.org

Fixed: page stays a specific pixel width

Advantage: predictable layout, more control

Disadvantage: right edge may not be seen on smaller browsers

Text elements may be re-sized affecting layout

www.oreilly.com

Elastic: layout expands and contracts with size of text (em based)

Advantage: provides consistent layout while allowing flexibility in text size

Disadvantage: images can’t be dynamically resized

www.csszengarden.com/?cssfile=/063/063.css

Responsive: http://www.burton.com/on/demandware.store/Sites-Burton_US-Site/default

CSS - Layout

CSS - Layout

CSS - Layout

Let’s see how this works…