Home
  HTML5 Summary
 P. van Diemen

Under construction

Introduction

This is an excerpt for HTML v5 and CSS3, not particularly suited as a beginners' guide.  It is not exhaustive, but contains all relevant elements with the differences to HTML4 and CSS2 respectively highlighted.

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
blue textnew in HTML5 (except for the headers which are always blue).
red textdeprecated in HTML5 (or earlier).  But as browsers still support HTML4, most things still work.

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 (as browser may have to support HTML4 as well), but authors should look for other ways to achieve the desired result (typically through style statements).

Blanks/spaces and newlines (Carriage return, Line feed, Tab) are only word separators, and have no other relevance for HTML.
HTML accepts tags in uppercase and lowercase (and mixed case), but in this document all tags are indicated in uppercase.

References

Courses

 

General structure

File structure

«DTD definition»{ See corresponding paragraph below }
<HTML [ lang="en" ] >{ start HTML, attribute lang indicates content language (English) }
 <HEAD>{ start Head section }
   [ <META ... > ]{ See corresponding paragraph below }
<TITLE>HTML & CSS Summary</TITLE>{ Page title (in the title bar) }
[ <STYLE ... > ]{ See section Styles below }
</HEAD>{ end of Head section }
<BODY>{ start Body section: the webpage contents }
[<HEADER>{ a header part (not to be confused with <HEAD>); see Document Structure }
   [<H1>Section title<H1>]{ section header text }
</HEADER>]{ end of header part }
[<MAIN>{ start of main text (optional); see Document Structure }
   [<ARTICLE>{ start of a topic; see Document Structure }
   «elements forming the page contents»{ See section Elements below }
</ARTICLE>]{ end of a topic }
</MAIN>]{ end of main text }
[<FOOTER>{ a footer part; see Document Structure }
</FOOTER>]{ end of footer part }
</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.  For HTML5 it is:  <!DOCTYPE html>
When no DTD is present, nowadays this one is assumed (i.e. HTML5).

Meta elements provides metadata:  information about the page (only indirectly about its subject).  Attributes are:  name, http-equiv (pragma directive), content and charset.  When charset or http-equiv is used, the meta element must be in the <head> section, otherwise it may appear where appropriate.  No closing tag for META.

Defined values for the name attribute are: 

Defined values for the http-equiv attribute are: 

Examples of meta elements:

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

Document structure

HTML5 is different from HTML4 in that it tries to convey the document's structure (as the author intended it) to the browser.  For this purpose a set of special tags were introduced: 

<MAIN> ·· </MAIN>
For the main body of the document's subject.
It is optional (don't use it if the webpage contains a number of unrelated topics; it can not be used within an article or a nav);  closing tag required. 
<ARTICLE> ·· </ARTICLE>
To describe one of a series of 'unrelated' or self-contained topics (like news items).
It is optional (when used you probably have multiple articles);  closing tag required.
<HEADER> ·· </HEADER>
To group elements as headers for the following text and may include header texts (e.g. H1-H6 elements), introductory text, local ToC, local references (navigation), etc.
It is optional;  closing tag required.  A header is not sectioning content, and it doesn't start a new section.
<FOOTER> ·· </FOOTER>
To group elements representing a footer and may contain the author's name, links to related documents, copyright data, and similar.
It is optional;  closing tag required.
<SECTION> ·· </SECTION>
To group elements in a (large) document as in a chapter (so the first child element is most likely a [<header>] <H1> element).
It is optional;  closing tag required.  A section is also used by 'responsive websites' to dynamically adapt layout to screen size (for devices with small screens like smartphones).
<NAV> ·· </NAV>
Represents a section of a page that links to other pages or to parts within the page:  a section with navigation links.
Closing tag required.

So for a single (large) document, you would use <main> with a <header> containing the document's title, author, etc., and put the chapters into <section>s each with a <header> containing a <h1> for the chapter's title.
For a series of (short) autonomous stories you would not use use <main> or <section> but the <article> element for each story, probably with a <header> containing a <h1> for the story's title.

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 >).

Common attributes

