Home » CSS

Changing font in CSS

CSS | Border property: Here, we are going to learn about the border property in CSS with examples.
Submitted by Anjali Singh, on October 24, 2019

CSS font properties

Font properties in CSS is used to define the font family, boldness, size, and the style of a text.

Syntax:

    Element { 
        font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family]; 
    } 

font-style property

The font-style property in CSS is used to define the style of font used for the text.

Generally, there are three types:

  1. Italics
  2. Oblique
  3. Normal

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        p.p1 {
            font-style: normal;
        }
        
        p.p2 {
            font-style: italic;
        }
        
        p.p3 {
            font-style: oblique;
        }
    </style>
</head>

<body>
    <p class="p1">Hello! Welcome to Include Help.</p>
    <p class="p2">Hello! Welcome to Include Help.</p>
    <p class="p3">Hello! Welcome to Include Help.</p>
</body>

Output

font property in CSS | Example 1

font-size property

The font-size property is given in %, px, em, or any other valid CSS measurement. Using pixels, you can use the zoom tool to resize the entire page.

Example:

<!DOCTYPE html>

<head>
    <style>
        h3 {
            font-size: 40px;
        }
    </style>
</head>
<html>

<body>
    <h3>Hello! Welcome to include Help.</h3>
</body>

</html>

Output

font property in CSS | Example 2

The text inside <h3> will be 40px in size.

font-family property

This is for defining the family's name.

You can start with the font you want, and end with a generic family if no other fonts are available, the browser picks a similar font in the generic family.

Example:

<!DOCTYPE html>

<head>
    <style>
        p {
            font-weight: bold;
            font-size: 20px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<html>

<body>
    <p>Hello! Welcome to include Help</p>
</body>

</html>

Output

font property in CSS | Example 3

font-variant property

font-variant property in CSS is used to set the variant of the text normal or small-caps.

Example:

<!DOCTYPE html>

<head>
    <style>
        .element-one {
            font-variant: normal;
        }
    </style>
</head>
<html>

<body>
    <p class="element-one">Hello! Welcome to include Help.</p>
</body>

</html>

Output

font property in CSS | Example 4

The Font Shorthand

You can have all your font styles in one element with the font shorthand. Just use the font property, and put your values in the correct order.

Syntax:

    element 
    { 
        font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
    }

Example:

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

However, with the font shorthand it can be condensed as follows,

<!DOCTYPE html>

<head>
    <style>
        p {
            font: bold 20px Arial, sans-serif;
        }
    </style>
</head>
<html>

<body>
    <p>Hello! Welcome to include Help.</p>
</body>

</html>

Output

font property in CSS | Example 5






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.