Formatting fonts in CSS

Here we will get to know more about formatting the fonts of your content using CSS. It provides several styling features to make the font look bold, adjusting size, width, height and more. Let us discuss some of its properties.

FONT FAMILY:

This property is used to specify the style of font that is to give to the text. Font family includes some styles that are: serif, sans-serif, cursive and so on. The most common and suitable ones used in the webpages are serif and sans-serif.

The code will be looking like:

<head>
<style>
    body {
        font-family: Arial, cursive, sans-serif;
    }
</style>
</head>
<body>
    <h3>Codespeedy</h3>
    <p>coding is fun</p>
</body>

FONT SIZE:

This property is used to specify the size of the content on a webpage. The values can be of keywords, percentage, pixels, ems, etc. A pixel is an absolute unit of measurement that provides the length to texts.

For example:

<head>
<title></title>
<style>  
    h1 {
        font-size: 54px;
    }
    p {
        font-size: 34px;
    }
</style>
</head>
<body>
    <h1>Codespeedy</h1>
    <p>Coding is fun</p>
</body>

FONT STYLE:

This property is used to provide the font face style to the content. Their values can be of normal, italic and oblique. The default value of the font is always normal.

The code can be written as:

<head>
<title></title>
<style>
    p.normal {
        font-style: normal;
    }
    p.italic {
        font-style: italic;
    }
    p.oblique {
        font-style: oblique;
    }
</style>
</head>
<body>
    <p class="normal">Coding is fun</p>
    <p class="italic">Coding is fun.</p>
    <p class="oblique">Coding is fun</p>
</body>

FONT VARIANT

This property provides the look of the content text as a special small-caps variation.

For Example:

<head>
<title></title>
<style>
    p {
        font-variant: small-caps;
    }
</style>
</head>
<body>
    <h2>Coding is fun</h2>
    <p>Coding is fun</p>
</body>

The above description provides the basic concept of formatting the content text in CSS, which gives a presentable look to the web pages.

Also read: 3D Photo/Image Gallery (on space) Using HTML5 CSS JS

Leave a Reply

Your email address will not be published.