SlideShare a Scribd company logo

CSS For Coders

•Download as PPT, PDF•
•
G
ggfergu

This document provides an introduction to CSS (Cascading Style Sheets) for web developers. It discusses CSS terminology like selectors using id and class attributes. It also covers how to select and style groups of elements and descendants. The document gives examples of using CSS for colors, backgrounds, typography, layout using the box model, and print styles. It emphasizes clean separation of code and content and providing hooks for designers to easily style pages.

Related slideshows

Using Core Themes in Drupal 8
Using Core Themes in Drupal 8Using Core Themes in Drupal 8
Using Core Themes in Drupal 8
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Developing Context-sensitive Help for Web-based Applications - Scott DeLoach,...
Developing Context-sensitive Help for Web-based Applications - Scott DeLoach,...Developing Context-sensitive Help for Web-based Applications - Scott DeLoach,...
Developing Context-sensitive Help for Web-based Applications - Scott DeLoach,...
 
1 of 15
CSS for Coders
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/
Our Design Template Arizona Videography
Web Developer Toolbar for Firefox Get it from: http://addons.mozilla.org/addon/60 Or google “ web developer toolbar ”
CSS Terminology
How to use CSS in XHTML Inline Embedded Link Import Multiple
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)‏
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;}
Designer ‘Stuff’ Colors and Backgrounds Change body foreground and background Change 'container' background Change h2 backgrounds Typography Change typography and size
Margin, Padding, Border ‘Box Model’ Margin Padding Border
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
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
Common Fixes Add whitespace Change link color Add Print/Handheld styles Navbar from a list Add image background
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
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

More Related Content

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