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