CSS Properties
Styles - Units of Measure
The absolute units of measure are:| in | inches |
| cm | centimeters |
| mm | millimeters |
| pt | points |
| pc | picas |
The relative units of measure are:
| em | ems (height of element's font) |
| ex | x-height (height of letter 'X') |
| px | pixels (relative to canvas) |
| % | percent (usually of element) |
Colour and Background Styles
| Property | Possible values | Example |
|---|---|---|
| color | Various colours | {colour: green;} |
| background-color | Various colours, or 'transparent' | {background-colour: white;} |
| background-image | URL or 'none' | {background-image: url(mypic.gif);} |
| background-repeat | 'repeat-x' or 'repeat-y' or 'no-repeat' | {background-repeat: no-repeat;} |
| background-position | ([position or length] or {1,2} or [top or center or bottom]) followed by [left or center or right] | {background-position: center right;} |
| background | Colour followed by URL followed by repeat followed by scroll followed by position | {background: black url(mybgpic.jpg) repeat-x;} |
Colors can be expressed as one of sixteen explicit colors (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, or yellow), as RGB values [e.g. rgb(90,173,222)], or as standard hexadecimal (e.g. #008081).
Background can be linked to a URL as above or use the same values as color. Unfortunately, both the text-indent (below) and background properties have fallen victim to browser differences.
More Text Properties
| Property | Possible values | Example |
|---|---|---|
| letter-spacing | normal or length | { letter-spacing:2pt; } |
| text-decoration | none or underline or overline or line-through | { text-decoration:underline; } |
| vertical-align | sub or super | { vertical-align:sub; } |
| text-transform | capitalize or uppercase* or lowercase or none | { text-transform:lowercase; } |
| text-align | left or right or center or justify | { text-align:center; } |
| text-indent | length or percentage | { text-indent:20px; } |
| line-height | normal or number or length or percentage | { line-height:5pt; } |
Text-indent will add the given value of space to the left of the first line of a paragraph.
* Browser differences: MSIE 3.x does not support: text-transform:uppercase.
Setting Font properties
| Property | Possible values | Example |
|---|---|---|
| font-family | [ [ family-name or generic-family ], ]* [ family-name or generic-family ] | { font-family: Verdana, MS Sans Serif; } |
| font-style | normal or italic | { font-style:italic; } |
| font-variant | normal or small-caps | { font-variant:small-caps: } |
| font-weight | normal or bold | { font-weight:bold; } |
| font-size | [xx-large or x-large or large or medium or small or x-small or xx-small ] or [ larger or smaller ] or percentage or length | { font-size:12pt; } |
| font | [font-style followed by font-variant followed by font-weight ] ? font-size [ / line-height ] ? font-family | { font: bold 12pt Arial; } |
Setting Box Properties
Box elements are elements that have a line break before or as part of their display, including H, P, list and DIV tags. There are 32 properties for formatting boxes associated with blocks. They also apply to the body tag.
Reword:
Margin is relative to the enclosing parent. For example, if the margin for a BLOCKQUOTE is set for 20px and the margin for the BODY is 30px, the contents of the BLOCKQUOTE will be 50px from the edge of the browser window. The border encloses the object. The padding is measured from the border of an object to its contents, so the border and padding here behave as they do for tables. Similar to the align attribute of the IMG tag, float can separate an object from the rest of the document, allowing other content to flow around it. Clear pushes content past a floated object.
| Property | Possible values | Example |
|---|---|---|
| margin-top | length or percentage or auto | { margin-top:5px; } |
| margin-right | length or percentage or auto | { margin-right:5px; } |
| margin-bottom | length or percentage or auto | { margin-bottom:1em; } |
| margin-left | length or percentage or auto | { margin-left:5pt;} |
| Margin | length or percentage or auto {1,4} | { margin: 10px 5px 10px 5px; } |
| padding-top | length or percentage | { padding-top:10%; } |
| padding-right | length or percentage | { padding-right:15px; } |
| padding-bottom | length or percentage | { padding-bottom:1.2em; } |
| padding-left | length or percentage | { padding-left:10pt; } |
| Padding | length or percentage {1,4} | { padding: 10px 10px 10px 15px; } |
| border-top-width | thin or medium or thick or length | { border-top-width:thin; } |
| border-right-width | thin or medium or thick or length | { border-right-width: medium; } |
| border-bottom- width | thin or medium or thick or length | { border-bottom-width: thick; } |
| border-left-width | thin or medium or thick or length | { border-left-width:15px; } |
| border-width | thin or medium or thick or length {1,4} | { border-width: 3px 5px 3px 5px; } |
| border-top-color | color | { border-top-color: navajowhite; } |
| border-right-color | color | { border-right-color: whitesmoke; } |
| border-bottom- color | color | { border-bottom-color: black; } |
| border-left-color | color | { border-left-color:# C0C0C0; } |
| border-colour | color {1,4} | { border-color: green red white blue; } |
| border-top-style | none or solid or double or groove or ridge or inset or outset | { border-top-style:solid; } |
| border-right-style | none or solid or double or groove or ridge or inset or outset | { border-right-style: double; } |
| border-bottom- style | none or solid or double or groove or ridge or inset or outset | { border-bottom-style: groove; } |
| border-left-style | none or solid or double or groove or ridge or inset or outset | { border-left-style:none;} |
| border-style | none or solid or double or groove or ridge or inset or outset | { border-style:ridge; } |
| border-top | border-width or border-style or border-color | { border-top: medium outset red; } |
| border-right | border-width or border-style or border-color | { border-right: thick inset maroon; } |
| border-bottom | border-width or border-style or border-color | { border-bottom: 10px ridge gray; } |
| border-left | border-width or border-style or border-color | { border-left: 1px groove red; } |
| Border | border-width or border-style or border-color | { border: thin solid blue; } |
| Float | none or left or right | { float:none; } |
| Clear | none or left or right or both | { clear:left; } |
There may be differences in how different browsers display a CSS. For example,
border-style:outset; border-color:blue; border-width: 5px;
is not supported in MSIE 3.x, makes a box the width of the page in MSIE 4.x+, and makes a box sized to fit the text in Netscape 4.x. Only MSIE 4.x+ supports border-left: 15px groove red.
Setting List Properties
These comprise the "display" property and "list" properties. The "display" property indices whether the element is displayed in the document, useful when combined with scripting for creating dynamic content. The "list" properties that control the formatting of HTML lists such as <UL> and <OL>, and including bullets and numbering items. You can supply your own bullet graphic. With the "list-style-position" property you control the indent on the second line of a list item, either aligned with the bullet (outside) or the first letter of the content of the list item (inside).
| Property | Possible values | Example |
|---|---|---|
| display | none or block or inline or list-item | { display:none; } |
| list-style-type | disk or circle or square or decimal or lower-roman or upper-roman or lower-alpha or upper-alpha or none | { list-style-type:upper-alpha;} |
| list-style-image | url or none | { list-style-image:url(icFile.gif); } |
| list-style-position | inside or outside | { list-style-position:inside; } |
| list-style | keyword followed by position followed by url | { list-style: squareoutside url(icFolder.gif); } |
Note. only MSIE 4.X+ supports list-style-image:url(bullet1.gif);