(Fast) Intro to HTML & CSS (Part 2)

(Fast) Introduction to CSS
Dave Kelly ( @davkell )
for @091Labs
(Part II)

css box model
Think of all HTML elements as boxes when thinking about design / layout
Example 1 (for Part 2): http://www.ambientage.com/blog/091labs/
http://www.w3.org/TR/CSS2/box.html

css box model - display
Some elements can be
Block level (e.g. h1, p, ul, div…..)
Inline level (e.g. a, strong, em, span….)
CSS display property can change these
ul li{display: inline }/*Changes li to display inline */
Control
Full listing of display properties, support & examples: http://www.quirksmode.org/css/display.html

css positioning
Boxes can be positioned in 3 ways
Normal Flow
How we have positioned things until now
Absolute Positioning
a box is removed from the normal flow entirely and assigned a position with respect to a containing block
Floats
a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float

element positioning
The position property has 4 possible values:
p { position: static }
It’s a normal box laid out according to the normal flow, i.e. it behaves in the same way as all elements we’ve seen until now
p { position: relative; top: 100px; left: 100px }
Position calculated according to normal flow. Box is offset relative to its normal position
When using relative positioning, the space left by the element’s block remains open – as if the element was positioned there.

element positioning
p { position: fixed; top: 100px; left: 100px; }
Causes the element to remain in a fixed position in the view port, i.e. it will not move when the document is scrolled. ( * IE6)
p { position: absolute; top: 100px; left: 150px; }
The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties
Boxes are taken out of the normal flow and positioned relative to the viewport
this means the space where they would have appeared is not left open
See ugly positioning example

element positioning: float *
When elements are floated they float to the specified margin (left or right).
For example:
#sidebar { float: right;}
It will be floated to the right margin, and other elements will wrap around it.
Valid values for this property are:
left | right | none#
In layouts, using {clear: both; } will help. Lots.

some layout schemes
Liquid (uses % widths)
Elastic (elements use em measures => relative to text size)
Fixed width, centered * (e.g. content 960px wide)
Overview & some samples: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

what are you doing?
A grid is your friend http://960.gs
See examples…

some css resources
List of some best practices
http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
CSS Reset
http://meyerweb.com/eric/tools/css/reset/index.html
Some layout articles
http://www.alistapart.com/topics/design/layout/(take a look at all A List Apart articles, not intro level, but well worth a read)
Good front-end dev web articles generally
http://24ways.org/(archives)
W3C Specs…. http://www.w3.org/TR/CSS21/

moral of the story…
Plan your layouts before you start
Standards are your friend. Stick to them.
Declare a doctype
Learn with xHTML Strict. (Will help you in the long run)
Always validate (if it’s not valid, understand why)
Know your audience
Browser support for what you’re doing?
…then test in all browsers anyway
(…and then Google “IE CSS conditional comments”)
HTML5 & CSS3 are coming / here already…
….that’s next on your list

Questions?
Get in touch…
dkelly@ambientage.com
@davkell
linkedin.com/in/davkell
www.ambientage.com
www.davidkelly.ie
Slides & Footnotes
www.ambientage.com/blog/091labs/

http://www.ambientage.com	182
http://ambientage.dev	173
http://feeds2.feedburner.com	2

(Fast) Intro to HTML & CSS (Part 2)

by Dave Kelly on Sep 28, 2010

Accessibility

Upload Details

Usage Rights

3 Embeds 357

Statistics

(Fast) Intro to HTML & CSS (Part 2) — Presentation Transcript