Cascading Style Sheets
CSS
CSS - Structure
 Declaration block
 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;
}
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 fonts @font-face rule
CSS Measurements
 Absolute 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
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*/
CSS Properties
 Line height
 Indents (indents 1st line of paragraph)
 p {line-height: 2;}
 p {text-indent: 2em;}
 p {line-height: 2em;}
 p {text-indent: 25%}
 p {line-height: 200%}
 p {text-indent: -35px;}
 Text Color
 alignment
 h1{color: gray;}
 p {text-align: left;}
 h1{color:#666666}
 p {text-align: right;}
 h1{color:#666;}
 p {text-align: center;}
 h1{color: fuchsia;}
 p {text-align: justify;}
(17 standard color names defined in CSS2.1)
CSS Properties
 Text-decoration
 Spacing (letter & word)
 a {text-decoration: underline;}
 p {letter-spacing: 8px;}
 a {text-decoration: overline;}
 p {word-spacing: 1.5em;}
 a {text-decoration: line-through;}
 a {text-decoration: blink;}
 a {text-decoration: none;}
 Text-transform
 h1{text-transform:none;}
 h1{text-transform:capitalize;}
 h1{text-transform:lowercase;}
 h1{text-transform:uppercase;}
CSS Color Values
 Color name
 Hexadecimal colors
 color: red;
 background-color: olive;
 border-bottom-color: blue;
 RGB color
 Color: rgb(200, 178, 230);
 Color: #FFCC00;
 Color: #FC0;
 White=#FFFFFF or #FFF
(equivalent of 255,255,255) full blast
 Black=#000000 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
 Text Shadow (CSS3) (not supported by
earlier versions of IE)
 h1 { color: darkgreen;
text-shadow: .2em .2em sliver;}
(horizontal offset, vertical offset, optional blur radius and color)
RGBa
h1 {color: rgba(0,0,0,.5);} (50% transparency)
a=alpha channel or the level of transparency
(not support in IE8 and earlier)
The Box Model
 Block and inline elements are seen as being contained in rectangular
boxes
CSS Padding, Borders, Margins
 Width & height of element
 Padding
 Border
 Margin
CSS box elements
 Width & height
 p {width: 400px; height: 100px;
background: #C2F670;}
 Padding | top | right | bottom | left |
 Blockquote {
padding-top: 1em;
padding-right: 3em;
 overflow
 Less common to specify height
 |visible|hidden|scroll|
 p{ height: 15px; width: 15px;
overflow: scroll;}
padding-bottom: 1em;
padding-left: 3em; }
 Shortcut
blockquote{
padding: 1em 3em 1em 3em; } TRBL
 {padding: top right/left bottom;}
{padding: 1em 3em 1em;}
 {padding: top/bottom right/left;}
{padding: 1em 3em;}
 {padding: 15px;}
CSS box elements
 Border-style | top | right | bottom | left |
 |none | dotted | dashed | solid | double |
| groove | ridge | inset | outset |
 h1 {
 Border-color| top | right | bottom | left |
 | value |
 h1 {
border-color: aqua;
border-bottom-style: solid;
border-bottom-style: solid;
width: 300px;}
border-width: 6px;
 Border-width
 |value | thin | medium | thick |
 h1{
border-bottom-width: 12px;
border-style: solid;
width: 300px:}
width: 300px;}
 shortcut
 |style | width | color |
 h1{ border-bottom: 1px solid; #663 }
CSS box elements
 margin | top | right | bottom | left |
 h1 {
margin-top: 2em;
margin-right: 250px;
margin-bottom: 1em;
margin-left: 4em;
border: 1px solid red; }
 Remember border is around element & padding not margim
CSS Images
 Background-image
 Body {
background-image: url(logo.gif); }
 Blockquote {
background-image: url(logo.gif);
border: 4px dashed; }
 Tiling
 |repeat | repeat-x | repeat-y | no-repeat |
 Body {
background-image: url(logo.gif);
background-repeat: no-repeat; }
 Background-position
 |value | left | center | right | top | bottom |
 Body { background-image: url(logo.gif);
background-position: left bottom; }
 |value |
 Body { background-image: url(logo.gif);
background-position: 200px 50px; }
(distance from top-left corner)
 Background-attachment
 |scroll | fixed |
 Body { background-image: url(logo.gif);
background-attachement: fixed; }
Let’s see how this works…