CSS Tutorials :- CSS Fonts Property ~ MAD ABOUT COMPUTER

Hey Friends, Today we are going to discuss CSS fonts. But before starting the article, I have to clear a thing that, font is part of both Html and CSS. In Html, we just placed our font and after it, we apply the property of the font using CSS. In a website, font played a very important role to look your website more beautiful and stylish. So let’s started our today’s topic CSS Fonts.

CSS Fonts

CSS Fonts property is used to control the texture of your website. By using this property you can change anything of your font just like text, font-family, bold, italic, color, and many more thing. We can see these properties one by one in the below examples. But before it lets me cover some important font attributes. These are listed below:-

CSS Font Color
CSS Font Family
CSS Font Weight
CSS Font Style
CSS Font Size

CSS Font Color

This Font CSS Property is used to change the color of the text of your web pages. You can change the text color in three different ways. These different ways are:-

By Color Name
By Hexadecimal Value
By RGB Value

In the above example, we define all 3 ways to change text color.

Example:-

<html>
<head>

</head>
<style>
    h1{
        color: red;
    }
    h2{
      color:  rgb(123, 98, 235);
    }
    h3{
        color: #33FFDA;
    }

</style>
<body>
    <h1> This is Heading Number 1. </h1>

    <h2> This is Heading Number 2.</h2>

    <h3> This is Heading Number 3. </h3>
</body>
</html>

Output:-

CSS Font Family

This font CSS property is used to change the font of your web pages. You can provide any type of value to it. Just like: - Arial, Times New Roman, Monospace, Arial Bold, etc.

Example:-

<html>
<head> 
</head>
<style>
    h1 {
        font-family: sans-serif;
    }

    h2 {
        font-family: Arial Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }

    h3 {
        font-family: Impact;
    }
</style>

<body>
    <h1> This is Heading Number 1. </h1>

    <h2> This is Heading Number 2.</h2>

    <h3> This is Heading Number 3. </h3>
</body>

</html>

Output:-

CSS Font Weight

This Font Property is defined. how bold your text is. There are some different values by applying it you can change the font-weight accordingly to you. You can also use some predefined values such as Bold, Normal, Bolder, Light, etc.

Example:-

<html>
<head>
<title> This is title. </title>
</head>

<body>
  <p style="font-weight: lighter;"> This is 1st Paragraph. </p>
  <p style="font-weight: bolder;"> This is 2nd Paragraph. </p>
  <p style="font-weight: 800;"> This is 3rd paragraph. </p>
</body>
</html> 

Output:-

CSS Font Style

This property defines that how your text will appear on your webpage. It may be normal, bold, italic, oblique, etc.

Example:-

<html>
<head>
<title> This is title. </title>
</head>
<style>
    #para1{
        font-style: italic;
    }
    #para2{
        font-style: normal;
    }
    #para3{
        font-style: oblique;
    }
</style>
<body>
  <p id = "para1"> This is 1st Paragraph. </p>
  <p id = "para2"> This is 2nd Paragraph. </p>
  <p id = "para3"> This is 3rd paragraph. </p>
</body>
</html>

Output:-

CSS Font Size

It define the size of the font appear on your webpages. It should be small, normal, medium, large.

Example:-

<html>
<head>
<title> This is title. </title>
</head>

<body>
    <p style="font-size:small;">  This font size is small</p> 
    <p style="font-size:large;">  This font size is large. </p> 
    <p style="font-size:200%;">  This font size is set on 200%. </p>  
</body>
</html>

Output :-

People Also Read :- CSS Padding Property

People Also Read :- CSS Margin Property

MAD ABOUT COMPUTER

8/4/21

CSS Tutorials :- CSS Fonts Property

0 comments:

Post a Comment

Popular Posts in this week

Follow on Twitter

Linkedin

Categories

Blog Archive