CSSTuesday, April 16, 13
(the size and style you see are                    just browser defaults)Tuesday, April 16, 13
<head>      <title>Resume</title>      <link rel="stylesheet" href="reset.css">    </head>Tuesday, April 16, 13
reset.cssTuesday, April 16, 13
style1.cssTuesday, April 16, 13
style2.cssTuesday, April 16, 13
style3.cssTuesday, April 16, 13
style4.cssTuesday, April 16, 13
Basic CSSTuesday, April 16, 13
h2 {                               font-size: 18px;                               margin-bottom: 10px;                    ...
selector                        h2 {                               font-size: 18px;                               margin-b...
h2 {                               font-size: 18px;                               margin-bottom: 10px;                    ...
declaration                        h2 {                               font-size: 18px;                               margi...
property value                        h2 {                               font-size: 18px;                               ma...
h2 {                               font-size: 18px;                               margin-bottom: 10px;                    ...
h2 {                               font-size: 18px;                               margin-bottom: 10px;                    ...
selector { property: value; }                        h2 {                               font-size: 18px;                  ...
Tuesday, April 16, 13
Tuesday, April 16, 13
body {                            font-family:Helvetica,Arial,sans-serif;                            margin-left: 20%;    ...
h2 {                               font-size: 18px;                               margin-bottom: 10px;                    ...
font-variant: small-caps;Tuesday, April 16, 13
SelectorsTuesday, April 16, 13
Element SelectorsTuesday, April 16, 13
The rule:                        Element selectors apply to all elements definedTuesday, April 16, 13
<p>Zach Wise</p>          p {                font-style: italic;          }Tuesday, April 16, 13
Class SelectorsTuesday, April 16, 13
The rule:                        Class selectors help further refine HTML types                        Class selectors may ...
<p class=”byline”>Zach Wise</p>          .byline {                font-style: italic;          }Tuesday, April 16, 13
ID SelectorsTuesday, April 16, 13
The rule:                        ID selectors help further refine HTML types                        ID selectors may be use...
<p id=”byline”>Zach Wise</p>          #byline {                font-style: italic;          }Tuesday, April 16, 13
Upcoming SlideShare
Loading in …5
×

Introduction to CSS

867 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
867
On SlideShare
0
From Embeds
0
Number of Embeds
456
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to CSS

  1. 1. CSSTuesday, April 16, 13
  2. 2. (the size and style you see are just browser defaults)Tuesday, April 16, 13
  3. 3. <head> <title>Resume</title> <link rel="stylesheet" href="reset.css"> </head>Tuesday, April 16, 13
  4. 4. reset.cssTuesday, April 16, 13
  5. 5. style1.cssTuesday, April 16, 13
  6. 6. style2.cssTuesday, April 16, 13
  7. 7. style3.cssTuesday, April 16, 13
  8. 8. style4.cssTuesday, April 16, 13
  9. 9. Basic CSSTuesday, April 16, 13
  10. 10. h2 { font-size: 18px; margin-bottom: 10px; }Tuesday, April 16, 13
  11. 11. selector h2 { font-size: 18px; margin-bottom: 10px; }Tuesday, April 16, 13
  12. 12. h2 { font-size: 18px; margin-bottom: 10px; }Tuesday, April 16, 13
  13. 13. declaration h2 { font-size: 18px; margin-bottom: 10px; }Tuesday, April 16, 13
  14. 14. property value h2 { font-size: 18px; margin-bottom: 10px; }Tuesday, April 16, 13
  15. 15. h2 { font-size: 18px; margin-bottom: 10px; }Tuesday, April 16, 13
  16. 16. h2 { font-size: 18px; margin-bottom: 10px; }Tuesday, April 16, 13
  17. 17. selector { property: value; } h2 { font-size: 18px; margin-bottom: 10px; }Tuesday, April 16, 13
  18. 18. Tuesday, April 16, 13
  19. 19. Tuesday, April 16, 13
  20. 20. body { font-family:Helvetica,Arial,sans-serif; margin-left: 20%; margin-right: 20%; margin-top: 30px; margin-bottom: 30px; }Tuesday, April 16, 13
  21. 21. h2 { font-size: 18px; margin-bottom: 10px; border-bottom: 2px solid #000000; padding-bottom: 2px; }Tuesday, April 16, 13
  22. 22. font-variant: small-caps;Tuesday, April 16, 13
  23. 23. SelectorsTuesday, April 16, 13
  24. 24. Element SelectorsTuesday, April 16, 13
  25. 25. The rule: Element selectors apply to all elements definedTuesday, April 16, 13
  26. 26. <p>Zach Wise</p> p { font-style: italic; }Tuesday, April 16, 13
  27. 27. Class SelectorsTuesday, April 16, 13
  28. 28. The rule: Class selectors help further refine HTML types Class selectors may be used multiple times / pageTuesday, April 16, 13
  29. 29. <p class=”byline”>Zach Wise</p> .byline { font-style: italic; }Tuesday, April 16, 13
  30. 30. ID SelectorsTuesday, April 16, 13
  31. 31. The rule: ID selectors help further refine HTML types ID selectors may be used ONE time / pageTuesday, April 16, 13
  32. 32. <p id=”byline”>Zach Wise</p> #byline { font-style: italic; }Tuesday, April 16, 13

×