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

Rough n' Ready Notes

VIEWPORTS
=========
See https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts

A viewport represents the area in computer graphics being currently viewed. In web browser terms, it is generally the
same as the browser window, excluding the UI, menu bar, etc. That is, the part of the document you are viewing.


POSITIONING
===========
See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow
    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

Normal flow specs how block and inline elements interact - how they are placed inside the browser's viewport.

Block level elements occupy the entire space in the row in which they are positioned. They follow the "document flow".
They have 100% width of parent element and are as tall as their content. Thus block elements laid out vertically and
appear on new lines.

Inline elements as wide and as tall as their content. Cannot have width or height set - only for block level. Inline
elements sit on same line as one another and adjacent text elements. They can be wrapped to next line if space runs
out.

MARGIN COLLAPSING: If two adjacent elements both have the margin set on them and the two margins touch, the larger
of the two remains, and the smaller one disappears.

Types of positioning:
	1. STATIC:   Means "put the element into its normal position in the document layout flow".
 	2. RELATIVE: Similar to static positioning, except that once the positioned element has taken its place in
	             the normal layout flow, you can then modify its final position, including making it overlap
	             other elements on the page.
	3. ABSOLUTE: Takes element OUT of the normal flow - where the element would be in normal flow, other
	             elements will now take its place.
	             An absolutely positioned element no longer exists in the normal document layout flow. Instead,
	             it sits on its own layer separate from everything else.
        4. FIXED:    Like absolute positioning, except that where absolute positioning fixes an element in place
	             relative to its nearest positioned ancestor, fixed positioning fixes an element in place
	             relative to the BROWSER VIEWPORT.
        5. STICKY:   Hybrid between relative and fixed position. Allows a positioned element to act like it is
                     relatively positioned until it is scrolled to a certain threshold point, after which it
	             becomes fixed.

	RELATIVE/ABSOLUTE POSITIONING - POSITIONING CONTEXTS
	----------------------------------------------------
	Relative positioning does NOT take objects out of the document flow.
	Absolute positioning takes objects OUT of the document flow.
	
	Positioning context is defined in 2 cases:
	   1. If no ancestor has position property applied then context is the <htmL> element
	   2. Else, the closest ancestor with a position property becomes the positioning context.
	      So, normally the closes ancestor will have a "relative" position property.
	
	For "fixed" positioning the positioning context is the VIEWPORT.



GRIDS
=====
See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids



FLEXBOX
=======
See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
    https://css-tricks.com/snippets/css/a-guide-to-flexbox


MULTI-COLUMN LAYOUT
===================
See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts

The the CSS properties "column-count", "column-gap", "column-rule", and "column-width". Just splits out
elements into columns. As one column space gets used up the context flows into the next column and so on.

EG
	.container {
	    column-count: 3;
 	    column-gap: 20px;
 	    column-rule: 4px dotted rgb(79, 185, 227);
	}

Elements can also span *all* columns (not a subset though) using "column-span: all" property.

To stop column content breaking in awkward places use CSS Framgmentation properties. EG
"page-break-inside: avoid".



MEDIA QUERIES
=============
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries