Introduction to

Cascading Style Sheets (CSS)

CSS is the language used to style HTML documents. HTML is used to define the structure and the meaning of a webpage, and CSS is used to define the appearance. We have to learn HTML and CSS together to really build anything that users can actually enjoy!

Named colors

There are 140 standard CSS colors with common names like "Beige", "Cyan", or "Salmon". Then there are uncommon ones like "Gainsboro", "GoldenRod", and "RebeccaPurple". Although writing out "peachpuff" is not as concise as writing #FFDAB9, I find spelled out color names more readable than RBG codes. The only problem is remembering names when it is time to write them. If you rarely use "Cornflowerblue", it can be hard to remember the exact name.

AliceBlue

AntiqueWhite

Aqua

Aquamarine

Azure

Beige

Bisque

Black

BlanchedAlmond

Blue

BlueViolet

Brown

BurlyWood

CadetBlue

Chartreuse

Chocolate

Coral

CornflowerBlue

Cornsilk

Crimson

Cyan

DarkBlue

DarkCyan

DarkGoldenRod

DarkGray

DarkGrey

DarkGreen

DarkKhaki

DarkMagenta

DarkOliveGreen

Darkorange

DarkOrchid

DarkRed

DarkSalmon

DarkSeaGreen

DarkSlateBlue

DarkSlateGray

DarkSlateGrey

DarkTurquoise

DarkViolet

DeepPink

DeepSkyBlue

DimGray

DimGrey

DodgerBlue

FireBrick

FloralWhite

ForestGreen

Fuchsia

Gainsboro

GhostWhite

Gold

GoldenRod

Gray

Grey

Green

GreenYellow

HoneyDew

HotPink

IndianRed

Indigo

Ivory

Khaki

Lavender

LavenderBlush

LawnGreen

LemonChiffon

LightBlue

LightCoral

LightCyan

LightGoldenRodYellow

LightGray

LightGrey

LightGreen

LightPink

LightSalmon

LightSeaGreen

LightSkyBlue

LightSlateGray

LightSlateGrey

LightSteelBlue

LightYellow

Lime

LimeGreen

Linen

Magenta

Maroon

MediumAquaMarine

MediumBlue

MediumOrchid

MediumPurple

MediumSeaGreen

MediumSlateBlue

MediumSpringGreen

MediumTurquoise

MediumVioletRed

MidnightBlue

MintCream

MistyRose

Moccasin

NavajoWhite

Navy

OldLace

Olive

OliveDrab

Orange

OrangeRed

Orchid

PaleGoldenRod

PaleGreen

PaleTurquoise

PaleVioletRed

PapayaWhip

PeachPuff

Peru

Pink

Plum

PowderBlue

Purple

Red

RebeccaPurple

RosyBrown

RoyalBlue

SaddleBrown

Salmon

SandyBrown

SeaGreen

SeaShell

Sienna

Silver

SkyBlue

SlateBlue

SlateGray

SlateGrey

Snow

SpringGreen

SteelBlue

Tan

Teal

Thistle

Tomato

Turquoise

Violet

Wheat

White

WhiteSmoke

Yellow

YellowGreen

Cursory fun

All Named CSS cursors

auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
all-scroll
col-resize
row-resize
n-resize
s-resize
e-resize
w-resize
ns-resize
ew-resize
ne-resize
nw-resize
se-resize
sw-resize
nesw-resize
nwse-resize

CSS Selectors

Universal Selector: * { }

a
b
c
d

Selects everything. I use this to reset default CSS styles before adding my own.

Type Selector: a { }

a
b
c

Select elements by type. In this example, we select all a elements.

ID Selector: #a { }

#a
#b
#c

* IDs shouldn't be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It's preferred to use classes in selectors and then apply a class to an element in the page.

Class Selector: .a { }

.a
.b
.c

Here is a great primer on using class names to add context to your HTML and create more reusable code.