Cascading Style Sheets (CSS)

Page Contents

References

Selector

A great guide is (obvs) Mozilla, and the definitive is W3C.

Selector exampleMeaning
.className Selects all elements with class name "className"
.className1.className2 Selects elements with both classnames "className1" and "className2". Note that there is no space between the end of the first class name and the subsequent dot.
element.className Selects the HTML element type with the corresponding class name
id1, id2 Here idX can either be an HTML element tag or a class name (i.e., ".className". Selects all nodes identified by idx1 or idx2.
id1 id2 Here idX can either be an HTML element tag or a class name (i.e., ".className". The two identifiers are seperated by a space. This selects all elements identified by id2 that are a descendents (i.e., children, grandchildren and so on) of nodes identified by id1.
id1 > id2 Here idX can either be an HTML element tag or a class name (i.e., ".className". The two identifiers are seperated by a > symbol. This selects all elements identified by id2 that are immediate children of nodes identified by id1.
[attribute] or [attribute OP value] Selects all nodes with the attribute name specified inside the square br=ackets set. Additionally the attribute selection can be further refined based on its value using the operators = (equals), ~= (containing a whole word), |= (starting with), ^= (begins with), $= (ends with), *= (contains substring). E.g., "[target=_blank] selects node that have a target attribute and then only those where the attribute equals _blank.
id:first-child(n) Selects any node identified by id that is the first child of its parent.
id:last-child(n) Selects any node identified by id that is the last child of its parent.
id:nth-child(n) Selects any node identified by id that is the n-th child of its parent.
id:nth-col(n) Selects any node identified by id that is a cell belonging to the nth column in a grid/table.

There are an absolute load more - see the W3C link above. These tend to be ones I have most often used.

Also, note that you can chain some of the pseudo classes. For example button:hover:disabled applies a style to a button that has the mouse cursor over it and that is also disabled.

Calculating Element Properties

Creating Variables

Box Model

See the W3C's CSS Box Model Module.

Picture showning CSS box model and effect of box-sizing settings content-box, padding-box and border-box

Positioning Elements

References

Media Queries

See the article Media Queries Demystified: CSS Min-Width and Max-Width.