All elements may have the following 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 not allowed anymore:  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 }
translate=|yes|no{whether or not this element (and its children) are to be translated thre page is localized }
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, like a 'tooltip' }
align= left | center | right | justify{deprecated; use style.text properties }
hidden{the corresponding element is there, but not visibly presented }
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 (commonly) about one line of white space 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 <WBR> (word break), 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;) looks like a white space but is not, and will not wrap.  See also Styles.Text properties.White-space.
<BR> forces a line break (no closing tag on <BR>).

<Hn> headers

Headers (not to be confused with the <header> element) are a special form of paragraphs, rendering the text larger and usually in bold.  The heading element contains a level-number, where 1 is the most important heading (e.g. corresponding to chapter title) and 6 is the least important (e.g. corresponding to a sub­…sub­section).  The headings are not presented with a section number (but that can be achieved with Style.autonumbers).
Closing tag (with same level number) required.  Often used in conjunction with <section> (and <header>).

Mark-up

There are 2 tags which in themselves 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> and <STRIKE> (use <DEL>) or <S>strike-out</S> text (Strike-out was deprecated in HTML4 but not in HTML5).
Example of <BIG>big</BIG> and <SMALL>small</SMALL> text.
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.
<EM> Indicates emphasis. </EM>
<STRONG> Indicates stronger emphasis. </STRONG>
<DFN> Indicates that this is the defining instance of the enclosed term. </DFN>
<CODE> Designates a fragment of computer code.</CODE>
<KBD> Indicates text to be entered by the user. </KBD>
<TT> Teletype text (mono spaced) </TT>
<SAMP> Designates sample output from programs, scripts, etc.</SAMP>
<DATA value=data> Designates data contents with a machine-readable form in its value attribute.</DATA>
<VAR> Indicates an instance of a variable or program argument. </VAR>
Add a <RUBY>annotation<rt>annotation</RUBY>

<MARK>Higlight text</MARK>
<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>
Caption text:
<FIGURE> [<figcaption>Caption text:</figcaption>]
Text block for many purposes (e.g. an <img>) </FIGURE>

Notes:

Then there are a number of mark-up tags which don't change the rendering, but indicate specifics about its contents:
<ABBR TITLE="Show expanded abbreviation"> is similar</ABBR>
<ACRONYM title="World Wide Web">(hover mouse over): WWW</ACRONYM>: deprecated;  use <ABBR> or see next line.
   The same effect can be achieved through <SPAN title="Pop-up through Span/title">(hover mouse over)</SPAN>.
<ADDRESS>Denotes contact information for its nearest <article> or <body> ancestor</ADDRESS>
<TIME>2011-11-18 14:45</TIME> indicates a date and/or time string
<NAV>text with hyperlinks </NAV> indicates the main hyperlinks for navigation

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

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.  The attribute reversed forces the numbering backward.
? 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>]
<DD>Multiple data elements allowed [<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.  Multiple TBODYs are allowed. }
<TBODY> «table rows» [</TBODY>]
[ <TFOOT> «table rows» [</TFOOT>] ]
</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 }

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

Cell:  <TD [rowspan=n] [colspan=n] [width=«size»] [«halign»] [«valign»] [scope=see below] > «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.

The cell attribute scope can have the following values:

See Table styles for styles specific for tables.

Tables are used to present tabular data, but also to obtain a particular layout.  The latter case is discouraged, but when used, the table should have the attribute role="presentation".

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 "" }
target = { browsing context }
method = get | post
enctype = content-type (default "application/x-www-form-urlencoded")
accept-charset = charset_list (e.g. "UTF-8")
name = «name»{ forms name for reference; preferably use Id }
novalidate{ bypass forms validation }
«input_elements» and/or «select-elements» and/or «button-elements» and/or other HTML elements and text
</FORM>
 
<FIELDSET>{ Grouping of fields }
…(input) fields…{ series of form fields to be grouped }
</FIELDSET>
 
<LABEL>
Text: <input...>{ connect Text to an INPUT }
</LABEL>
 
