Css Basics

799 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
799
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
36
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css Basics

  1. 2. <ul><li>Separates Style from Content </li></ul><ul><ul><li>You don’t have to be both a great designer and a content expert! </li></ul></ul><ul><li>Maintenance is Easier </li></ul><ul><li>Site Accessibility </li></ul><ul><li>Current Site </li></ul>
  2. 3. <ul><li>HTML 3.2 </li></ul><ul><ul><li><font color=&quot;#0000ff&quot;><h4>a blue headline</h4></font> </li></ul></ul><ul><li>XHTML 1.0 </li></ul><ul><ul><li>HTML <h4>another blue headline</h4> </li></ul></ul><ul><ul><li>Style h4 {color : blue} </li></ul></ul>
  3. 4. <ul><li>Not best practice </li></ul><ul><ul><ul><li><h4 style=&quot;color: #0000ff;&quot;>a blue headline</h4> </li></ul></ul></ul>
  4. 5. <ul><li>Internal (Embedded) </li></ul><ul><ul><li><style type=&quot;text/css&quot; media=&quot;all&quot;> <!-- p { font: 1em Times serif; color: #c00; } h1 { font: 2em Times serif; color: #f00; } --> </style> </li></ul></ul>Internal (Embedded) <h1>Help!</h1> <p>Don’t forget that this is the content of the page</p> HEAD BODY
  5. 7. <ul><li>selector {property : value;} </li></ul><ul><ul><li>h1 {color: red;} h2 {color: red;} </li></ul></ul><ul><ul><li>h1, h2 {color: red;} </li></ul></ul>
  6. 8. <ul><li>H1, H2, P </li></ul><ul><li>.notes </li></ul><ul><li>.glossary </li></ul>
  7. 9. <ul><li>Block </li></ul><ul><ul><li><div>, <p>, <h1>, <form>, <ul>, <li> </li></ul></ul><ul><ul><ul><li>Always begin on a new line </li></ul></ul></ul><ul><ul><ul><li>Height, Margins can be changed </li></ul></ul></ul><ul><ul><ul><li>Width 100% of parent </li></ul></ul></ul><ul><li>Inline </li></ul><ul><ul><li><span>, <a>, <label>, <input>, <img>, <strong>, <em> </li></ul></ul><ul><ul><ul><li>Begin on same line </li></ul></ul></ul><ul><ul><ul><li>Height, Margins cannot be changed </li></ul></ul></ul><ul><ul><ul><li>Width can’t be changed. </li></ul></ul></ul>
  8. 10. <ul><li>DIVs for DIVisions of logical content </li></ul><ul><li>SPANs for exceptions to the rules </li></ul><ul><li>Styles </li></ul><ul><ul><li>Class – multiple elements </li></ul></ul><ul><ul><li>ID – one element </li></ul></ul><ul><li>Name Styles & Classes correction </li></ul><ul><ul><li>No starting with # or non-alpha </li></ul></ul><ul><li>Style Larger elements first </li></ul>http://webdesign.about.com/od/css/a/aa071204.htm
  9. 11. <ul><li>/* Structure */ </li></ul><ul><li>/* Typography */ </li></ul><ul><li>/* Links */ </li></ul><ul><li>/* Lists, images, etc. */ </li></ul>http://www.blogherald.com/2006/09/08/css-tips-and-tricks/
  10. 12. <ul><li>Font-family: </li></ul><ul><li>Font-weight: </li></ul><ul><li>Font-size: </li></ul><ul><li>Line-height: </li></ul><ul><li>Font-color: </li></ul>
  11. 13. <ul><li>html,body { margin: 0px; padding: 0px; border: 0px; } </li></ul>
  12. 14. <ul><li>body { font-size: 62.5% } </li></ul><ul><ul><li>Now continue to use ems for the rest of your font sizes </li></ul></ul>
  13. 15. <ul><li>Shorthand for Margins, Padding, Borders </li></ul><ul><ul><li>T op </li></ul></ul><ul><ul><li>R ight </li></ul></ul><ul><ul><li>B ottom </li></ul></ul><ul><ul><li>L eft </li></ul></ul>

×