Introduction To CSS
CSS Tutorials
Introduction To CSS
Single Page Reference
A much more complete reference can be found at the W3Schools page,
http://www.w3schools.com/cssref/default.asp
Text & Formatting Properties
| Property | Values or Units | What It Does | Example |
|---|---|---|---|
| color: | A named colour. | Sets the colour of the text | color:green; |
| font-family: | The name of a font | Sets the font that you want to use | font-family: Verdana; |
| font-size: | pt px | Sets the size of the font in points or pixels. | font-size: 12pt |
| font-weight: | bold normal | Sets the font to bold or normal | font-weight: bold; |
| font-style: | italic normal | Sets the font to italic or normal | font-weight: italic; |
| letter-spacing: | px | Sets the space between each letter in pixels. | letter-spacing: 4px; |
| text-align: | center left right justify | Sets the text alignment | text-align: justify; |
| text-decoration: | underline overline line-through none | Changes the way that the text is decorated | text-decoration: underline; |
| word-spacing: | px | Sets the space between each word in pixels. | word-spacing: 10px; |
Box Properties
| Property | Values or Units | What It Does | Example |
|---|---|---|---|
| width: | px % | Sets the width in pixels or a % of the available space | width: 100%; |
| height: | px % | Sets the height in pixels or a % of the available space | height: 100px; |
| background-color: | A named colour. | Sets the background colour | background-color: pink; |
| padding: | px % | Sets the space between the contents of the box and its border | padding: 10px; |
| border: | px solid & colour | Sets the width and colour of all borders. Can also be set to 0. | border: 1px solid black; |
| border-left: | px solid & colour | Sets the width and colour of the border. Can also be set to 0. | border-left: 1px solid green; |
| border-right: | px solid & colour | Sets the width and colour of the border. Can also be set to 0. | border-right 1px solid blue; |
| border-top: | px solid & colour | Sets the width and colour of the border. Can also be set to 0. | border-top:1px solid yellow; |
| border-bottom: | px solid & colour | Sets the width and colour of the border. Can also be set to 0. | border-bottom:1px solid white; |
| border-collapse: | collapse separate | Makes the table cell borders collapse together or stay separate. | border-collapse: collapse; |