Member Login:

Commonly Used CSS Properties

Document Reference: TN200909003 - Rev: 4.16 - Last Update: 16-11-2017 13:15 GMT - Downloaded: 22-Jun-2024 17:15 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 NameDescription
floatThe 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;}.
widthThis property defines the width of a <div> element, e.g.: {width: 996px;}.
heightDefines the height of a <div> element, e.g.: {height: 100px;}.
marginDefines 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;}.
paddingDefines 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;}.
displayAllows 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;}.
clearThe 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 NameDescription
background-colorThis 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-imageAllows 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-positionSets 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-repeatSpecifies 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.
borderDefines 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 NameDescription
font-familyDefines 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-sizeThe size of the displayed font, e.g.: {font-size: 12px;}.
colorDefines 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-weightWeight of the displayed font, e.g. {font-weight: bold;} or {font-weight: normal;}.
font-styleDefines the font style, e.g. {font-style: italic;} or {font-style: normal;}.
text-decorationSets the text decoration, e.g. {text-decoration: underline;}, {text-decoration: line-through;} or {text-decoration: none;}.
text-alignAligns content, not only text, within an HTML element, e.g. {text-align: left;}, {text-align: center;} or {text-align: right;}.
text-indentIndents the first line of a block of text, e.g.: {text-indent: 35px;}.
letter-spacingSets the spacing between individual character, e.g.: {letter-spacing: 2px;}. Negative values are allowed, e.g.: {letter-spacing: -1px;}.
word-spacingSets the spacing between individual words, e.g.: {word-spacing: 2px;}.
line-heightSets the height of a text line, e.g.: {line-height: 20px;}.

List Properties

Property NameDescription
list-styleDefines 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-imageDefines the image used as a list style marker, e.g.:
{list-style-image: url ("images/marker.gif");}.

This website uses cookies to give you the best experience on our website, to personalise content and to analyse our website traffic. Some cookies may have been set already. To find out more about our use of cookies you can visit our Privacy Statement. By browsing this website, you agree to our use of cookies.

Hide this message