Your SlideShare is downloading. ×
CSS Refresher
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

CSS Refresher

3,170
views

Published on


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

No Downloads
Views
Total Views
3,170
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
104
Comments
0
Likes
2
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. CSS REFRESHER Styling HTML elements
  • 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. Basic CSS RULE
  • 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. 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. HOW to apply CSS • Internal stylesheet • External stylesheet • Inline stylesheet
  • 7. INTERNAL CSS <head> <style type=“text/css”> p.red { color:red; } </style> </head>
  • 8. EXTERNAL CSS <head> <link rel=“stylesheet” type=“text/ css” href= “samples.css” /> </head>
  • 9. INLINE CSS <a href=“somewhere.html” style= “color:black;text-size:25px”> This is a link </a>
  • 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. Exception! <head> <style type=“text/css”> p.red { color:red; } </style> <link rel=“stylesheet” type=“text/ css” href= “samples.css” /> </head>
  • 12. RULES: BACKGROUND body { background-color:#000000; background-image:url(‘bg.gif’); background-repeat:repeat-y; background-attachment:scroll; background-position:right top; }
  • 13. RULES: BACKGROUND body { background:#000000 url(‘bg.gif’) repeat-y scroll right top }
  • 14. RULES: TEXT h1 { color:blue; text-align:right; text-decoration:underline; text-transform:uppercase; text-indent:50px; }
  • 15. RULES: TEXT h1 { word-spacing:10px; line-height:30px; letter-spacing:-5px; }
  • 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. Web units • pixel: font-size:32px • percent: font-size:200% • em: font-size:2em
  • 18. LINK STYLES • a:link{color:blue;} • a:visited{color:green;} • a:hover{color:pink;} • a:active{color:black;}