CSS Font and Color

Units of measurement

Absolute units

There are a few different ways of defining size with absolute units. 100% of the time I use .px. All the other units are for edge cases.

.px {
    font-size: 16px;
}
.cm {
    font-size: 10cm;
}

.mm {
    font-size: 10mm;
}

.in {
    font-size: 10in;
}

.pt {
    font-size: 10pt;
}

.pc {
    font-size: 10pc;
}

Relative Units

There are 3 main relative units, percent, em, and rem

.percent {
    font-size: 90%;
}

.em {
    font-size: 1em;
}

.rem {
    font-size: 1rem;
}

Font Styles

Font Size

p {
    font-size: 16px;
}

Font Weight

p {
    font-weight: bold;
    font-weight: normal;
    font-weight: thin;
    font-weight: lighter;
    font-weight: 300;
    font-weight: 400;
    font-weight: 500;
    font-weight: 600;
}

Font Style

p {
    font-style: normal;
    font-style: italic;
    font-style: oblique;
}

Letter Spacing

p {
    letter-spacing: 2px;
}

Line Height

p {
    line-height: 1.6;
}

Text Align

p {
    text-align: left;
    text-align: right;
    text-align: center;
}

Text Decoration

p {
    text-decoration: underline;
    text-decoration: overline;
    text-decoration: line-through;
    text-decoration: blink;
    text-decoration: none;
    text-decoration: underline overline;
}

Text Transform

p {
    text-transform: capitalize;
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: none;
    text-transform: full-width;
}

Font Family

p {
    font-family: sans-serif;
    font-family: Arial, sans-serif;
}

Color Styles

Hex

p {
    color: #223344;
    background-color: #99AABB;
}

RGB

p {
    color: rgb(80, 100, 120);
    background-color: rgb(180, 200, 220);
}

RGBA

p {
    color: rgba(80, 100, 120, 0.8);
    background-color: rgb(180, 200, 220, 1);
}

HSL

p {
    color: hsl(120, 100%, 50%);
    background-color: hsl(190, 80%, 50%);
}

HSLA

p {
    color: hsla(120, 100%, 50%, 1);
    background-color: hsla(190, 80%, 50%, 0.8);
}