<INPUT
type = text | password{ normal text or '*' echo }
= | checkbox | radio | range{ on/of-switches, alternative choices or range }
= | 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" }
placeholder{ sample text for input; you can also use the title attribute }
checked{ when the type is "radio" or "checkbox", it specifies that the button is on }
readonly{ user may not modify value (text) }
disabled{ user may not modify value (as (other) values are not applicable) }
multiple{ user may enter multiple lines or select multiple options }
required{ field must have a value }
accept ={ content-type-list e.g. "text/html", "image/png", "text/css", "audio/*", "video/*", "image/*", ".«file-type»[,.«file-type»]* }
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 }
minlength = #chars{ the minimum number of characters the user should enter }
min{ minimum value }
max{ maximum value }
step{ granularity to be matched }
autofill{ see below }
pattern{ a regular expression to check input }
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 }
 
<BUTTON{ General pushbutton element }
name = «name»{ control name }
value = { initial value, sent to server when submitted }
type= button | submit | reset | menu{ for use as form button; default 'submit'; menu is in conjunction with <menu> }
disabled{ button is disabled (i.e. will not work) }
tabindex = «number»{ position in tabbing order }
accesskey = «char»{ focus to the element by Alt/«char» }
>
button text
</BUTTON>
 
<SELECT
name = «name»{ field name }
size = #lines{ rows visible }
disabled{ user may not modify 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 }
maxlength = #chars{ the maximum number of characters the user may enter }
minlength = #chars{ the minimum number of characters the user should enter }
placeholder{ sample text for input; you can also use the title attribute }
readonly{ user may not modify text }
disabled{ user may not modify value }
required{ field must have a value }
wrap= soft | hard{ whether text should be subnitted with hard line wrapping (though it can still be wrapped in the rendering) }
tabindex = «number»{ position in tabbing order }
accesskey = «char»{ focus to the element by Alt/«char» }
>
First line of initial text …
</TEXTAREA>
 
<OUTPUT>{ Text output area }
Initial output text …
</OUTPUT>
 
<PROGRESS{ To indicate the completion progress of a task }
[ value= «fraction» ]
[ max= «amount» ]
> [ text ]
</PROGRESS>
 
<METER;{ To indicate a 'gauge' (e.g. a level) }
min = val1 max = val2{ meter ranges from val1··val2 (default 0··1) }
value = val3{ currently measured value }
[ low=val4 ] [ hight=val5 ]{ partition meter range in low, middle and high sections ]
[ optimum = val6 ]{ optimum (desired) value }
> [ text ]
</METER>

Autofill tokens (words) are the following:

 

Links

Hypertext references:

<A href="«URI»"{ for URI see below }
    [ download="«filename»" ]{ In stead of href, use the link to download a file }
[ type='«target_content_type»' ]{ Mime type of target (not required when .html) }
[ target="«window_name»" ]{ Required when target text is to appear in another/new window (or frame) }
[ 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 HTML5 the name attribute in <A> to define an in-document target for hyperlinks is deprecated !  You should now use the id attribute on an HTML element to define targets.

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> are deprecated in HTML5 !  However, as browsers still support HTML4 you can have a HTML4 document with the <frameset> and HTML5 documents within the frames (it works, but this is obviously not the intention of HTML5).

The <iframe> is supported in HTML5.

When using a lot of relative references to the same file, one may use:
   <BASE href="«url»" [target="«window_name»"]>   { use this as base address for all relative urls. }
Note however that <BASE … > (no closing tag) must be located in the <HEAD>-section, and applies to all relative urls in that document.
 

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="mystyle.css" 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), 3d-glasses, all (applicable for all devices).
    If «media_type» is not specified, all is assumed.
    Media types can be a comma-separated list, and a media type may be attributed with requirements using 'and' like resolution or (color) e.g. 'print and resolution > 90dpi', 'screen and (color)' or '(min-width:500px)'.  Or (the syle sheet for) a media type can be excluded with 'not' .
    Style sheets for specific media types can be specified through:
    • @import url("print.css") print;
    • @media handheld { «style_declarations» }
    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 not for higher level LIs */
