CSS Refresher

4,242 views
3,895 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,242
On SlideShare
0
From Embeds
0
Number of Embeds
462
Actions
Shares
0
Downloads
108
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

CSS Refresher

  1. 1. CSS REFRESHER Styling HTML elements
  2. 2. what is css? • Cascading Style Sheets • A set of rules on how to display your HTML elements • Internal documents: embedded in the head part of the HTML file • External documents: something.css
  3. 3. Basic CSS RULE
  4. 4. SELECTORS • Tag/element: p{color:black;} <p>This text will be black</p> • ID: #alternate {color:green;} <p id=“alternate”>This will be green</p> • Class: .another{color:blue;} <p class=“another”>While this will be blue</p>
  5. 5. MORE SELECTORS • Element-specific: p.red {color:red;} <p class=“red”>This text will be red</p> • Multiple elements: .title, .head {color:pink;} <h1 class=“head”>Pink Heading</h1> <p class=“title”>Pink Title</p>
  6. 6. HOW to apply CSS • Internal stylesheet • External stylesheet • Inline stylesheet
  7. 7. INTERNAL CSS <head> <style type=“text/css”> p.red { color:red; } </style> </head>
  8. 8. EXTERNAL CSS <head> <link rel=“stylesheet” type=“text/ css” href= “samples.css” /> </head>
  9. 9. INLINE CSS <a href=“somewhere.html” style= “color:black;text-size:25px”> This is a link </a>
  10. 10. CASCADING • Elements can inherit rules from multiple style sheets • Inheritance order: 1. Browser default 2. External stylesheet 3. Internal stylesheet 4. Inline style
  11. 11. Exception! <head> <style type=“text/css”> p.red { color:red; } </style> <link rel=“stylesheet” type=“text/ css” href= “samples.css” /> </head>
  12. 12. RULES: BACKGROUND body { background-color:#000000; background-image:url(‘bg.gif’); background-repeat:repeat-y; background-attachment:scroll; background-position:right top; }
  13. 13. RULES: BACKGROUND body { background:#000000 url(‘bg.gif’) repeat-y scroll right top }
  14. 14. RULES: TEXT h1 { color:blue; text-align:right; text-decoration:underline; text-transform:uppercase; text-indent:50px; }
  15. 15. RULES: TEXT h1 { word-spacing:10px; line-height:30px; letter-spacing:-5px; }
  16. 16. RULES: FONT p.font { font-family:“Times New Roman”, Verdana, Arial; font-style:italic; font-size:16px; font-variant:small-caps; font-weight:bolder; }
  17. 17. Web units • pixel: font-size:32px • percent: font-size:200% • em: font-size:2em
  18. 18. LINK STYLES • a:link{color:blue;} • a:visited{color:green;} • a:hover{color:pink;} • a:active{color:black;}

×