Learning Code

Font Family

There are default fonts on any computer that you can set for your page.
You can use a generic font family name or a specific font family name. This first example shows a generic font family:
h1 {font-family: monospace;}

More +

Generic font family names are: cursive, fantasy, monospace, serif and sans-serif.

An example of a specific font family would be
article {font-family: arial, "times new roman";}
Some specific font family names would be Arial, Georgia, or Times New Roman (this is not an exhaustive list, there are other font family names). When you chose a specific font family, you usually include a list of options in case the correct font family is missing on the computer. Notice that if there are spaces in the font name, you must place the name inside of quotation marks.

Font size can be set with ems, percentages (%), pixels (px), or with set values like small, medium & etc. You can choose whichever unit you prefer but not all browsers will display each kind of unit in the same way.
body {font-size: 12px;} (most precise from browser to browser but the least flexible)

More +

body {font-size: small;} or
body {font-size: 75%;} (sometimes can end up too small or too big)

To use ems (which are relative based on the previously set font-size), first a font-size needs to be set to the containing element. Often, a font size will be set in pixels or percentage for the body. Then ems can be used as a unit on the elements contained by the body.
h3 {font-size: 1.5em;} (this is 1 & 1/2 times the font-size set for the body.)

Font Style, Varients, Weight

If you want italics, use font-style:
h1 {font-style: italic;}
If you want smaller capital letters after a capitalized letter use font-variant:
h2 {font-variant: small-caps;}
If you want to change your font weight, you can use font-weight:
h3 {font-weight: bold;} or h3 {font-weight: 200;}
Font-style, font-variant, and font-weight all have other possible values, but this should get you started.

Text Alignment

The property for text alignment is text-align. You can set your text alignment to the left, center, right, or have your text justified.
This would look like: h4 {text-align: center;}

Text Decoration

Text decoration is used when you want to have an underline, overline or a line going directly through your text.
h1 {text-decoration: underline;} or
h2 {text-decoration: overline;} or
h3 {text-decoration: line-through;}
There are a couple other possible values, such as "none" if you want to get prevent text-decoration - this is handy when styling your links!

Text Transform

Transformation deals with setting capital letters for your text. You can make everything uppercase, lowercase, or capitalize the first letter of words. This would look like
.top {text-transform: capitalize}

Le arning Code

Working with Text

Font Family

Font Size

Font Style, Varients, Weight

Text Alignment

Text Decoration

Text Transform