.smlcps{ font-variant: small-caps }/* general class for small-caps */
P.blue{ font-color: blue }/* (dark) blue text for paragraphs of class blue */
TD#z9{ font-weight: bold }/* bold for cell with ID=z9 */
</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 on its own)
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 ~ TAG2{ «style_declarations» }Contextual selection sibling:  applies to all TAG2s that are 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[ATR^="rem"]{ «style_declarations» }Attribute selection:  applies to all TAG1s whose ATR attribute value starts with "rem"
TAG1[ATR$="rem"]{ «style_declarations» }Attribute selection:  applies to all TAG1s whose ATR attribute value ends with "rem"
TAG1[ATR*="rem"]{ «style_declarations» }Attribute selection:  applies to all TAG1s whose ATR attribute value contains (the substring) "rem"
(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.  A[href$=".html"] represents any HTML anchor a with an href attribute whose value ends with ".html".

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 */
TAG:target{ «style_declarations» }/* applies to a TAG that is a target for a URI */
dynamic or user action 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) */
TAG:enabled{ «style_declarations» }/* applies to a user-interface TAG that is enabled */
TAG:disabled{ «style_declarations» }/* applies to a user-interface TAG that is disabled */
TAG:checked{ «style_declarations» }/* applies to a user-interface TAG that is checked (i.e. a 'radio-button') */
structural child pseudo class:
TAG:root{ «style_declarations» }/* triggers when TAG is the root of the document (i.e. the <HTML> element) */
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 */
TAG:last-child{ «style_declarations» }/* triggers when TAG is the first child (of some other element) */
TAG:nth-child(N){ «style_declarations» }/* triggers when TAG is the Nth child (of some other element) */
TAG:nth-last-child(N){ «style_declarations» }/* triggers when TAG is the Nth last child (i.e. counting from the end backwards) */
TAG:only-child{ «style_declarations» }/* triggers when TAG is the only child */
TAG:first-of-type{ «style_declarations» }/* triggers when TAG is the first of its type */
TAG:last-of-type{ «style_declarations» }/* triggers when TAG is the last of its type */
TAG:nth-of-type(N){ «style_declarations» }/* triggers when TAG is the Nth of its type */
TAG:nth-last-of-type(N){ «style_declarations» }/* triggers when TAG is the Nth last of its type */
TAG:only-type{ «style_declarations» }/* triggers when TAG is the only child of its type */
TAG:empty{ «style_declarations» }/* triggers when TAG has no children (including text nodes) */
TAG1:lang(fr){ «style_declarations» }/* applies to all TAG1s (or its children !) in language "fr" */
TAG1:not(S){ «style_declarations» }/* applies to all TAG1s not matching selector S (e.g. BUTTON:not([DISABLED]) selects all BUTTONs not disabled) */

