CSS For Coders

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

11 Favorites

CSS For Coders - Presentation Transcript

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

+ ggferguggfergu, 3 years ago

custom

2061 views, 11 favs, 2 embeds more stats

This is the CSS for Coders Session taught by Jerry more

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 2061
    • 2053 on SlideShare
    • 8 from embeds
  • Comments 1
  • Favorites 11
  • Downloads 184
Most viewed embeds
  • 6 views on http://desertcodecamp.com
  • 2 views on http://www.desertcodecamp.com

more

All embeds
  • 6 views on http://desertcodecamp.com
  • 2 views on http://www.desertcodecamp.com

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories