Document Reference: TN200909003 - Rev: 4.16 - Last Update: 16-11-2017 13:15 GMT - Downloaded: 02-Oct-2023 06:35 GMT
This reference listing notes some of the most commonly used CSS properties.
The listing below is not intended to be a comprehensive list of all existing properties. Listed are CSS properties that were defined as part of CSS1 and CSS2 only.
CSS properties can be applied in many ways to different HTML element. Examples below are based on generic use only and do not cover all valid property value / property name combinations.
Box Model Properties
Property Name | Description |
|---|---|
float | The float property defines if a <div> or <img> element should float to the left or to the right, e.g.: {float: left;} or {float: right;}. |
width | This property defines the width of a <div> element, e.g.: {width: 996px;}. |
height | Defines the height of a <div> element, e.g.: {height: 100px;}. |
margin | Defines the margin for all four sides in one declaration. First value relates to top margin, second value to right margin, third value to bottom margin and fourth value to left margin, e.g.: {margin: 10px 20px 8px 15px;}. |
padding | Defines the padding for all four sides in one declaration. First value relates to top padding, second value to right padding, third value to bottom padding and fourth value to left padding, e.g.: {padding: 10px 20px 8px 15px;}. |
display | Allows for an element to be displayed as inline element (e.g. <span> element) or as block element (e.g. <p> element). E.g.: {display: inline;} or {display: block;}. |
clear | The clear property defines the side(s) that another floating HTML element is/are not allowed to be positioned, e.g.: {clear: left;}, {clear: right;} or {clear: both;}. |
Background And Border Properties
Property Name | Description |
|---|---|
background-color | This property defines the background color of a <div> or <body> element. The colour may be specified using one of the predefined HTML color names, hex value or RGB value, e.g.: {background-color: silver;}, {background-color: #c0c0c0;} or {background-color: rgb(192,192,192);}. |
background-image | Allows the use of an image as background image of a <div> or <body> element, e g.: {background-image: url("../images/css/wrapper-bg.jpg");}. |
background-position | Sets the position of a background image, e.g.:{background-position: left top;},{background-position: left center;},{background-position: left bottom;},{background-position: right top;},{background-position: right center;},{background-position: right bottom;},{background-position: center top;},{background-position: center center;},{background-position: center bottom;},{background-position: 33% 33%;} or{background-position: 10px 20px;}. |
background-repeat | Specifies whether a background image is repeated (tiled) and how it is repeated, e.g.:{background-repeat: no-repeat;},{background-repeat: repeat-x;} or {background-repeat: repeat-y;}.By default, a background-image is repeated vertically and horizontally. |
border | Defines the border for all four sides of a <div> in one declaration. First value relates to border width, second value to border style and third value to border colour, e.g.: {border: 2px solid silver;}. |
Textual Content Properties
Property Name | Description |
|---|---|
font-family | Defines a prioritised list of font names and/or generic font family names, e.g.:{font-family: Arial, Helvetica, sans-serif;},{font-family: Geneva, Arial, Helvetica, sans-serif;},{font-family: Tahoma, Geneva, Helvetica, sans-serif;},{font-family: Verdana, Arial, Helvetica, sans-serif;},{font-family: Georgia, "Times New Roman", Times, serif;},{font-family: "Times New Roman", Times, serif;},{font-family: "Courier New", Courier, mono;}or{font-family: "Comic Sans MS", cursive, sans-serif;}. |
font-size | The size of the displayed font, e.g.: {font-size: 12px;}. |
color | Defines the text colour. The colour may be specified using one of the predefined HTML color names, hex value or RGB value, e.g.: {color: blue;}, {color: #000080;} or {color: rgb(0,0,128);}. |
font-weight | Weight of the displayed font, e.g. {font-weight: bold;} or {font-weight: normal;}. |
font-style | Defines the font style, e.g. {font-style: italic;} or {font-style: normal;}. |
text-decoration | Sets the text decoration, e.g. {text-decoration: underline;}, {text-decoration: line-through;} or {text-decoration: none;}. |
text-align | Aligns content, not only text, within an HTML element, e.g. {text-align: left;}, {text-align: center;} or {text-align: right;}. |
text-indent | Indents the first line of a block of text, e.g.: {text-indent: 35px;}. |
letter-spacing | Sets the spacing between individual character, e.g.: {letter-spacing: 2px;}. Negative values are allowed, e.g.: {letter-spacing: -1px;}. |
word-spacing | Sets the spacing between individual words, e.g.: {word-spacing: 2px;}. |
line-height | Sets the height of a text line, e.g.: {line-height: 20px;}. |
List Properties
Property Name | Description |
|---|---|
list-style | Defines all the list style properties in one declaration. Properties for <ol> elements:{list-style: decimal;},{list-style: lower-alpha;},{list-style: upper-alpha;},{list-style: lower-roman;} or {list-style: upper-roman;}.Properties for <ul> elements:{list-style: none;},{list-style: disc;},{list-style: circle;} or{list-style: square;}}. |
list-style-image | Defines the image used as a list style marker, e.g.:{list-style-image: url ("images/marker.gif");}. |