Then there are pseudo-elements: (note the double colons :: where in CSS2 it was a single colon)

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
border-radius:border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius/* rounded corners (0 = square corners) */
border-radius:«size» | «percentage» [ / «size» | «percentage» ]/* when 2 values are used (ellipse), the first refers to the horizontal line, the second to the vertical line */
box-shadow:«hor-offset» «ver-offset» [«blurr-radius» «spread-size»] [«color»] [inset]/* shadow poperties */
/* see CSS3-background */
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 | full-width | none /* capitalize upcases the first letter of each word */
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/* cursive: 'italic' is often a specific font variant, while 'oblique' is a slanted version of the 'straight' font */
font-variant-CSS2:inherit | normal | small-caps
font-variant:normal | none | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps | ruby | …/* can set a lot of specific OpenType font features (not listed here).  'Normal' resets all subproperties of 'font-variant' to their inital value; the 'none' value sets font-variant-ligatures to 'none' and resets all other font feature properties to their initial value */
font-weight:inherit | normal | lighter | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900/* 400 corresponds to 'normal', 700 to bold */
font-stretch:inherit | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded/* this condenses or expands the font, not the letter-spacing */
font-size:inherit | «absolute-size» | «relative-size»
«absolute-size»«size» | xx-small | x-small | small | medium | large | x-large | xx-large/* «size» in size units;  font size can also be overridden by settings in most browsers */
«relative-size»«percentage» | smaller | largerrelative to the parent's font size
font:shorthand for: «font-style» | «font-variant-CSS2» | «font-weight» | «font-stretch» | «font-size»[/«line-height»] | «line- height» | «font-family» | caption | icon | menu | message-box | small-caption | status-bar
Note that when using relative sizes in the «font-size»/«line-height» construct, the «font-size» relates to the parent's font-size, and the «line-height» to the newly defined font-size. 		/* sets font properties, and resets subproperties 'font-size-adjust', 'font-kerning', and subproperties of 'font-variant'.
Caption, icon, menu, message-box, small-caption, status-bar indicates where the font is to be used (as 'system fonts') */
tab-size:«integer» | «length»/* advances with that number of spaces (not a true tabulator) */
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 */
summary:
white-space value New LinesSpaces and TabsText Wrapping
normalCollapseCollapseWrap
prePreservePreserveNo wrap
nowrapCollapseCollapseNo wrap
pre-wrapPreservePreserveWrap
pre-linePreserveCollapseWrap
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) of the element (which is about the width of the letter 'm') */
ex/* height of the (lowercase) letter 'x', which is about average character width */
ch/* width of the digit '0' (which is about 0.5em) */
rem/* font size of the root element */
When a relative unit is used in a font-size definition (i.e. 'self referencing'), it uses the font-size of the parent element.
«percentage»%/* percentages are by definition relative to another size unit (often the element's width) */
vw/* 1% of viewport's width */
vh/* 1% of viewport's height */
vmin/* 1% of viewport's smaller dimension */
vmax/* 1% of viewport's larger dimension */
«absolute-size»pt/* points = 1/72 inch */
pc/* picas = 12pt = 1/6 inch */
px/* pixel unit = 1/96 inch = 0.75pt (assume 96ppi/dpi for screens) */
in/* inches */
cm/* centimeters */
mm/* millimeters */
q/* quarter 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 print 300 dpi is minimal, for screens 96 ppi is quite normal, but Smartphones nowadays often surpass 300 ppi).
CSS3 solved this by stating that for print media and similar high-resolution devices, the physical unit should be used (i.e. the reference pixel is 1/96 inch.  And for lower-resolution devices (and devices with unusual viewing distances) the pixel should be used as reference unit (so an inch is 96  pixels).
«resolution»dpi/* Dots per inch (for screens also indicated as ppi: pixels per inch) */
dpcm/* Dots per centimeter (1 dpi is about 2.5 dpcm) */
dppx/* Dots per pixel (CSS assumes 1 pixel = 1 dot, i.e. 1 dppx) */
«angle»deg/* Degrees (360 degrees is a full circle) */
grad/* Gradians / Gons / Grades (400 degrees is a full circle) */
rad/* Radials (2π is a full circle) */
turn/* Turns (1 turn is a full circle) */
When an angle denotes a direction, it must always be interpreted as a bearing angle, where 0deg is "up" or "north" on the screen, and larger angles are more clockwise (so 90deg is "right" or "east").
«time»s/* Seconds */
ms/* Milliseconds (1000 milliseconds in a second) */
«frequency»Hz/* Hertz (number of occurences per second) */
kHz/* KiloHertz (a kHz is 1000 Hz) */
Note:  In size definitions, one of the above units must be specified (when the value is not 0) !
Special data types, defined below in their context, are: color, image and position.

Functions

Calculations
where ever a number is used –like in above size units– one may use calc( mathematical expression using +, -, * and / ).
Toggle
allows to dynamically switch between values.  E.g.:
em { font-style: toggle( italic, normal ); } makes <em> text italic, except when the preceding text is already in italics; than it makes it normal
ul { list-style-type: toggle( disc, circle, square, box ); } lets the list style type cycle through these 4 variants.
Attribute reference
returns the value of the named (CSS) attribute:  attr( «attr-name» [«type-or-unit» [, «attr-fallback» ]] ); where «type-or-unit» is either string, color, url, integer, number, length, or any of the above size units.

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).