Index

Table of contents

CSS selectors

select element
[element] {
select class
.[class] {
select id
#[id] {
require sibling
[sibling] + [selector]
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]: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 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

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;

display: flex;

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;
}