Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS REFRESHER
Styling HTML elements
what is css?
• Cascading Style Sheets
• A set of rules on how to display your
  HTML elements
• Internal documents: embedd...
Basic CSS RULE
SELECTORS
• Tag/element: p{color:black;}
  <p>This text will be black</p>

• ID: #alternate {color:green;}
  <p id=“altern...
MORE SELECTORS
• Element-specific: p.red
                       {color:red;}
  <p class=“red”>This text will be
  red</p>
...
HOW to apply CSS

• Internal stylesheet
• External stylesheet
• Inline stylesheet
INTERNAL CSS
<head>
<style type=“text/css”>
p.red {
color:red;
}
</style>
</head>
EXTERNAL CSS

<head>
<link rel=“stylesheet” type=“text/
css” href= “samples.css” />
</head>
INLINE CSS

<a href=“somewhere.html” style=
“color:black;text-size:25px”>
This is a link
</a>
CASCADING
• Elements can inherit rules from
  multiple style sheets
• Inheritance order:
 1. Browser default
 2. External ...
Exception!
<head>
<style type=“text/css”>
p.red {
color:red;
}
</style>
<link rel=“stylesheet” type=“text/
css” href= “sam...
RULES: BACKGROUND
body {
background-color:#000000;
background-image:url(‘bg.gif’);
background-repeat:repeat-y;
background-...
RULES: BACKGROUND

body {
background:#000000 url(‘bg.gif’)
repeat-y scroll right top
}
RULES: TEXT
h1 {
color:blue;
text-align:right;
text-decoration:underline;
text-transform:uppercase;
text-indent:50px;
}
RULES: TEXT

h1 {
word-spacing:10px;
line-height:30px;
letter-spacing:-5px;
}
RULES: FONT
p.font {
font-family:“Times New Roman”,
Verdana, Arial;
font-style:italic;
font-size:16px;
font-variant:small-...
Web units

• pixel: font-size:32px
• percent: font-size:200%
• em: font-size:2em
LINK STYLES
•   a:link{color:blue;}

•   a:visited{color:green;}

•   a:hover{color:pink;}

•   a:active{color:black;}
Upcoming SlideShare
Loading in …5
×

CSS Refresher

4,691 views

Published on

  • Be the first to comment

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;}

×