CSS For Coders

2,349 views
2,248 views

Published on

This is the CSS for Coders Session taught by Jerry Ferguson from Desert Code Camp 2007 in Phoenix.

Published in: Technology, Education
1 Comment
16 Likes
Statistics
Notes
No Downloads
Views
Total views
2,349
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
295
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide
  • CSS For Coders

    1. 1. CSS for Coders
    2. 2. Intro to CSS <ul><li>What is CSS? </li></ul><ul><ul><li>‘Clothing for web pages.’ </li></ul></ul><ul><li>Some example sites: </li></ul><ul><ul><li>http://www.cssbeauty.com/ </li></ul></ul><ul><ul><li>http://www.adactio.com/ </li></ul></ul><ul><ul><li>http://www.csszengarden.com/ </li></ul></ul>
    3. 3. Our Design Template <ul><li>Arizona Videography </li></ul>
    4. 4. Web Developer Toolbar for Firefox <ul><li>Get it from: http://addons.mozilla.org/addon/60 </li></ul><ul><li>Or google “ web developer toolbar ” </li></ul>
    5. 5. CSS Terminology
    6. 6. How to use CSS in XHTML <ul><li>Inline </li></ul><ul><li>Embedded </li></ul><ul><li>Link </li></ul><ul><li>Import </li></ul><ul><li>Multiple </li></ul>
    7. 7. Selectors <ul><li>Id </li></ul><ul><ul><li>Designated with # mark in css </li></ul></ul><ul><ul><ul><li>Ex: #header{margin:10px; font-weight:bold;} </li></ul></ul></ul><ul><ul><li>Only one instance of each id per page </li></ul></ul><ul><li>Class </li></ul><ul><ul><li>Designated with a ‘dot’ or period in css. </li></ul></ul><ul><ul><ul><li>Ex: .more-link{font-style:italic;} </li></ul></ul></ul><ul><ul><li>Unlike id's, you can have as many instances a class as you want </li></ul></ul><ul><ul><li>Used to collect elements into 'sets‘ </li></ul></ul><ul><ul><ul><li>All 'first' elements ex. style them with background:yellow </li></ul></ul></ul><ul><ul><ul><li>'read more' links italics </li></ul></ul></ul><ul><ul><ul><li>class different kinds of images differently (pie charts, graphs, screenshots)‏ </li></ul></ul></ul>
    8. 8. Groups and Descendants <ul><li>Grouped selection - separate with commas </li></ul><ul><ul><li>h1, h2, h3, .boldtext, #footer{font-weight:bold;} </li></ul></ul><ul><li>Descendant selectors #footer p{text-align:center; font-style:italic;} </li></ul>
    9. 9. Designer ‘Stuff’ <ul><li>Colors and Backgrounds </li></ul><ul><ul><li>Change body foreground and background </li></ul></ul><ul><ul><li>Change 'container' background </li></ul></ul><ul><ul><li>Change h2 backgrounds </li></ul></ul><ul><li>Typography </li></ul><ul><ul><li>Change typography and size </li></ul></ul>
    10. 10. Margin, Padding, Border <ul><li>‘Box Model’ </li></ul><ul><li>Margin </li></ul><ul><li>Padding </li></ul><ul><li>Border </li></ul>
    11. 11. Layout <ul><li>Box Model </li></ul><ul><ul><li>ul.navlist{border:2px solid dashed; padding:30px; margin:50px; } </li></ul></ul><ul><ul><li>Nix border around image </li></ul></ul><ul><ul><li>Give elements in 'container' some room to breathe </li></ul></ul><ul><li>Navigation bar from a list </li></ul><ul><ul><li>using display:inline </li></ul></ul>
    12. 12. Print and Handheld <ul><li>Print </li></ul><ul><ul><li>How to debug it </li></ul></ul><ul><ul><li>Remove image border </li></ul></ul><ul><ul><li>Get rid of nav list, large image </li></ul></ul><ul><ul><li>Add border to bottom of content </li></ul></ul><ul><ul><li>Re-align footer paragraph </li></ul></ul><ul><li>Handheld(Mobile)‏ </li></ul><ul><ul><li>Nix images </li></ul></ul><ul><ul><li>Narrow body </li></ul></ul>
    13. 13. Common Fixes <ul><li>Add whitespace </li></ul><ul><li>Change link color </li></ul><ul><li>Add Print/Handheld styles </li></ul><ul><li>Navbar from a list </li></ul><ul><li>Add image background </li></ul>
    14. 14. List of CSS Learning Sites <ul><li>Tutorials </li></ul><ul><ul><li>http://www.alistapart.com </li></ul></ul><ul><ul><li>http://www.w3schools.com/css/ </li></ul></ul><ul><li>Inspiration </li></ul><ul><li>CSS Beauty – http://www.cssbeauty.com </li></ul><ul><li>CSS Zen Garden – http://www.csszengarden.com </li></ul>
    15. 15. What's Important for Coders? <ul><li>Clean Separation of Code/Content </li></ul><ul><li>Clean Menu Systems </li></ul><ul><li>Provide 'hooks' for the designers </li></ul><ul><ul><li>Put a class and id on each body element </li></ul></ul><ul><ul><ul><li>class should be the site section </li></ul></ul></ul><ul><ul><ul><li>id should be the page </li></ul></ul></ul><ul><ul><ul><li>Designers can then use descendant selectors page-by-page </li></ul></ul></ul><ul><ul><li>id each major 'section' of the page </li></ul></ul><ul><ul><ul><li>Header </li></ul></ul></ul><ul><ul><ul><li>Footer </li></ul></ul></ul><ul><ul><ul><li>Leftside </li></ul></ul></ul><ul><ul><ul><li>Rightside </li></ul></ul></ul>

    ×