Common CSS Properties

Now that we’ve covered color codes, the rest of the properties are pretty straightforward. ┬áHere is a quick reference for what we find to be the most useful CSS Properties. The full list can be viewed at sites like w3schools.com. Enjoy!

Color Properties

colorForeground Color
- takes #RRGGBB
eg. color: #FFFFFF;
background-colorBackground Color
- takes #RRGGBB
eg. background-color: #441050;


Text Properties

text-alignJustify on page
- possible values: center, left, right
eg: text-align: center;
text-indentNudges in a block of text
- takes number of pixels (in px)
eg: text-indent: 30px;


Font Properties

font-sizeSet how large the text should be
- takes number of pixels (in px); Default is 16px
eg: font-size: 24px;
font-weightSet how thick text should look
- possible values: normal, bold, bolder, lighter
eg: font-weight: bold;


Font Families

Setting a web “font” is tricky. Unfortunately, it is almost impossible to find a font that is available on all computers, so we must specify groups of 3 to 5 fonts (families) to use. If the exact one we want isn’t available, the browser will look for the next one in the list. Below is a list of tested “safe” font families along with a suggested place to use each. The accepted wisdom is that long stretches of text are more easily read with “serif” fonts, but the final choice is up to you.

Syntax: font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;


Suitable Anywhere

Arial, "Helvetica Neue", Helvetica, sans-serif The quick brown fox jumps over the lazy dog
Cambria, Georgia, Times, "Times New Roman", serif The quick brown fox jumps over the lazy dog
"Century Gothic", "Apple Gothic", sans-serif The quick brown fox jumps over the lazy dog
Consolas, "Lucida Console", Monaco, monospace The quick brown fox jumps over the lazy dog
"Copperplate Light", "Copperplate Gothic Light", serif The quick brown fox jumps over the lazy dog
"Courier New", Courier, monospace The quick brown fox jumps over the lazy dog
"Franklin Gothic Medium", "Arial Narrow Bold", Arial, sans-serif The quick brown fox jumps over the lazy dog
Futura, "Century Gothic", "Apple Gothic", sans-serif The quick brown fox jumps over the lazy dog
Times, "Times New Roman", Georgia, serif The quick brown fox jumps over the lazy dog


Designed for Headlines (ie h1,h2,h3…)

Baskerville, Times, "Times New Roman", serif The quick brown fox jumps over the lazy dog
Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif The quick brown fox jumps over the lazy dog
Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif The quick brown fox jumps over the lazy dog
Georgia, Times, "Times New Roman", serif The quick brown fox jumps over the lazy dog
"Gill Sans", "Trebuchet MS", Calibri, sans-serif The quick brown fox jumps over the lazy dog
Helvetica, "Helvetica Neue", Arial, sans-serif The quick brown fox jumps over the lazy dog
Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif The quick brown fox jumps over the lazy dog
Tahoma, Verdana, Geneva The quick brown fox jumps over the lazy dog
"Trebuchet MS", Tahoma, Arial, sans-serif The quick brown fox jumps over the lazy dog
Verdana, Tahoma, Geneva, sans-serif The quick brown fox jumps over the lazy dog


Designed for Paragraphs (ie. p)

Baskerville, "Times New Roman", Times, serif The quick brown fox jumps over the lazy dog
Garamond, "Hoefler Text", "Times New Roman", Times, serif The quick brown fox jumps over the lazy dog
Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif The quick brown fox jumps over the lazy dog
Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif The quick brown fox jumps over the lazy dog
"Gill Sans", Calibri, "Trebuchet MS", sans-serif The quick brown fox jumps over the lazy dog
"Helvetica Neue", Arial, Helvetica, sans-serif The quick brown fox jumps over the lazy dog
Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif The quick brown fox jumps over the lazy dog
Tahoma, Geneva, Verdana The quick brown fox jumps over the lazy dog
"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif The quick brown fox jumps over the lazy dog
Verdana, Geneva, Tahoma, sans-serif The quick brown fox jumps over the lazy dog



PHEW! That’s a lot of font families. But it begs the question, what if we just want to use a font (or any CSS rule for that matter) on just a few lines or screen elements? Currently, we can only make global changes to ALL h1 tags or ALL p tags. What if say, we wanted to emphasize just the first paragraph of our page? Well that brings us to the topic on the next page.

Prev Page: Color Primer
Next Page: Advanced Selector