Advertisement

Advertisement


CSS Font

CSS Font property is used to stylize the text. We can change the size, color, style, etc.. which will make text more attractive and will allow us to change emphasize on them according to their style. Different properties are -

CSS Font Properties

Values Description
Font family It changes the type of the font.
Font color It changes the color of the text.
Font style It is used to make the font bold, italic or oblique.
Font variant It creates a small-caps effect.
Font size It can change the text size of the font.
Font weight This property is used to specify the weight of the font.

CSS Font Family

We all have some pre-installed fonts in our pc. Yes, these fonts like Arial, Times New Roman, etc. are specified in this property. Whatever we decide as a value, if supported by the browser, then the text will be displayed in that font.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Family </title>
<meta charset="UTF-8">
<style>
#font{
font-family: "Times New Roman", Times, serif;
}
#para{
font-family: sans-serif;
}
</style>
</head>
<body>
<h1 id="font">CSS font-family</h1>
<p id="font">This is a paragraph, shown in the Times New Roman font.</p>
<p id="para">This is a paragraph, shown in the Arial font.</p>
</body>
</html>

Output

CSS Font Family

CSS font-family

This is a paragraph, shown in the Times New Roman font.

This is a paragraph, shown in the Arial font.


CSS Font Color

As you can clearly point out that this property is used to change the color of the font. You can provide color names directly as value or can also give color codes like #ffffff, #23ff43, etc.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Color </title>
<meta charset="UTF-8">
<style>
h1 {
color: green;
}
h2 {
color: #9000A1;
}
p {
color:rgb(100, 150, 99);
}
</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 Color

This is heading 1

This is heading 2

This is a paragraph.


CSS Font size

CSS font-size font-size property is used to change the size of the font. The default size is 16px. Font size can be given in pixels, em(1em=16px), or in percentage value. There are also some other predefined values given below :

CSS Font Properties

Font Size Values Description
x-small It displays extra small text.
xx-small It display extremely small text.
small It displays small text.
smaller It displays comparatively smaller text.
medium It displays medium text size.
large It displays large text size.
x-large It displays extra large text size.
xx-large It displays extremely large text size.
larger It displays comparatively larger text size.
Size in pixels or % It sets the value in percentage and pixels.

You can check the example below to see the changes made by all the values.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Size </title>
<meta charset="UTF-8">
</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:smaller;"> This font size is smaller. </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:larger;"> This font size is larger. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </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:200%;"> This font size is set on 200%. </p>
</body>
</html>

Output

CSS Font Size

This font size is extremely small.

This font size is extra small

This font size is smaller.

This font size is small

This font size is medium.

This font size is large.

This font size is larger.

This font size is 20 pixels.

This font size is extra large.

This font size is extremely large.

This font size is set on 200%.


CSS Font Style

It defines the style of the font like italic, oblique, bold, etc.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Style </title>
<meta charset="UTF-8">
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">This paragraph is shown in normal style.</p>
<p class="italic">This paragraph is shown in italic style.</p>
<p class="oblique">This paragraph is shown in oblique style.</p>
</body>
</html>

Output

CSS Font Style

This paragraph is shown in normal style.

This paragraph is shown in italic style.

This paragraph is shown in oblique style.


CSS Font Variant

It specifies the font variant of an element. It may be normal or small-caps.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Variant </title>
<meta charset="UTF-8">
<style>
p { font-variant: small-caps; }
h2 { font-variant: normal; }
</style>
</head>
<body>
<h2>This heading is shown in normal font.</h2>
<p>This paragraph is shown in small font.</p>
</body>
</html>

Output

CSS Font Variant

This heading is shown in normal font.

This paragraph is shown in small font.


CSS Font Weight

CSS font-weight property defines the weight of the font and specify how bold a font is. The values are normal, bold, bolder, lighter or numbers (100, 200,300..... upto 900).


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Font Weight </title>
<meta charset="UTF-8">
<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>

Output

CSS Font Weight

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.