CSS Fonts

Fonts in CSS

CSS Fonts property is used to control the look of texts. By the use of CSS font property you can change the text size, color, style and more. You have already studied how to make text bold or underlined. Here, you will also know how to resize your font using percentage.

These are some important font attributes:

i CSS Font color.
ii. CSS Font family.
iii. CSS Font size.
iv. CSS Font style.
v. CSS Font variant.
vi. CSS Font weight.


Font Color:

CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It is used to change the color of the text.

There are three different formats to define a color:

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>

Font Family:

The font-family property specifies the font for an element.

There are two types of font family names:

Generic family: a group of font families with a similar look (like Serif or Monospace).

Font family: a specific font family (like Times New Roman or Arial).


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>

Font Size:

The font-size property sets the size of a font. One way to set the size of fonts on the web is to use keywords.

These are the possible values that can be used to set the font size

1. xx-small
2. x-small
3. small
4. medium
5. large
6. x-large
7. xx-large
8. smaller
9. larger
10. size in pixels or %


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>

Font Style:

The font-style property is typically used to specify italic text. The font-style property has three values: normal, italic, and oblique.

Oblique is very similar to italic, but less supported.

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>

Font Variant:

The CSS font-variant property allows you to convert your font to all small caps. The values can be set as normal, small-caps, and inherit.

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>

Font Weight:

The font-weight controls the boldness or thickness of the text. The values can be set as normal (default size), bold, bolder, and lighter.

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>

Recommended Posts:

Spread the love

Leave a Comment

Your email address will not be published. Required fields are marked *