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;