Typography Properties

Font Family:

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

h1, h2, h3, h4, h5, h6{
  font-family: "Lucida Console", "Courier New", monospace;
}

Font Size:

Font size means size of texts. The default font size in an html file is 16px. For ex: for setting a font size of 18px and 22px in two para tags, we do it like below and its results can be seen here Look the results:

p{
  font-size: 18px;
}

p{
  font-size: 28px;
}

Font Weight:

Font weight is used for setting the thickness of each character. Normally the values are multiple of 100, where 400 is normal font and 700 means bold font. Its values can be also : lighter, normal, bold, bolder too. Either we can set its value by a multiple of 100 or by texts such as lighter, normal, bold, bolder.

Quick Tip: The thicker the characters in a text, the higher the font-weight value greater than 400 such as 500, 600, 700 or 900 max. Or bold or bolder for maximum thickness. Look at some of the examples here: Look the results

// first way
p{
  font-weight: bold;
}

// second way
div{
  font-weight: 700;
}

Font Style:

Font style means the way each character looks like either normal or italic or oblique. Italic and oblique styling are slanted texts styling. For ex: for setting a font style, we do it like below and its results can be seen here Look the results:

// first way
p{
  font-style: normal;
}

// second way
div{
  font-style: italic;
}

// third way
div{
  font-style: oblique;
}

Color:

Color means the the foreground color or the color of texts. Normally we have foreground color and background color. Background color is the color of elements(block/inline/inline-block) but not of texts and is not a typographic property so we will not cover it here. Plus there is a lot more to learn for different ways of setting a color here : More on colors.
For ex: for setting a color, we do it like below, Look at some of the examples here: Look the results:

// First way : Normal way
p{
  color: black;
}

// Second way : Hexadecimal way
p{
  color: #000000;
}

// Third way : RGB way
p{
  color: rgb(0, 0, 0);
}

// Fourth way : RGBA way
p{
  color: rgba(0, 0, 0, 0);
}

Text Align:

Text Align property always works on block level element and/or inline-block elements but never on inline elements. Since block level elements start from left side and end with right side of webpage. And normally texts does not necessarily takes the full width of block level elements so we have ample space to move the texts right side or center or left(which is by default). For ex: for setting a text-align, we do it like below, Look at some of the examples here: Look the results:

p{
  text-align: center;
}

div{
  text-align: right;
}

nav{
  text-align: left;
}

Text decoration:

Text Decoration property does specific decorations on the texts such as overline, underline, line-through or a combination of more than one decoration such as (underline line-through) etc. For ex: for setting a text-decorations, we do it like below and its results can be seen here Look the results:

p{
  text-decoration: overline;
}

h1{
  text-decoration: line-through;
}

h3{
  text-decoration: underline;
}

h6{
  text-decoration: underline overline;
}

Text transform:

Text transform property makes the text either fully uppercase or lowercase or make it capitalise. For ex: for setting a text-transform, we do it like below and its results can be seen here Look the results:

p{
  text-transform: uppercase;
}

h1{
  text-transform: lowercase;
}

h3{
  text-transform: capitalize;
}

Line Height:

Remember, the texts that we write is inside a content box, which is inside an element box. So line height is what increase the height of that content box. As a result, the distance between each line becomes bigger as we increase the line height.
For ex: for setting a line-height, we do it like below and its results can be seen here Look the results:

p{
  line-height: 20px;
}

Letter Spacing and word spacing:

Letter spacing means the spaces between each characters and word spacing means the spaces between each words. And we can customise those using the css property : letter-spacing and word-spacing as shown in below snippet . Also look at letter spacing example and word spacing example too.

p{
  letter-spacing: 3px;
}

h1{
  word-spacing: 30px;
}

Opacity:

Opacity comes from the english word opaque meaning how much percentage of texts are visible in an element. It starts from 0 (Not visible at all) and ends to 1(visible as normal). And any number in between like 0.3, 0.5 meaning 30% visible or 50% visible only. as shown in below snippet . Also look at some of the examples of opacity here, Look the results: :

p{
  opacity: 0;  // not visible at all
}

h1{
  opacity: 1;  // visible like normal, default value.
}

h3{
  opacity: 0.7;  // 70% visible
}

Note::
Please do not forget that without learning/remembering all of this, if you move to next properties, you will end up knowing something but once you start designing webpage with css, you will not be able to do it effectively. This is the key to learn css.