Index

CSS

selectors

select element
[element] {
select class
.[class] {
select id
#[id] {
select only the first named element in parent
[parent] [element]:first-child {
select only the last named element in parent
[parent] [element]:last-child {
multiple selectors
.incorrect, .error

text

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

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

text-align: left;

line-height: 24px;

height: 100vh;
height: 100%;
height: auto;
height: 100px
height: calc(100vh - 20px);
change foreground color
color: green;
monospace fonts
font-family: "Courier New", Courier, monospace

containers

margin outside of container
margin 10px;
padding inside of container
padding 10px;

width: 100vh; 
width: 276px;

left: 0px;
right: 0px;

display: flex;
floating
[selector] { float:left; }
[selector] { float:right; }
[selector] { clear: both; }
set background color
background-color: #ddd;
borders
border: 1px solid black;
border: 1px dashed black;
border: 1px dotted black;
border: 2px groove;
border-collapse: collapse;

styling elements

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

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;