CSS Font

CSS provides various properties for styling the font of the text, including changing their face, controlling their size and boldness, managing variant, and so on.

The font properties are:

CSS Font color
CSS Font family
CSS Font size
CSS Font style
CSS Font variant
CSS Font weight

CSS Font Color:

CSS Font Color is used to change the color of the text.

Three different formats to define a color:

By a color name
By hexadecimal value
By RGB

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
  font-size: 100%; 
} 
h1 { color: red; } 
h2 { color: #9000A1; }  
p { color:rgb(0, 220, 98); }  
} 
</style> 
</head> 
<body> 
<h1>This is heading 1</h1> 
<h2>This is heading 2</h2> 
<p>This is a paragraph.</p> 
</body> 
</html>

OUTPUT:

CSS Font

CSS Font Family:

CSS font-family can be divided into two types:

Generic family: It includes Serif, Sans-serif, and Monospace.
Font family: It provides the font family name like Arial, New Times Roman, etc.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
font-size: 100%; 
} 
h1 { font-family: sans-serif; } 
h2 { font-family: serif; }  
p { font-family: monospace; }  
} 
</style> 
</head> 
<body> 
<h1>This heading is shown in sans-serif.</h1> 
<h2>This heading is shown in serif.</h2> 
<p>This paragraph is written in monospace.</p> 
</body> 
</html>

OUTPUT:

CSS Font Size:

CSS Font Size is used to change the size of the font.

These are the possible values:

xx-small – Extremely small text size.

x-small – Extra small text size.

small – Small text size

medium – Medium text size.

large – Large text size.

x-large – Extra large text size.

xx-large – Extremely large text size.

smaller – Comparatively smaller text size.

larger – Comparatively larger text size.

size in pixels or % – Value in percentage or in pixels.

Example:

<html> 
<head> 
<title>Practice CSS font-size property</title> 
</head> 
<body> 
<p style="font-size:xx-small;"> 
This font size is extremely small.</p> 
<p style="font-size:x-small;"> 
This font size is extra small</p> 
<p style="font-size:small;"> 
This font size is small</p> 
<p style="font-size:medium;"> 
This font size is medium. </p> 
<p style="font-size:large;"> 
This font size is large. </p> 
<p style="font-size:x-large;"> 
This font size is extra large. </p> 
<p style="font-size:xx-large;"> 
This font size is extremely large. </p> 
<p style="font-size:smaller;"> 
This font size is smaller. </p> 
<p style="font-size:larger;"> 
This font size is larger. </p> 
<p style="font-size:200%;"> 
This font size is set on 200%. </p> 
<p style="font-size:20px;"> 
This font size is 20 pixels. 
</p> 
</body> 
</html>

OUTPUT:

CSS Font Style:

CSS Font style property provides what type of font you want to display. It may be italic, oblique, or normal.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
font-size: 100%; 
} 
h2 { font-style: italic; } 
h3 { font-style: oblique; } 
h4 { font-style: normal; }  
} 
</style> 
</head> 
<body> 
<h2>This heading is shown in italic font.</h2> 
<h3>This heading is shown in oblique font.</h3> 
<h4>This heading is shown in normal font.</h4> 
</body> 
</html>

OUTPUT:

CSS Font Variant:

CSS font-variant property specifies how to set the font-variant of an element. It may be normal and small-caps.

Example:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p { font-variant: small-caps; } 
h3 { font-variant: normal; } 
</style> 
</head> 
<body> 
<h3>This heading is shown in normal font.</h3> 
<p>This paragraph is shown in small font.</p> 
</body> 
</html>

OUTPUT:

CSS Font Weight:

CSS font-weight property defines the weight of the font and specifies how bold the font is. The possible ways of font-weight may be normal, bold, bolder, lighter, or number (100, 200….. up to 900).

Example:

<!DOCTYPE html> 
<html> 
<body> 
<p style="font-weight:bold;">This font is bold.</p> 
<p style="font-weight:bolder;">This font is bolder.</p> 
<p style="font-weight:lighter;">This font is lighter.</p> 
<p style="font-weight:100;">This font is 100 weight.</p> 
<p style="font-weight:200;">This font is 200 weight.</p> 
<p style="font-weight:300;">This font is 300 weight.</p> 
<p style="font-weight:400;">This font is 400 weight.</p> 
<p style="font-weight:500;">This font is 500 weight.</p> 
<p style="font-weight:600;">This font is 600 weight.</p> 
<p style="font-weight:700;">This font is 700 weight.</p> 
<p style="font-weight:800;">This font is 800 weight.</p> 
<p style="font-weight:900;">This font is 900 weight.</p> 
</body> 
</html>

OUTPUT: