HTML & CSS Cheat Sheet

HTML Elements

HTML Tables

Tag Name Description
<table> Table The wrapper element for all HTML tables.
<thead> Table Head The set of rows defining the column headers in a table.
<tbody> Table Body The set of rows containing actual table data.
<tr> Table Row The table row container.
<td> Table Data The table data container.
<tfoot> Table Foot The set of rows defining the footer in a table.

CSS Selectors & Properties

CSS Selectors

Basic Selectors

Selector Description Syntax Example
Universal Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. * ns|* *|* * will match all the elements of the document.
Type Selects all elements that have the given node name. elementname h1 will match any <h1> element.
Class Selects all elements that have the given class attribute. .classname .example will match any element that has a class of "example".
ID Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. #idname #headline will match the element that has the ID "headline".
Attribute Selects all elements that have the given attribute. [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] [autoplay] will match all elements that have the autoplay attribute set (to any value).

Grouping Selectors

Selector Description Syntax Example
Selector List The , selector is a grouping method that selects all the matching nodes. A, B div, span will match both <span> and <div> elements.

Combinators

Selector Description Syntax Example
Descendant Combinator The " " combinator selects nodes that are descendants of the first element. A B div span will match all <span> elements that are inside a <div> element.
Child Combinator The > combinator selects nodes that are direct children of the first element. A > B ul > li will match all <li> elements that are nested directly inside a <ul> element.
General Sibling Combinator The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. A ~ B p ~ span will match all <span> elements that follow a <p>, immediately or not.
Adjacent Sibling Combinator The + combinator matches the second element only if it immediately follows the first element. A + B h2 + p will match the first <p> element that immediately follows an <h2> element.
Column Combinator The || combinator selects nodes which belong to a column. A || B col || td will match all <td> elements that belong to the scope of the <col>.

Pseudo

Selector Description Syntax Example
Pseudo Classes The : psuedo allows the selection of elements based on state information that is not contained in the document tree. element:state a:visited will match all <a> elements that have been visited by the user.
Pseudo Elements The :: pseudo represents entities that are not included in HTML. element::entity p::first-line will match the first line of all <p> elements.