Your SlideShare is downloading. ×
0
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
C S S  Top  Elements
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

C S S Top Elements

546

Published on

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

No Downloads
Views
Total Views
546
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.  
  • 2. Font-size : x-large ; p { Background-color : purple ; } Selector Property names Declarations or values
  • 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
  • 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
  • 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>
  • 6. Font Size Color Background Links Headings Font-family: Font-size: color: a:link a:visited H1 H2 P
  • 7.  
  • 8. <ul><li>Points for wrappers </li></ul>
  • 9.  
  • 10.  
  • 11. <ul><li>Create a DIV #wrapper </li></ul><ul><li>Box: 700 px width </li></ul>
  • 12. <ul><li>html, body { margin: 0px; padding: 0px; border: 0px; } </li></ul>
  • 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>
  • 14.  
  • 15. Pixels for relative size (exc IE) Ems for relative sizes Numbers for absolute size Relative Sizes based on default
  • 16. Size Matters Pixel – dot on computer monitor – exc. IE Points – 1/72 inch Inch Centimeter Millimeter Pica Ems Exs Percentages
  • 17.  
  • 18. <ul><li>Format as you go </li></ul><ul><li>Create rules </li></ul>Link Add Edit Delete
  • 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>
  • 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>
  • 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>
  • 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
  • 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/
  • 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>

×