Style Chart
Below is a chart that contains all the common styles for the associated content type.
Elements
|
Style |
Description | Example |
| background-color: color | Specifies the background color of the element | background-color: #0000FF; |
| margin: amount | Sets the margin for the element | margin: 0; |
| margin-top: amount | Sets the top margin for the element | margin-top: 10px; |
| margin-bottom: amount | Sets the bottom margin for the element | margin-bottom: 10px; |
| margin-left: amount | Sets the left margin for the element | margin-left: 10px; |
| margin-right: amount | Sets the right margin for the element | margin-right: 10px; |
| padding: amount | Sets the padding for the element | padding: 0; |
| padding-up: amount | Sets the top padding for the element | padding-up: 10px; |
| padding-bottom: amount | Sets the bottom padding for the element | padding-bottom: 10px; |
| padding-left: amount | Sets the left padding for the element | padding-left: 10px; |
| padding-right: amount | Sets the right padding for the element | padding-right: 10px; |
| clear: side | Sets which side the element should clear | clear: both; |
| float: side | Sets which side the element should float towards | float: left; |
| width: size | Sets the width of the element | width: 100px; |
| height: size | Sets the height of the element | height: 200px; |
| border: amount | Sets the border of the element | border: 1px solid #000000; |
| border-top: amount | Sets the border at the top of the element | border-top: 1px solid #000000; |
| border-bottom: amount | Sets the border at the bottom of the element | border-bottom: 1px solid #00FF00; |
| border-left: amount | Sets the border on the left of the element | border-left: 1px solid #CC0000; |
| border-right: amount | Sets the border on the right of the element | border-right: 1px dotted #00005B; |
| border-collapse: type | Collapses the borders of the table element | border-collapse: collapse; |
Text
|
Style |
Description | Example |
|
font-size: size |
Sets the font size | font-size: 20px; |
| font-family: font_family | Sets the font family | font-family: Arial; |
| font-weight: weight | Sets the font weight | font-weight: bold; |
| font-style: style | Sets the font style | font-style: italic; |
| text-decoration: decoration | Creates a line below or above the text | text-decoration: underline; |
| text-align: alignment | Sets the text alignment | text-align: center; |
| color: color | Sets the font color |
color: #BBBBBB; |
Lists
| Style | Description | Example |
| list-style: style | Changes the default way a list displays | list-style: none; |
| list-style-type: type | Changes the default type of list |
list-style-type: disc; |
| list-style-image: image | Changes the default image to use as a marker | list-style-image: url(bullet.gif); |
