Fonts are actually different type faces of the text. They include the font-size, font-family, font-variant, font-weight, font-style and color of the fonts.
The font-size property defines the size of the font. The size may be defined in px, em units. Size of the fonts can also be defined by the percentage(%) value.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
<!DOCTYPE html> <html> <head> <style> h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 25px; } </style> </head> <body> <h1>This Heading No 1</h1> <h2>This Heading No 2</h2> <p>This is Paragraph.</p> <p>This is another paragraph.</p> </body> </html>
Font style are used for set font style. Font style property has three values they are;
normal − The text is shown normally
italic − The text is shown in italics
oblique − The text is "leaning" (oblique is very similar to italic, but less supported)
<html> <head> <style> h1 { font-style: normal; } h2 { font-style: italic; } p { font-style: oblique; } </style> </head> <h1>This Heading No 1</h1> <h2>This Heading No 2</h2> <p>This is Paragraph</p> </body> </html>
The font family of a text is set with the font-family property.
It represents a list of family names separated by comma. This list also contains generic family at the end.
<!DOCTYPE html> <html> <head> <style> p.serif { font-family: "Times New Roman", Times, serif; } p.sansserif { font-family: Arial, Helvetica, sans-serif; } </style> </head> <body> <h1>This css font-family</h1> <p class="serif">This is New Roman font..</p> <p class="sansserif">This is Arial font.</p> </body> </html>