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 ”
- 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