8/4/21

CSS Tutorials :- CSS Fonts Property

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{
        colorred;
    }
    h2{
      color:  rgb(12398235);
    }
    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-familysans-serif;
    }

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

    h3 {
        font-familyImpact;
    }
</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-styleitalic;
    }
    #para2{
        font-stylenormal;
    }
    #para3{
        font-styleoblique;
    }
</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

"+y+""}else{if(A==5){c+='
  • '+w+""+y+"
  • "}else{if(A==6){c+='
  • "+w+'
    '+u+""+y+"
  • "}else{c+='
  • "+w+"
  • "}}}}}s.innerHTML=c+=""+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); //]]>

    0 comments:

    Post a Comment

    Follow on Twitter

    Linkedin

    Categories

    Mad About Computer. Powered by Blogger.
    This site is in no way affiliated with or endorsed by specified business. It exists as a compendium of supporting information intended for informational purposes only. If you want to buy this website, please don't hesitate to contact us via e-mail: "d e n a c c 9 7 7 (at) g m a i l (dot) c o m" (delete spaces) or you can find and buy it on Afternic domain auctions.