Index

Table of contents

CSS selectors

select element
[element] {
select class
.[class] {
select id
#[id] {
select element with attribute
input[type="submit"]
require sibling
[sibling] + [selector]
direct child combinator: select immediate children, not deeper nested ones
body > div
example: first row of table body, but only if the table has a caption
caption + tbody tr:first-child
multiple selectors
.incorrect, .error
select only the first named element in its parent
[element]:first-child {
select only the last named element in its parent
[element]:last-child {
select only the numbered named element in parent
[element]:nth-child([number]) {
other uses of nth-child repeating patterns
[element]:nth-child(odd) {       odd rows
[element]:nth-child(even) {      even rows
[element]:nth-child(4n) {        every 4th child
[element]:nth-child(4n-1) {      the one before every 4th child
select only the numbered named element in parent (disregards other elements)
[element]:nth--of-type([number]) {
select if it is the only element of this type in parent
[element]:only-of-type
select if element if parent does not have any other children
[element]:only-child
link states
[element]:active
[element]:focus
[element]:hover
[element]:visited
apply different styles depending on device
@media only screen and (max-width: 1200px) {
    body {
		color: red;
	}
}
@media only screen and (min-width: 1200px) {
    body {
		color: blue;
	}
}
documentation
https://www.w3schools.com/cssref/css_selectors.php

CSS variables

:root {
  --bg: #777;
}

body {
    background-color: var(--bg)
}

CSS styling

text

font families
font-family: cursive;
font-family: fantasy;
font-family: monospace;
font-family: serif;
font-family: sans-serif;
monospace
font-family: "Courier New", Courier, monospace

font-size: 2em;
font-size: 10px;

font-weight: normal;
font-weight: bold;
font-weight: bolder;

font-style: normal;
font-style: italic;
font-style: oblique;

text-decoration: none;
text-decoration: underline;

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

vertical-align: sup;
vertical-align: sub;

line-height: 24px;
line-height: normal;

letter-spacing: 20px;
letter-spacing: normal;

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-line;
white-space: pre-wrap;

text-indent: 20px;
change foreground color
color: green;

containers

flexbox

flexbox
display: flex;           container as block element
display: inline-flex;    container as inline element
flow direction
flex-direction: row;               left   -> right
flex-direction: column;            top    -> bottom
flex-direction: row-reverse;       right  -> left
flex-direction: column reverse;    bottom -> top
wrap on overflow
flex-wrap: wrap;
flex-wrap: no-wrap;
flex-wrap: wrap-reverse;
shorthand for flex-direction and flex-wrap
flex-flow: [flex-direction] [flex-wrap];
distribute remaining space
flex-grow: 0;          no more space than needed
flex-grow: [number];   relative weight of this card
flex-shrink: 0;        don't shrink this element
flex-shrink: 1;        shrink this element
flex-basis: 100px;     start with 100 pixels, then shrink/grow
flex: 1 1 0%;          shorthand for grow, shrink, basis
flexbox spacing
justify-content: flex-start;      align left
justify-content: flex-end;        align right
justify-content: center;          center + squish
justify-content: space-between;   spread
justify-content: space-around;    spread with margin
justify-content: space-evenly;    outer margin == inner margin
align children of element perpendicular to flow direction
align-items: stretch;
align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: baseline;
override alignment for this element in parent container
align-self: {stretch, center, flex-start, flex-end, baseline};
align multiline flex items
align-content: {center, flex-start, flex-end, space-between, space-around, space-evenly};
assign custom order and remove from normal flow
order: [number];

grid layouts

simple grid layout
display: grid;
grid-template-columns: [column]*              {%, px, rem, fr, auto}
assign fixed + fraction (auto grow column)
grid-template-columns: 100px 1fr;
use repeat to simplify definitions
grid-template-columns: repeat(3, 1fr);
auto size to let column size fit contents
grid-template-columns: auto auto 1fr;
leaving space between columns
row-gap: 10px;
column-gap: 10px;
shorthand for row gap and column gap
gap: [row-gap] [col-gap];
gap: [both];
override alignment for this element in parent container
justify-items:   {start, end, center, stretch};
spacing out cards on main axis
justify-content: {start, end, center, stretch, space-between, space-around, space-evenly};
spacing out cards on cross axis
align-content:   {start, end, center, stretch, space-between, space-around, space-evenly};
shorthand for alignment in both directions
place-content: [align] [justify]

positioning

position: absolute;        relative to its parent
position: fixed;           fixed position in browser window
position: relative;        offset from normal document flow
position: static;          according to normal document flow

left: 0px;
right: 0px;

height: 100vh;
height: 100%;
height: auto;
height: 100px
height: calc(100vh - 20px);

width: 100vh;
width: 276px;

min-height: none;
min-height: 1000px;
min-width: none;
min-width: 1000px;

max-height: none;
max-height: 1000px;
max-width: none;
max-width: 1000px;

z-index: ±[int];       # default = 0; greater number is on top

visibility

display: block;
display: inline-block;
display: none;

overflow

overflow: visible;    content crosses bounds
overflow: scroll;     scrollbars always
overflow: auto;       scrollbars as needed
overflow: hidden;     crop

overflow-x:hidden;
overflow-y:scroll;

margin / padding

padding inside of container
padding 10px;
margin outside of container
margin 10px;
separate margins for N, E, S, W (in order)
margin 5px 10px 5px 20px;

centering

centering a container vertically (container must be fixed width)
margin-left: auto;
margin-right: auto;

floating

[selector] { float:none; }
[selector] { float:left; }
[selector] { float:right; }
[selector] { clear: both; }

borders

border-collapse: collapse;
border-collapse: separate;
border: 1px solid black;
border: 1px dashed black;
border: 1px dotted black;
border: 2px groove;
border-top:    2px groove black;
border-bottom: 2px groove black;
border-left:   2px groove black;
border-right:  2px groove black;

coloring

set background color
background-color: #ddd;

images

background-image: url('/path/to/image.png');
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

opacity (less is more transparent)

opacity: 80%;

cursor

cursor: crosshair;
cursor: help;
cursor: move;
cursor: pointer;
cursor: progress;
cursor: text;
cursor: wait;

cursor: n-resize;
cursor: s-resize;
cursor: e-resize;
cursor: w-resize;
cursor: ne-resize;
cursor: se-resize;
cursor: nw-resize;
cursor: sw-resize;

styling elements

div

create transparent overlay{
background: #aaa;
	color: black;
	position: fixed;
	width: 100%;
	height: 100%;
	display: none;
	padding: 10px;
	opacity: 80%;
}

sup

superscript tag styling
sup {
    vertical-align: super;
    font-size: smaller;
}

sub

subscript tag styling
sub {
    vertical-align: sub;
    font-size: smaller;
}

table

collapse borders
border-collapse: collapse;
border-collapse: separate;
space between borders
border-spacing: 5px;
margin-left:  -5px;    /* correct for leftmost and leftmost border of table on parent */
margin-right: -5px;    /* correct for leftmost and rightmost border of table on parent */
space between borders (horizontal only)
border-spacing: 5px 0px;
margin-left:  -5px;    /* correct for leftmost and leftmost border of table on parent */
margin-right: -5px;    /* correct for leftmost and rightmost border of table on parent */
partial borders
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
striped tables
.versions tr:nth-child(odd) {
	background-color: #eee;
}
don't wrap text in table rows
tr {
    white-space: nowrap;
}

li

list-style-type: none;
list-style-type: inherit;
list-style-type: circle;
list-style-type: disc;
list-style-type: square;
list-style-type: upper-roman;
list-style-type: lower-alpha;
list-style-type: decimal;

list-style-position: inside;
list-style-position: outside;

list-style-image: none;
list-style-image: url(...);
vertical list
ul li {
	display: inline-block;
}

fieldset

fieldset {
    display: inline-block;
    border: 2px groove #000;
    background-color: #BBB;
    color: #555;
    padding: 2px;
    margin: 4px;
}

legend {
    border: 2px groove #222;
    background-color: #000;
    color: #666;
    padding: 2px;
}

svg

svg {
    display: inline-block;
    border: 1px solid blue;
    background-color: red;
    padding: 5px;
    margin: 5px;
    font-family: monospace;
    overflow: auto;
}

svg text {
	font: italic 40px serif;
	fill: red;
}

svg line {
	stroke: red;
}