Home Misc Index
  HTML4 Summary
 P van Diemen

Introduction

This is an excerpt for HTML 4 and CSS2, not particularly suited as a beginners' guide.  It is not exhaustive, but contains all relevant elements.

Notation

[ phrase ]an optional phrase
notion1 | notion2  alternatives (select notion1 or notion2)
notion1 | notion2  notion1 is the default of alternatives
{ text }comment
«term»non-terminal concept, to be substituted by a final term
Blanks/spaces and newlines (Carriage return, Line feed) are in general only word separators, and not relevant for HTML.
HTML accepts tags in uppercase and lowercase, but in this document all tags are indicated in uppercase.

Note:  the comment deprecated means that the use of this element, attribute or value is strongly discouraged.  Authors should no longer use it, but browser developers still have to support it for compatibility reasons.  So it probably still works, but authors should look for other ways to achieve the desired result (typically through style statements).

References

Courses

 

General structure

«DTD definition»{ See paragraph below }
<HTML [ lang="en" ] >{ start HTML, attribute lang indicates document content language (English) }
<HEAD>{ start Header section }
[ <META ... > ]{ See corresponding paragraph below }
<TITLE>HTML & CSS Summary</TITLE>{ Page title }
[ <STYLE ... > ]{ See section Styles below }
</HEAD>{ end of header section }
<BODY>{ start Body section }
«elements forming the page contents»{ See section Elements below }
</BODY>{ end of body }
</HTML>{ end of HTML }

Document Type Definition (DTD):
The DTD indicates to the User Agent (i.e. the browser) what kind of HTML to expect: (select one)

strict HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd">
'loose' HTML 4 (allowing deprecated items):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
when using frames:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"   "http://www.w3.org/TR/html4/frameset.dtd">
You can omit the «DTD definition», but then some elements or attributes might not work, or not work as expected.

Meta elements provide information about the page (only indirectly about its subject).  Attributes are:  name (or http-equiv), content and optionally scheme (lang, one of the general attributes, is also applicable).  No closing tag for META.
The official set is:

Some of the older (and generally accepted) META values:

Elements

The page body is commonly filled with text.  To accomplish a layout, the text is structured in 'elements' like Paragraphs, Headers, Lists, Tables, etc.  These elements are indicated by HTML-tags (between < and >).

Nearly all elements may have the attributes:

id=unique_identifier_of_element {See section Links (and Styles) below.  It was common to use the same ID for several elements, but this is considered bad practice now;  IDs should be unique.  If elements should be treated in the same way -in particular regarding style- use the same CLASS-attribute for them. }
class=classname{See section Styles below }
lang= EN|EN-UK|EN-US| NL | ...{Language }
dir= LTR | RTL{text direction: left-to-right (default) or right-to-left }
style="in-line style definition"{See section Style below }
title="Pop-up example"{Pop-up text }
align= left | center | right | justify{deprecated; use style.text proterties }
on«event»=script{activate the (java)script when the indicated «event» occurs }

Notes:

Comments:  In HTML you can add comments (or 'comment out' text and/or elements) through <!-- up to the first -->

<P>Paragraph

with about one line of whitespace before.  The closing tag [</P>] is optional.
A paragraph will use the full width (externally behave like a block, but internally use the words as in-line components):  browsers will fill each line with whole words until the line gets at its right margin;  it will wrap the line at white-space (blank, line-feed, …), at a hyphen ('-'), at a 'zero-width-non-joiner' (&zwnj; = white space of zero width), or at a soft hyphen (&shy; inserts a '-' and wraps).  Note that HTML treats all control codes (horizontal tab, new line, …) as white space, and all white-space collapses to a single space.  A non-blank space (&nbsp;) is not white-space, and will not wrap.  See also Styles.Text properties.White-space.
<BR> forces a line break (no closing tag on <BR>).

There are 2 tags which do not change character rendering but are useful to group text for all kinds of purposes (e.g. to apply styles):

Example: <SPAN STYLE="font-variant: small-caps">Small-Caps text</SPAN>.

Then there are a series of (in-line) tags which change character rendering (closing tag always required):
Example of <B>bold</B>, <I>italic</I>, <U>underlined</U>, <TT>Teletype text (mono spaced)</TT> and <STRIKE> or <S>strike-out</S> text (Underline and Strike-out are deprecated; use Styles.Text properties).
Example of <BIG>big</BIG> and <SMALL>small</SMALL> text (which can be obtained by Styles.Text properties with much more variety).
Example of <SUB>subscript</SUB> and <SUP>superscript</SUP> text.
Example of <DEL>deleted<DEL> and <INS>inserted</INS> text.

A special series of (in-line) tags adds structural information to text;  the presentation varies (presentation can also be achieved or modified through styles).  A closing tag is always required (but not always shown here).
<ACRONYM title="World Wide Web">(hover mouse over): WWW</ACRONYM>
<ABBR TITLE="Show expanded abbreviation"> is similar</ABBR>
   The same effect can be achieved through <SPAN title="Pop-up through Span/title">(hover mouse over)</SPAN>.
<EM> Indicates emphasis. </EM>
<STRONG> Indicates stronger emphasis. </STRONG>
<CODE> Designates a fragment of computer code.</CODE>
<DFN> Indicates that this is the defining instance of the enclosed term. </DFN>
<KBD> Indicates text to be entered by the user. </KBD>
<SAMP> Designates sample output from programs, scripts, etc.</SAMP>
<VAR> Indicates an instance of a variable or program argument. </VAR>
<CITE> Contains a citation or a reference to other sources. </CITE>
<Q [cite='«uri»']> Indicates a (short) quoted text (in-line).  Note that appropriate "quotes" are inserted.</Q>
<BLOCKQUOTE [cite='«uri»']>

Indicates a (long) quoted text (block).
Text will be indented, no quotes inserted.
</BLOCKQUOTE>
<PRE>
Preformatted text:
preserves whitespace (including carriage return/line feed).
Font commonly monospaced.
</PRE>

For special symbols ('glyphs') in HTML see the HTML Characters page.

<HR>Horizontal Ruler (no closing tag):  a special vertical separator (see next line).

<H1>Headers</H1>

Headers are a special form of paragraphs, rendering the text larger and usually in bold.  The header element contains a level-number, where 1 is the most important header (e.g. corresponding to chapter title) and 6 is the least important (e.g. corresponding to a sub­sub­section).  The headers are not presented with a section number (but that can be achieved with Style.autonumbers).

Lists

<UL {type="disc | circle | square"}>   Unordered (bulleted) lists
Above attributes are deprecated.  Use list styles.

</UL>

<OL {type="1 | a | A | i | I"} {start=«number»}>   Ordered (numbered) lists
The type-attribute indicates the numbering system:  "1" for decimal (Arabic) numbers, "a" for lower alpha, "A" for Upper-alpha, "i" for lower-roman, and "I" for upper-roman (i.e. case sensitive).  The start-attribute indicates with what value to start the list;  it is always in decimal irrespective of the display type of the numbers, and default 1.
Above attributes are deprecated.  Use list styles.

  1. <LI value=3>List Item (starting at 3) [</LI>]
  2. <LI>Next List Item (next number) [</LI>]

</OL>

<DL>Definition Lists

<DT>Definition Term [<DT>]
<DD>Definition Data [<DD>]

</DL>

Lists can -of course- be nested.

Tables

