C S S Top Elements

688 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
688
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

C S S Top Elements

  1. 2. Font-size : x-large ; p { Background-color : purple ; } Selector Property names Declarations or values
  2. 3. <ul><li>HTML Style </li></ul><ul><li>P </li></ul><ul><li>H1 </li></ul><ul><li>H2 </li></ul><ul><li>body </li></ul><ul><li>Class Style </li></ul><ul><li>.class </li></ul><ul><li>Psuedo-class </li></ul>Applies to common tags Applies to anything ID DIV isions
  3. 4. HEAD BODY <title> </title> <p> </p> <h1> </h1> <style type=&quot;text/css&quot;> <!-- .style1 { font-size: xx-large; font-family: Georgia, serif; color: #FF0000; } --> </style> <h1 class=&quot;style1&quot;>This is an H1 Style</h1> ADD CSS for Styles Internal CSS Sheet
  4. 5. <ul><li>Internal / Embedded </li></ul><ul><li>Build one page with all attributes & styles </li></ul><ul><li>Export the styles to separate CSS page </li></ul><ul><li>External </li></ul><ul><li>Build regular html page </li></ul><ul><li>Build separate CSS page </li></ul><ul><li>Link the HTML to CSS </li></ul>
  5. 6. Font Size Color Background Links Headings Font-family: Font-size: color: a:link a:visited H1 H2 P
  6. 8. <ul><li>Points for wrappers </li></ul>
  7. 11. <ul><li>Create a DIV #wrapper </li></ul><ul><li>Box: 700 px width </li></ul>
  8. 12. <ul><li>html, body { margin: 0px; padding: 0px; border: 0px; } </li></ul>
  9. 13. <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>
  10. 15. Pixels for relative size (exc IE) Ems for relative sizes Numbers for absolute size Relative Sizes based on default
  11. 16. Size Matters Pixel – dot on computer monitor – exc. IE Points – 1/72 inch Inch Centimeter Millimeter Pica Ems Exs Percentages
  12. 18. <ul><li>Format as you go </li></ul><ul><li>Create rules </li></ul>Link Add Edit Delete
  13. 19. Stay Out of TR ou BL e <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>
  14. 20. <ul><li>Link Order </li></ul><ul><li>a:link </li></ul><ul><li>a:visited </li></ul><ul><li>a:hover </li></ul><ul><li>a:active </li></ul>
  15. 21. <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>
  16. 22. <ul><li>Style Larger elements first </li></ul><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 – Starts with a . Case sensitive. </li></ul></ul><ul><ul><li>ID – one element – Starts with a # Case sensitive. </li></ul></ul><ul><li>Name Styles & Classes </li></ul><ul><ul><li>No starting with # or non-alpha </li></ul></ul>http://webdesign.about.com/od/css/a/aa071204.htm
  17. 23. <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/
  18. 24. <ul><li>a:link </li></ul><ul><li>a:visited </li></ul><ul><li>a:hover </li></ul><ul><li>a:active </li></ul><ul><li>a.nav:link </li></ul><ul><li>a.nav:visited </li></ul><ul><li>a.nav:hover </li></ul><ul><li>a.nav:active </li></ul>

×