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>