1. CSS – Properties & Values

2. CSS – Rule Structure Declaration block Selector – example
Property: identifies what to change
Value: how to change it
Selector – example
h1{
font-size: small;
font-family: Georgia, ‘Times New Roman’, Times, serif;
color: #CC3300;
margin-top: 4em;
margin-bottom: 10em; }

3. CSS – Properties Font Ex: h1 { font-size: 1.5em;}
Font-family | serif | sans-serif | monospace | cursive | fantasy | name |
body { font-family: Courier, monospace; }
p { font-family: “Trebuchet MS”, Verdana, Arial, sans-serif; }
“suggestion”
Font-size | length unit | % | xx-small | x-small | small | medium | | large | x-large | xx-large | smaller | larger |
Font-weight | normal | bold | | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Font-style |normal | italic | oblique |
Font-variant | normal | small-caps |
Font (shortcut) {font: style weight variant size/line-height font-family} Ex: h2 {font: oblique bold small-caps 1.5em/2 sans-serif;}
Embedded web rule

4. CSS Properties: font family
font-family property | serif | sans-serif | monospace | cursive | fantasy | name |
body { font-family: Courier, monospace; }
p { font-family: “Trebuchet MS”, Verdana, Arial, sans-serif; }
“suggestion”

5. CSS Web Fonts: @font-face
@font-face rule
used with fonts you own and that are hosted on your own server

6. CSS Web Fonts: alternatives
@import rule
Loads font from Google Fonts ( )
placed in css

7. CSS Web Fonts: alternatives
<link>ing a style sheet
links to font from Google Fonts ( )
placed in head of html

8. CSS Web Fonts: formats TrueType Fonts (TTF) | OpenType Fonts (OTF) SVG
Embedded Open Type (EOT)
Web Open Font Format (WOFF) (WOFF 2.0) often load faster because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts.

9. CSS Web Fonts: Font Services
Hosted Font Services
Typekit ( )
Fontspring ( )
Fonts.com ( )
Google Fonts ( )
Font Squirrel ( )

10. CSS Properties: font style
font-style property |normal | italic | oblique |
Normal – text shown normally
Italic – text shown italics
Oblique – text is “leaning”

11. CSS Properties: font size
font-size property | length unit | % | xx-small | x-small | small | medium | | large | x-large | xx-large | smaller | larger | Normal – text shown normally
Absolute Size:
Sets the text to a specified size
Does not allow user to change text size in all browsers (bad for accessibility)
Useful when physical output size is known
Relative Size:
Sets size relative to surrounding elements
Allows user to change text size in browser
Default size = 16px (16px=1em)

12. CSS – Measurements Absolute Units Relative Units
pt - points (1/72 inch)
pc - picas (1 pica = 12 points)
mm - millimeters
cm - centimeters
in - inches
Relative Units
em - equal to the current font size
ex - approx. height of a lowercase “x” in current font
px – pixel (varies depending on resolution)
% - percentage

13. CSS – Measurements If your default or base font size is 16 pixels Then
h1{font-size: 1.5em;} = 24 (1.5 X 16 =24)
body {font-size: 100%;} h1 {font-szie: 150%;} /*150 of 16 = 24*/

14. CSS Properties: font size
font-size property | length unit | % | xx-small | x-small | small | medium | | large | x-large | xx-large | smaller | larger | Normal – text shown normally
Example in pixels

15. CSS Properties: font size
font-size property | length unit | % | xx-small | x-small | small | medium | | large | x-large | xx-large | smaller | larger | Normal – text shown normally
Example using ems

16. CSS Properties: font size
font-size property | length unit | % | xx-small | x-small | small | medium | | large | x-large | xx-large | smaller | larger | Normal – text shown normally
Example using % and ems

17. CSS Properties: font weight
font-weight property | normal | bold | | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |

18. CSS Properties: font variant
font-variant property | normal | small-caps |

19. CSS Properties: font shorthand
font shorthand property {font: style weight variant size/line-height font-family} Ex: h2 {font: oblique bold small-caps 1.5em/2 sans-serif;}

20. CSS Properties: text alignment
text-align property
p {text-align: left;}
p {text-align: right;}
p {text-align: center;}
p {text-align: justify;}

21. CSS Properties: text decoration
text-decoration property
a {text-decoration: underline;}
a {text-decoration: overline;}
a {text-decoration: line-through;}
a {text-decoration: blink;}
a {text-decoration: none;}

22. CSS Properties: text transformation
text-transform property
h1{text-transform:none;}
h1{text-transform:capitalize;}
h1{text-transform:lowercase;}
h1{text-transform:uppercase;}

23. CSS Properties: text indentation
text-indent property (indents 1st line of paragraph)
p {text-indent: 2em;}
p {text-indent: 25%}
p {text-indent: -35px;}

24. CSS Properties: letter/word spacing
letter-spacing property | word-spacing property
h1 {letter-spacing: 8px;}
h1 {word-spacing: 1.5em;}

25. CSS Properties: line height
Line-height property
p {line-height: 2;}
p {line-height: 2em;}
p {line-height: 200%}

26. CSS Properties: text shadow
Text-shadow property
h-shadow (the x-coordinate)
v-shadow (the y-coordinate)
blur (the blur radius)
color (color of shadow)

27. CSS Properties: color values
color property
Predefined / Cross-browser color names: “red”
Hexadecimal colors: #00FFFF or #0FF
RGB / RGBA colors: rgb(0, 255, 255) and rgba(0,255,255,.5)
HSL / HSLA colors: (180, 100%, 50%) hsla(180,100%50%,.5)
named colors
Color name
color: red;
background-color: olive;
border-bottom-color: blue;

28. CSS Properties: color values
Hexadecimal colors
Color: #FFCC00;
Color: #FC0;
White=#FFFFFF or #FFF (equivalent of 255,255,255) full blast
Black=# or #000 (equivalent of 0,0,0) no light
Hex: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

29. CSS Properties: color values
RGB and RGBa Colors
Specified with a comma-separated list of three numeric values
0-255 | 0%-100%
RGBa adds a fourth value for the alpha channel (sets opacity of color)
0.0 (fully transparent to 1(fully opaque)
RGBa h1 {color: rgba(0,255,255,.5);} (50% transparency) a=alpha channel or the level of transparency (not support in IE8 and earlier)

30. CSS Properties: color values
HSL and HSLa Colors
Specified with a comma-separated list of three numeric values
Hue (0-360) Saturation (0%-100%) and Lightness (0%-100%)
HSLa adds a fourth value for the alpha channel (sets opacity of color)
0.0 (fully transparent to 1(fully opaque)