serif
In CSS, there are two types of font family names:

generic family
- a group of font families with a similar look (like "Serif" or "Monospace")
font family -
a specific font family (like "Times New Roman" or "Arial")
Serif
fonts have small lines at the ends on some characters.
Sans-serif
: Sans means without - these fonts do not have the lines at the ends of characters. All
monospace
characters have the same width. Generic family Font family Serif Times New Roman Georgia Sans-serif Arial Verdana Monospace Courier New, Lucida Console
On computer screens, sans-serif fonts are considered easier to read than serif fonts
The font family of a text is set with the font-family property. p { font-family: "Times New Roman", Times, serif; }
This website use
Arial sans-serif
on most pages: p { font-family: Arial, Helvetica, sans-serif; }
font-style
: normal - The text is shown normally italic - The text is shown in italics oblique - The text is leaning p.normal { font-style: normal; } p.italic { font-style:
italic;
} p.oblique { font-style: oblique; }

This is a normal text.

This is italic style.

This is a oblique style.

The
font-size
property sets the size of the text.
Absolute size:
Sets the text to a specified size Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
Relative size:
Sets the size relative to surrounding elements Allows a user to change the text size in browsers Default size for normal text, like paragraphs, is 16px (16px=1em). Setting the text size with pixels gives you full control over the text size: p { font-size: 14px; }
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
The em size unit is recommended by the W3C. 1em is equal to the current font size and while default text size in browsers is 16px. default size of 1em is 16px. The size can be calculated from pixels to em using this formula: pixels/16=em p { font-size: 0.875em; /* 14px/16=0.875em */ } The solution that works in all browsers, is to set a default font-size in percent for the element: body { font-size: 100%; } h1 { font-size: 2.5em; }
Font Weight
The font-weight property specifies the weight of a font: p.normal { font-weight: normal; } p.thick { font-weight: bold; }

This is a paragraph.

This is a bold paragraph.

The
font-variant
property specifies whether or not a text should be displayed in a small-caps font. p.small { font-variant:
small-caps
; }

My name is Small Caps.