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 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 p {line-height: 2;} p {line-height: 2em;} p {line-height: 200%} Text Color h1{color: gray;} h1{color:#666666} h1{color:#666;} h1{color: fuchsia;} (17 standard color names defined in CSS2.1) Indents (indents 1 st line of paragraph) p {text-indent: 2em;} p {text-indent: 25%} p {text-indent: -35px;} alignment p {text-align: left;} p {text-align: right;} p {text-align: center;} p {text-align: justify;}

CSS Properties Text-decoration a {text-decoration: underline;} a {text-decoration: overline;} 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;} Spacing (letter & word) p {letter-spacing: 8px;} p {word-spacing: 1.5em;}

CSS Color Values Color name color: red; background-color: olive; border-bottom-color: blue; RGB color Color: rgb(200, 178, 230); 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) 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 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;} overflow Less common to specify height |visible|hidden|scroll| p{ height: 15px; width: 15px; overflow: scroll;} Padding | top | right | bottom | left | Blockquote { padding-top: 1em; padding-right: 3em; 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-bottom-style: solid; width: 300px;} Border-width |value | thin | medium | thick | h1{ border-bottom-width: 12px; border-style: solid; width: 300px:} Border-color| top | right | bottom | left | | value | h1 { border-color: aqua; border-bottom-style: solid; border-width: 6px; 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…