In a stylesheet, each statement has 2 parts - the selector and the declaration block. Each declaration consists of a property and a value.
In the normal flow, the top and bottom margins collapse for block-level boxes, ie rather than adding the values for the bottom margin of the upper box and the top margin of the lower box, the margin is whichever is the greater of these 2 values.
However, for a floated box, the vertical margins are not collapsed with the margins of boxes either above or below it.
In general, the width of a box depends on the width of the parent, but the height depends on the height of the children.
Relative units are:
Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are:
Taken from the CSS Spec
Margins are transparent - any background of the parent will show through.
To centre a box horizontally, set the left and right margins to auto.
Alternatively, set position: absolute; left: 50%; and set a negative left margin of exactly half the width of the box.
Taken from: Blue Robot
The second technique above can also be used to centre a box vertically:
Set position: absolute; top: 50%; and set a negative top margin of exactly half the height of the box.
Taken from: Web Page Design for Designers
Alternatively, for a single line which won't wrap, set the line-height of the element to the same as the height of the <div>.
The generic font families are:
To specify all interactive form elements, use the following selector: input,button,textarea,select,optgroup,option
Firefox/Mozilla uses <select> as a css selector only for the selected item displayed in the box. <optgroup> and <option> are the selectors for all the list items. Internet Explorer behaves differently. It uses <select> as a css selector for all the items and ignores font changes to <optgroup> and <option>. By default both browsers show the <optgroup> in bold italics and indent the options.
See also Fonts on Form Elements and Font Sizes On Buttons.
With the Windows XP style, if no background colour is specified, input buttons are displayed with the white background and rounded corners of the Windows style. In older Windows versions and Windows classic style, they are just grey rectangles.
See WebReference for more information on styling input buttons. In Mozilla and CSS 3 it is also possible to specify rounded corners.
form { background-color: #eeeeee;
padding: 12px;
border-width: 1px;
border-style: solid;
border-color: #000000;
margin-left: auto;
margin-right: auto; }
fieldset { padding: 6px 6px 12px 6px;
border-width: 1px;
border-style: solid;
border-color: #ff0000;
margin-top: 6px;
margin-bottom: 12px; }
legend { color: #ff0000; }
button { background-color: #ffffff;
color: #ff0000;
font-size: 0.9em;
font-weight: bold;
margin: 2px 2px 0 2px; }
input,textarea,
select,label { margin: 2px 0 0 0; }
input,button,
textarea,select,
optgroup,option { font-family: "Arial Unicode MS",Arial,sans-serif; }
.formline { clear: both; padding: 6px 0 0 0; }
.formlabel { float: left; width: 25%; text-align: right;
padding-right: 18px; display: inline; }
.formcontrol { float: left; width: 70%; text-align: left; display: inline; }
.formbuttons { clear: both; text-align: right; }
.nowrap { white-space: nowrap; }
.access { text-decoration: underline; font-style: italic; }
.leftfloat { float: left; margin: 0 12px 12px 0; display: inline; }
.rightfloat { float: right; margin: 0 0 12px 12px; display: inline; }
.newline { clear: both; }