<TABLE
[ align = left | center | right ]{ deprecated (position of table) }
[ width = «size» ]
[ frame = void | above | below | hsides | vsides | lhs | rhs | box | border ]{ table outside border }
[ rules = none | groups | rows | cols | all ]{ THEAD/TFOOT/TBODY and COLGROUP borders }
[ border = «pixels» ]{ thickness in pixels }
[ cellspacing = «pixels» ]{ between cell borders }
[ cellpadding = «pixels» ]{ between cell border and text }
>
[ <CAPTION [align= top | bottom | left | right ] > text </CAPTION> ]{ table caption }
[ «COLGROUP_definition» ]
[ <THEAD> «table rows» [</THEAD>] ]{ The idea for header and footer rows (THEAD & TFOOT) is to allow scrolling of the table body while the header and footer remain fixed, but I haven't seen that working (at least not in IExplorer up to v9 and Firefox v13).  Multiple TBODYs are allowed. }
[ <TFOOT> «table rows» [</TFOOT>] ]
[ <TBODY> «table rows» [</TBODY>] ]
</TABLE>
where column attributes can be specified through
<COLGROUP [span=n] [width=«size»] [«halign»] [«valign»] >  [«COL_definition»]* [</COLGROUP>]
«COL_definition»<COL [span=n] [width=«size»] [«halign»] [«valign»] >{ attributes for corresponding column }
«halign»align= left | center | right | justify | char{ horizontal alignment }
char="char"{ alignment character, e.g. "." }
charoff=«size» { character offset }
«valign»valign= top | middle | bottom | baseline{ vertical alignment }
   {COLGROUP is not implemented by FireFox !}

Table row:  <TR> …cells… [</TR>]

Cell:  <TD [rowspan=n] [colspan=n] [width=«size»] [«halign»] [«valign»] > «cell content» [</TD>]
or <TH [rowspan=n] [colspan=n] [width=«size»] [«halign»] [«valign»] > «cell content» [</TH>] for 'header cells' causing text to be bolded and centered.

See Table styles for styles specific for tables.

Forms

Forms are basically used to enter data to submit them to the server, but can also be used for input to a script (e.g. JavaScript).

<FORM>
action = URI{ the URL of the processing agent; required attribute, but URL can be empty "" }
method = get | post
enctype = content-type (default "application/x-www-form-urlencoded")
accept-charset = charset_list (default "UNKNOWN")
accept ={ content-type-list e.g. "text/html", "image/png", "text/css", … }
name = «name»{ forms name for reference; preferably use Id }
«input_elements» and/or «select-elements» and/or «button-elements» and/or other HTML elements and text
</FORM>
 
<INPUT
type = text | password{ normal text or '*' echo }
= | checkbox | radio{ on/of-switches or alternative choices }
= | button |{ general button, use 'value' to assign label }
= | submit | reset{ submit date or clear }
= | image{ graphical submit button }
= | file{ allows files to be selected for submission }
= | hidden{ non-displayed value, e.g. for identification }
name = field name{ for reference, also used to group radio & checkbox buttons }
value = initial value{ optional except for "radio" or "checkbox" }
checked{ when the type is "radio" or "checkbox", it specifies that the button is on }
readonly{ user may not modify text }
disabled{ user may not modify any value }
size = «width»{ pixels, or when type is "text" or "password", number of characters }
maxlength = #chars{ when type is "text", the maximum number of characters the user may enter. It may exceed the specified 'size', so the user agent should offer a scrolling mechanism. Default is unlimited }
accept = Mime{ list of MIME types for file upload }
src = uri{ when the type is "image", the URL to decorate the button }
alt = text{ alternate description for image }
usemap{ use client-side image map }
ismap{ use server-side image map }
tabindex = «number»{ position in tabbing order }
accesskey = «char»{ focus to the element by Alt/«char» }
>{ No closing tag }
 
<FIELDSET>{ Grouping of fields }
…(input) fields…{ series of form fields to be grouped }
</FIELDSET>
 
<BUTTON{ General pushbutton element }
name = «name»{ control name }
value = { initial value, sent to server when submitted }
type= button | submit | reset{ for use as form button; default 'submit' }
tabindex = «number»{ position in tabbing order }
accesskey = «char»{ focus to the element by Alt/«char» }
disabled{ button is disabled (i.e. will not work) }
>
button text
</BUTTON>
 
<SELECT
name = «name»{ field name }
size = #lines{ rows visible }
disabled{ user may not modify any value }
multiple{ allow multiple selections (shift/click); default is single selection }
tabindex = «number»{ position in tabbing order }
>
<OPTION{ multiple Option-elements, each defining a single choice }
selected{ if Select has the Multiple-option set, multiple Options can be preselected }
value = text{ default: option description text }
label = text{ internal alternative for 'value' }
disabled{ value not selectable }
>
option description text{ what the user sees }
</OPTION>{ optional }
</SELECT>
 
<TEXTAREA{ Multi-line text (input) area }
name = «name»{ name for reference; preferably use Id }
rows = «number»{ height in lines }
cols = «number»{ width in characters }
readonly{ user may not modify text }
disabled{ user may not modify any value }
tabindex = «number»{ position in tabbing order }
accesskey = «char»{ focus to the element by Alt/«char» }
>
First line of initial text …
</TEXTAREA>
 

Links

Hypertext references:

<A href="«URI»"{ for URI see below }
    [ type='«target_content_type»' ]{ Mime type of target (not required when .html) }
[ target="«frame/window_name»" ]{ Required when target text is to appear in another/new frame (see frames below), or in another tab or window }
[ title="Simple link to top" ]{ Pop-up text }
>#top</A>{ Hypertext }

URI (= URL) comes in 2 forms:  absolute and relative references.

    Absolute:"[http:]//www.site.type/dir…dir/file.html[ #«location_name» ] "
Relative:a relative path starting from the current page
e.g.: "file2.html"{ same directory, get file2 }
e.g.: ". . /dir2/file2.html"{ first 1 directory up, down dir2, get file2 }
e.g.: "#section2"{ go to the section2 anchor in the current/indicated page }

Predefined target names:

  _self(default) load the document in the current window/frame.
_blankload the designated document in a new, unnamed window (forces new tab/window).
_parentload the document into the immediate FRAMESET parent of the current frame. This value is equivalent to _self if the current frame has no parent.
_topload the document into the full, original window (thus cancelling all other frames). This value is equivalent to _self if the current frame has no parent.
«some_name»when working with frames, load the page in the frame with that name.
When not working with frames, load the page in the window/tab with that name, or create a new window/tab with this name if it didn't exist.

Anchor:
<A name="«location_name»"></A>   { define destination location in a web page }
In the text, the «location» will be to the adjacent text.  If there are HTML-tags in between, the result is unpredictable.  So if you want for example to refer to a header (<Hn>), define the location anchor between the header opening-tag and closing-tag.
Use of the id-attribute in an element as destination location (e.g. <P id=«location_name»>) is not officially supported.
The anchor "top" is usually predefined at the top of page.

Images

References to Images (or other 'objects'):

<IMG
   src="«URI»"{ for URI see Links above }
[ alt="«alternate text»" ]{ When images can not be displayed }
[ longdesc="«URI»" ]{ Link to long description of the image }
>{ No closing tag }

Frames

HTML frames allows you to present documents in parallel in subwindows of the browser window.  Each subwindow –a frame– can be scrolled independently.  It is also possible to have hyperlinks from (a document in) one frame to a specific position (in another document) in another frame.  E.g. a frame with a clickable table of contents in one frame linking to specific positions in the related document presented in another frame (see for example TMN).

<FRAMESET [rows="«height»,«height»,…"] [cols="«width»,«width»,…"]>
   <FRAME src="contents_of_frame1.html" name="«frame_name»" frameborder=1|0 >
<FRAME src="contents_of_frame2.html" name="«frame_name»">
  …
<NOFRAMES>Your browser does not support frames.
  Go to the <A HREF="contents_of_frame2.html">main page</A> without frames.</NOFRAMES>
</FRAMESET>
Notes:

When using a lot of relative references to the same file, one may use:
   <BASE href="«url»" [target="«frame_name»"]>   { use this as base address for all relative urls, and go to the target frame }
In particular when using frames (a lot of references to similar files in another frame), BASE is very useful.
Note however that <BASE … > (no closing tag) must be located in the <HEAD>-section, and applies to all relative urls in that document (and also always to the target frame unless overridden by the target-attribute in the specific hyperlink element).
 

Styles

'Styles' allow a more sophisticated rendering of a webpage.  Styles do not add content, but change the way the content looks.  Styles can be defined at 3 locations by the (HTML/style) author:

  1. in separate files (CSS-files, 'style sheets') containing «style_definitions», referred to in the header-section by
    <HEAD> … <LINK HREF="style_file" TYPE="text/css" REL="stylesheet" TITLE="Preferred_style" [MEDIA=«media_type»[,«media_type»]]> … </HEAD><BODY> …
    Style sheets can be Persistent, Preferred or Alternate;  this is accomplished through the REL and TITLE attributes:
    REL attributeTITLE attribute
    Persistent:"stylesheet"- (not set)
    Preferred:"stylesheet"some name
    Alternate:"alternate stylesheet"alternate name
    «media_type» = screen (intended for non-paged computer screens, default), tty (for fixed-pitch character grid media with limited display capabilities), tv (low resolution, color, limited scroll ability), projection (projectors), handheld (small screen, limited bandwidth), print (for paged, opaque material), braille (tactile feedback devices), embossed (for paged braille printers), speech/aural (speech synthesizers), all (applicable for all devices).
    If «media_type» is not specified, all is assumed.
    Style sheets for specific media types can be specified through: Here we concentrate on the screen media type.
  2. in the page header section of the page (i.e. an embedded/local style sheet):
    <HEAD> … <STYLE TYPE="text/css"> «style_definitions» </STYLE> … </HEAD><BODY> …
    External files can also be included through @import url(«uri»);
  3. in the element itself ('in-line')
    e.g. <P style="«style_declarations»">

The style definitions are processed in the above order:  later definitions may add to or modify earlier definitions.  Hence the name Cascading Style Sheets.
The User Agent is the program that will process it, and ultimately render it in conjunction with the HTML.  For screens the User Agent will be a browser.  As we assume screen media type, we treat user agent and browser as identical here.

Note:  In style definitions { and } are used to group «style_declarations», and do not denote comment.  Comments in CSS are between /* and */.
Also, in selector constructs [ and ] denote HTML attributes (e.g. ID=…).

Examples (for illustrative purposes in anticipation of exact definitions):

… <HEAD> … <STYLE TYPE="text/css">
BODY{ background-color: silver }/* page background light grey */
H1{ text-align: center; font-variant: small-caps } /* for all H1-tags */
P.note{ text-align: center; border-style: solid }/* P subclass for notes */
LI{ margin-top: 0.4em; }/* give List elements extra space */
LI LI{ font-weight: normal; margin-top: 0em; }/* but only for level 1 LIs */
.smlcps{ font-variant: small-caps }/* general class for small-caps */
TD#z9{ font-weight: bold }/* id for bold cells */
#blue{ font-color: blue }/* general id for (dark) blue text */
</STYLE> … </HEAD><BODY> …
<H1>Chapter 1</H1>always centered, small-caps text
<H1 style="text-align: left">Chapter 2</H1>left aligned (but still small-caps text)
<P class=note>Please note<BR>…will be centered, with border
<TD id=z9>cell with bolded text
<H3 class=smlcps>header 3 with small-caps text
<LI id=blue>list item in blue
If not explicitly specified –i.e. overridden– by a «style_declaration», properties will be inherited.  So in above example, all background will be silver (set in BODY).  And all text will be black (nowhere specified, so default), except for element(s) with ID=blue.  You can even force inheritance by using the value 'inherit' for a property.
Sometimes however, the user agent will have to adjust a (computed) value to something it can render.  Like a 0.4 pixel line adjusted to a 1 pixel line.
 
«style_declaration» is
property :  value (; property : value; …)*

 

Selector constructs

facilitate style declarations for particular HTML elements:
*{ «style_declarations» }Universal selection:  the declarations apply to all elements (doesn't seem very practical)
TAG1 (, TAG2, …){ «style_declarations» }Selection by tag:  the declarations apply to all elements of the indicated tag(s)
TAG1 TAG2{ «style_declarations» }Contextual selection descendant:  applies to all TAG2s nested in a TAG1 (at some level)
TAG1 > TAG2{ «style_declarations» }Contextual selection child:  applies to all TAG2s that are direct descendants of a TAG1
TAG1 * TAG2{ «style_declarations» }Contextual selection grandchild:  applies to all TAG2s with a TAG1 as grandfather (or higher)
TAG1 + TAG2{ «style_declarations» }Contextual selection sibling:  applies to all TAG2s that are immediately preceded by a TAG1 (at the same level)
TAG1[ATR]{ «style_declarations» }Attribute selection:  applies to all TAG1s that have the attribute ATR (whatever the value)
TAG1[ATR="rem"]{ «style_declarations» }Attribute selection:  applies to all TAG1s that have the attribute ATR set exactly at "rem"
TAG1[ATR~="rem"]{ «style_declarations» }Attribute selection:  applies to all TAG1s whose ATR attribute value is a list of space-separated values, one of which is exactly equal to "rem"
TAG1[LANG|="en"]{ «style_declarations» }Attribute selection:  applies to all tag1s whose LANG attribute has a hyphen-separated list of values beginning with "en" (e.g. 'en-us' or 'en-uk')
(TAG1).«class_name»{ «style_declarations» }Selection by class:  the style definition applies to all TAG1s with that class_name, e.g. <TAG1 CLASS=«class_name» >.  (TAG1) is optional (i.e. applies to any tag with that class_name)
(TAG1)#«id_name»{ «style_declarations» }Selection by id:  the style definition applies to all TAG1s with that ID, e.g. <TAG1 ID=«id_name» >.  (TAG1) is optional (i.e. applies to any tag with that id_name)
Above selectors can be combined.  E.g. "DIV OL > LI P" which matches all P elements that are a descendant of an LI, where the LI element must be the child of an OL element which is a descendant of a DIV.

There are also pseudo classes.  The first applies to any tag which has a hyperlink (i.e. the Anchor tag <A…>).

link pseudo class:
A:link{ «style_declarations» }/* unvisited links */
A:visited{ «style_declarations» } /* visited links */
dynamic pseudo classes:
TAG:hover{ «style_declarations» }/* style applies only when mouse hovers over the element */
TAG:active{ «style_declarations» } /* style applies when clicking on that TAG */
TAG:focus{ «style_declarations» }/* style applies when that TAG has focus (e.g. text input) */
first child pseudo class:
TAG:first-child{ «style_declarations» ;  … }/* triggers when TAG is the first child (of some other element).  Often combined to indicate the higher level element, like "div > p:first-child" for the first P in a DIV;  or like "P:first-child EM" for any EM that is a child in a first P */

Then there are pseudo-elements:

first-line pseudo-element
p:first-line { text-transform: uppercase }
This causes the first line in a P to be rendered in uppercase.  The extend of the first line depends on the actual layout of the page (i.e. depending on the available width).
first-letter pseudo-element
p:first-letter { font-size: 3em; }
This causes the first letter (it has to be a letter) to be a triple sized initial cap
before & after pseudo-elements
h1:before {content: counter(chapnr) ". "}
This causes the value of the counter chapnr (an 'autonumber', discussed in autonumbers later) and '. ' to be inserted before the text of the H1 element.
:after works correspondingly after the element's contents.
Note that these pseudo-elements inherit properties of their actual parent.  See Style demo for examples of pseudo-elements.
The :first-line and :first-letter pseudo-elements can only be attached to a block container element (like P, DIV, TD).

Processing style declarations:  Apart from the separate CSS-files, the embedded style sheet and the in-line style declarations defined by the author, it is also possible to specify a style sheet in the browser ('user defined style sheet', e.g. force larger fonts for the visually impaired).  And it is possible to prioritise particular style declarations by adding "!important" to it.  This leads to the following cascade (from low to high priority):

1 user agent declarationsdefault browser(/HTML) behaviour
2user normal declarationsuser specified style sheet
3author normal declarations these can be located in separate CSS-files, embedded style sheet, and in-line
4author important declarations same locations and have !important set
5user important declarationsuser specified style sheet with !important set
As far as I am aware, !important and user specified style sheets are rarely used, so in practice (1) & (3) determine the styles.

The way the user agent should handle «style_declarations» and problems with them is prescribed, and important to take into account.

HTML has 2 tags specifically suited to apply styles:

Example: <SPAN STYLE="font-variant: small-caps">Small-Caps text</SPAN>.

The style properties and values are discussed in groups of related properties below.
Notes:

Color and Background

color:«color_number» | «color_name» | inherit   /* foreground/text color, initially black, see Colors page */
background-color:«color» | transparent | inherit   /* initially white */
background-image:url(«uri») | none
background-repeat:repeat | repeat-x | repeat-y | no-repeat   /* repeat image to fill background */
background-attachment:scroll | fixed   /* determines whether the background image is fixed or scrolls with the text */
background-position:[«percentage» | «size» [«percentage»|«size»]] | [top|center|bottom] | [left|center|right]
background:short for «background-color» | «background-image» | «background-repeat» | «background-attachment» | «background-position»
It is also possible to apply the colors used for other windows on your computer:  the so-called system colors.
They are:  ActiveBorder, ActiveCaption, AppWorkspace, Background (desktop background), ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption, InactiveCaptionText, InfoBackground (tooltips), InfoText, Menu (background), MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window (background), WindowFrame, WindowText.
They are valid CSS2, but deprecated in CSS3.

Blocks

'Block-type' elements have specific properties.  The following figure depicts margin, border and padding (note that in the declarations the sides are in clock-wise order:  top, right, bottom, left).

margin-top (transparent)
 margin- 
 left 		border-top (border color)  margin- 
 right
 border- 
 left 		padding-top (bgcolor)  border- 
 right
 
 padding- 
 left 		 block
contents 		 padding- 
 right
 
padding-bottom
border-bottom
margin-bottom
Without a visible border, there is no difference between margin and padding except when you set background-color.  You can play with settings in Block style demo.
width:«size» | «percentage» | auto | inherit
min-width: «size» | «percentage» | inherit/* constraint the minimum and maximum width of blocks */
max-width: «size» | «percentage» | none | inherit
height:«size» | «percentage» | auto | inherit
min-height: «size» | «percentage» | inherit/* constraint the minimum and maximum height of blocks */
max-height: «size» | «percentage» | none | inherit
margin:short for «margin-top»  «margin-right»  «margin-bottom»  «margin-left»
«size» | «percentage» | auto/* initially all 0, i.e. margin: 0 0 0 0; = margin: 0; /*
padding:short for «padding-top»  «padding-right»  «padding-bottom»  «padding-left»
«size» | «percentage»/* top right bottom left */
border-width:thin | medium | thick | «size»/* top right bottom left /*
border-color:«color» [ «color» … ]/* top right bottom left */
border-style:none | dotted | dashed | solid | double | groove | ridge | inset | outset | hidden | inherit/* 'hidden' is the same as 'none', but in the collapsing border model also inhibits any other border */
border-top:short for «border-top-width»  «border-top-style»  «border-top-color»
border-right:short for «border-top-width»  «border-right-style»  «border-right-color»
border-bottom:short for «border-bottom-width»  «border-bottom-style»  «border-bottom-color»
border-left:short for «border-left-width»  «border-left-style»  «border-left-color»
border:short for «border-width»  «border-style»  «border-color»  for all borders
Notes:

Text properties

line-height:inherit | normal | «factor» | «size» | «percentage» /* 'normal' varies by default with font-size, ≈20% larger */
«factor» /* factor relative to current font-size, e.g. 1.2;  use 2.4 to achieve double spacing */
word-spacing:inherit | normal | «size»/* normal=0, can be negative */
letter-spacing:inherit | normal | «size»/* normal=0, can be negative */
text-decoration:none | underline | overline | line-through | blink | inherit
text-transform:inherit | capitalize | uppercase | lowercase | none
vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | «percentage» | «size» | inherit/* can be negative (below baseline), also applicable for blocks */
text-align:inherit | left | right | center | justify
text-indent:inherit | «size» | «percentage»/* can be negative, works for the first line only (otherwise use margin-left) */
font-family:[[«family-name» | «generic-family»],]* | inherit /* Font family should define a list of fonts in order of decreasing preference (in case the preferred font is not available) */
«generic-family» serif | sans-serif | cursive | fantasy | monospace/* should be supported by any browser */
«family-name»refers to normal font names such as: arial, 'arial black', 'comic sans ms', courier, 'courier new', georgia, helvetica, impact, palatino, 'times new roman', 'trebuchet ms', verdana./* font names with spaces should be quoted */
/* For an example of various fonts, see the HTML Fonts page, or play with Block style demo */
font-style:inherit | normal | italic | oblique/* italic = oblique = slanted = cursive */
font-variant:inherit | normal | small-caps
font-weight:inherit | normal | lighter | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size:«absolute-size» | «relative-size» | «size» | «percentage» | inherit
«absolute-size»xx-small | x-small | small | medium | large | x-large | xx-large/* font-size can also be overridden by settings in most browsers */
«relative-size»smaller | larger
font:shorthand for: «font-style» | «font-variant» | «font-weight» | «font-size»[/«line-height»] | «line-height» | «font-family»
white-space:inherit/* defines how white space inside the element is handled */
normal/* collapse sequences of white space, and break lines as necessary to fill line boxes */
pre/* do not collapse sequences of white space. Lines are only broken at preserved newline characters */
nowrap/* as 'normal', but suppresses line breaks within text */
pre-wrap/* do not collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes */
pre-line/* collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes */
In particular for font-size and related properties, it is recommended to use «relative-sizes».  By default the browser uses a user defined size (usually 10pt or 12pt) but the visually impaired may select a larger font.  And that would interact poorly with fixed size fonts.

Size units

«relative-size»em/* font size (=height, which is about the width of the letter 'm') */
ex/* height of letter 'x', is about average character width */
«percentage»%/* percentages are by definition relative to another size unit */
When a relative unit is used in a font-size definition (i.e. 'self referencing'), it uses the font-size of the parent element.
«absolute-size»pt/* points = 1/72 inch */
pc/* picas = 12pt = 1/6 inch */
px/* pixel unit = 0.75pt, assuming 96dpi for screens, which is not always the case */
in/* inches */
cm/* centimeters */
mm/* millimeters */
Absolute size units are a bit of a problem:  they are only useful when the physical properties of the output medium are known.  For print it is well defined, but for screens it is often an attempt to mimic print with lower resolution (for screens 96 dpi is quite normal, for print 300 dpi is the minimum).  Consequently, a CSS px does not necessarily correspond to a screen pixel (or a print pixel).
Note:  In size definitions one of the above units must be specified (when value is not 0) !

Visual formatting

The visual formatting model (positioning, display, …) renders the elements as boxes according to their dimensions and positioning scheme.

position:inherit |/* determines the basic positioning scheme */
static |/* normal (box) layout; «box-offset» properties do not apply */
relative |/* box is offset relative to its 'normal' position */
absolute |/* box position (and possibly size) is specified with «box-offset» properties relative to the containing block */
fixed/* box position is calculated like in the 'absolute' model, but relative to the window (i.e. does not scroll) */
box offsets:/* for elements having position property other than static */
top:«size» |/* offset is a fixed distance from the reference edge, negative values are allowed */
right:«percentage» |/* offset is a percentage of the containing block's width or height, negative values are allowed */
bottom:auto |/* depends on which of related properties have the value 'auto' as well */
left:inherit/* the property will be inherited from its parent element */
float:left | right | none/* align the block to that side and fill the rest with other content */
clear: none | left | right | both/* move down until there is no floating object at that side */
z-index:inherit |/* show box in normal canvas, or in front of it (partly obscuring the canvas) */
«integer» |/* indicates stack level (and establishes a new stacking context) */
auto/* current stack level */
display:inherit |/* basic formatting behaviour */
inline |/* takes as much width as needed, does not force a line break but may wrap (e.g. SPAN, A) */
block |/* takes available width fully (e.g. H1, P, DIV) */
inline-block |/* placed as inline, but contents behaves like a block (e.g. INPUT, SELECT) */
list-item |/* displayed as a list item (i.e. a standard LI) */
table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption |   /* see Table styles */
none/* will be completely skipped from rendering */
visibility: inherit |/* rendering variants */
visible |/* normal rendering */
hidden |/* creates room for the object, but doesn't show it */
collapse/* same as 'hidden' except for table elements: then it removes a row or column */
overflow:inherit |/* generally, the content of a block box is confined to the edges of the box. In certain cases a box may overflow, meaning its content lies partly or entirely outside of the box */
visible |/* content is not clipped, i.e. it may be rendered outside the block box */
hidden |/* content is clipped and that no scrolling will be provided */
scroll |/* the content is clipped and that an in-box scrolling mechanism is provided */
auto/* behavior is user agent-dependent, but some scrolling mechanism should be available */
clip:inherit/* defines what portion of an absolute positioned element's box is visible */
auto/* the element does not clip */
«shape»/* a rect(«top», «right», «bottom», «left») provides the clipping region */

Automatic counters

('autonumbers')
counter-reset:inherit |/* creates or resets a counter */
none |/* no counters will be reset */
identifier [integer]/* (list of) identifier(s) defines which counter(s) should be reset. The optional integer provides the initial value (default 0) */
counter-increment:inherit |/* increment counters */
none |/* no counters will be incremented */
identifier [integer]/* (list of) identifier(s) defines which counter(s) should be incremented. The optional integer provides the increment value (default 1), 0 or negative values are allowed. If the identifier refers to a counter that has not been initialized by counter-reset, the default initial value is 0 */
content:inherit |/* inserts content, usually in conjunction with :before or :after pseudo-elements */
none |/* the pseudo-element is not generated */
normal |/* same as none */
counter(identifier, style) |   /* use the value of the counter in the optionally indicated «list-style-type» */
attr(attribute) |/* use the content of the indicated attribute's value */
«string» |/* use text provided */
url(«url»)/* use the content from some kind of media (image, sound, video, etc.) /
For an autonumbers example see the Style demo.

List styles

list-style-type:inherit |/* used in OLs & ULs and automatic counters */
none |/* no marker (i.e. when list-style-image is used) */
disc | circle | square |/* glyphs; disc = bullet (default for ULs) */
decimal | decimal-leading-zero |/* decimal; varying digits (default for OLs) or 2 digits */
lower-roman | upper-roman |/* roman: I, II, III, … */
lower-latin | lower-alpha |/* alphabetic: a, b, c, … */
upper-latin | upper-alpha |/* alphabetic: A, B, C, … */
lower-greek | /* greek letters: α, β, γ, … */
armenian | georgian/* traditional uppercase Armenian or Georgian numbering */
list-style-image:inherit | none |
url(«uri»)/* use image from file */
list-style-position:inherit |/* positioning of the LI bullet or number */
outside |/* before the LI margin (conventional) */
inside/* after the LI margin (as first character in LI text) */
list-style:short for «list-style-type» | «list-style-position» | «list-style-image»
Notes:

Table styles

display: … |   /* below are only display properties specific for tables, otherwise see Visual formatting */
table |/* TABLE */
inline-table |/* a rectangular block that participates in an inline formatting context */
table-row |/* TR: a row of cells */
table-row-group |/* TBODY */
table-header-group |/* THEAD */
table-footer-group |/* TFOOT */
table-column |/* COL */
table-column-group | /* COLGROUP */
table-cell |/* TD, TH */
table-caption/* CAPTION */
caption-side:top | bottom | inherit
table-layout:inherit |/* determines which table layout algorithm will be used */
auto |/* column widths determined by browser */
fixed/* column widths determined by width attributes/style values (by author) */
border-collapse:inherit |
separate |/* table & cells all have their separate borders */
collapse/* table & cell borders coincide to a single border */
border-spacing:«hsize» [«vsize»]/* (CELLSPACING) when 1 «size» specified, it is used for horizontal & vertical
empty-cells:inherit |/* how to render empty cells */
show |/* cell background and borders are shown */
hide/* no cell background or borders are shown */
A table effectively consists of an outer table-box with inner cell-boxes;  all boxes have the common block properties (margin/border/padding/width/height) except padding for the table-box & margin for the cell-boxes (those do not apply).

=O=