font-style:
font-style property specifies the font style for a text.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>
</html>
Outputs:
Property values:
Value Description
normal The browser displays a normal font style (default).
italic The browser displays an italic font style.
oblique The browser displays an oblique font style.
font-variant:
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
font-variant property specifies whether or not a text should be displayed in a small-caps font.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class="normal">My name is Hege Refsnes.</p>
<p class="small">My name is Hege Refsnes.</p>
</body>
</html>
Outputs:
Property values:
Value Description
normal The browser displays a normal font (default).
small-caps The browser displays a small-caps font.
font-weight:
font-weight property sets how thick or thin characters in text should be displayed.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
Outputs:
Property values:
Value Description
normal Defines normal characters (default).
bold Defines thick characters.
bolder Defines thicker characters.
lighter Defines lighter characters.
100 Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold.
200
300
400
500
600
700
800
900
font-size:
font-size property sets the size of a font.
Eg:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
Outputs:
Property values:
Value Description
xx-small Sets the font-size to an xx-small size
x-small Sets the font-size to an extra small size
small Sets the font-size to a small size
medium Sets the font-size to a medium size (default).
large Sets the font-size to a large size
x-large Sets the font-size to an extra large size
xx-large Sets the font-size to an xx-large size
smaller Sets the font-size to a smaller size than the parent element
larger Sets the font-size to a larger size than the parent element
length Sets the font-size to a fixed size in px, cm, etc.
% Sets the font-size to a percent of the parent element's font size
font-family:
font-family property specifies the font for an element.
font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
There are two types of font family names:
1. family-name - the name of a font-family, like "times", "courier", "arial", etc.
2. generic-family - the name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: Separate each value with a comma.
Note2: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.
Eg:
<!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>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Outputs:
Property values:
Value Description
family-name prioritized list of font family names and/or generic family names
generic-family
For further information, see here.
