(Fast) Introduction to CSS<br />Dave Kelly ( @davkell  )<br />for @091Labs<br />(Part II)<br />
css box model<br />Think of all HTML elements as boxes when thinking about design / layout<br />Example 1 (for Part 2): ht...
css box model - display<br />Some elements can be<br />Block level (e.g. h1, p, ul, div…..)<br />Inline level (e.g. a, str...
css positioning<br />Boxes can be positioned in 3 ways<br />Normal Flow 	<br />How we have positioned things until now<br ...
element positioning<br />The position property has 4 possible values:<br />p { position: static }<br />It’s a normal box l...
element positioning<br />p { position: fixed; top: 100px; left: 100px; }<br />Causes the element to remain in a fixed posi...
element positioning: float * <br />When elements are floated they float to the specified margin (left or right).<br />For ...
some layout schemes<br />Liquid (uses % widths)<br />Elastic (elements use em measures => relative to text size)<br />Fixe...
what are you doing?<br />A grid is your friend http://960.gs <br />See examples…<br />
some css resources<br />List of some best practices <br />http://net.tutsplus.com/tutorials/html-css-techniques/30-css-bes...
moral of the story…<br />Plan your layouts before you start<br />Standards are your friend. Stick to them.<br /><ul><li>De...
Learn with xHTML Strict. (Will help you in the long run)
Upcoming SlideShare
Loading in …5
×

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

2,048 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,048
On SlideShare
0
From Embeds
0
Number of Embeds
519
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. (Fast) Introduction to CSS<br />Dave Kelly ( @davkell )<br />for @091Labs<br />(Part II)<br />
  2. 2. css box model<br />Think of all HTML elements as boxes when thinking about design / layout<br />Example 1 (for Part 2): http://www.ambientage.com/blog/091labs/<br />http://www.w3.org/TR/CSS2/box.html <br />
  3. 3. css box model - display<br />Some elements can be<br />Block level (e.g. h1, p, ul, div…..)<br />Inline level (e.g. a, strong, em, span….)<br />CSS display property can change these<br />ul li{display: inline }/*Changes li to display inline */<br />Control<br />Full listing of display properties, support & examples: http://www.quirksmode.org/css/display.html<br />
  4. 4. css positioning<br />Boxes can be positioned in 3 ways<br />Normal Flow <br />How we have positioned things until now<br />Absolute Positioning <br />a box is removed from the normal flow entirely and assigned a position with respect to a containing block <br />Floats <br />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<br />
  5. 5. element positioning<br />The position property has 4 possible values:<br />p { position: static }<br />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<br />p { position: relative; top: 100px; left: 100px }<br />Position calculated according to normal flow. Box is offset relative to its normal position<br />When using relative positioning, the space left by the element’s block remains open – as if the element was positioned there.<br />
  6. 6. element positioning<br />p { position: fixed; top: 100px; left: 100px; }<br />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)<br />p { position: absolute; top: 100px; left: 150px; }<br />The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties <br />Boxes are taken out of the normal flow and positioned relative to the viewport<br />this means the space where they would have appeared is not left open<br />See ugly positioning example<br />
  7. 7. element positioning: float * <br />When elements are floated they float to the specified margin (left or right).<br />For example:<br />#sidebar { float: right;}<br />It will be floated to the right margin, and other elements will wrap around it.<br />Valid values for this property are: <br />left | right | none#<br />In layouts, using {clear: both; } will help. Lots. <br />
  8. 8. some layout schemes<br />Liquid (uses % widths)<br />Elastic (elements use em measures => relative to text size)<br />Fixed width, centered * (e.g. content 960px wide)<br />Overview & some samples: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/<br />
  9. 9. what are you doing?<br />A grid is your friend http://960.gs <br />See examples…<br />
  10. 10. some css resources<br />List of some best practices <br />http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/<br />CSS Reset<br />http://meyerweb.com/eric/tools/css/reset/index.html<br />Some layout articles<br />http://www.alistapart.com/topics/design/layout/(take a look at all A List Apart articles, not intro level, but well worth a read)<br />Good front-end dev web articles generally<br />http://24ways.org/(archives)<br />W3C Specs…. http://www.w3.org/TR/CSS21/<br />
  11. 11. moral of the story…<br />Plan your layouts before you start<br />Standards are your friend. Stick to them.<br /><ul><li>Declare a doctype
  12. 12. Learn with xHTML Strict. (Will help you in the long run)
  13. 13. Always validate (if it’s not valid, understand why)</li></ul>Know your audience<br /><ul><li>Browser support for what you’re doing?</li></ul>…then test in all browsers anyway<br /><ul><li>(…and then Google “IE CSS conditional comments”)</li></ul>HTML5 & CSS3 are coming / here already…<br /><ul><li>….that’s next on your list </li></li></ul><li>Questions?<br />Get in touch…<br /><ul><li> dkelly@ambientage.com
  14. 14. @davkell
  15. 15. linkedin.com/in/davkell
  16. 16. www.ambientage.com
  17. 17. www.davidkelly.ie
  18. 18. Slides & Footnotes
  19. 19. www.ambientage.com/blog/091labs/</li>

×