Horje
How to combine Bold and Italic in CSS ?

Bold and italic styles serve distinct purposes in emphasizing text. Bold text appears thicker and darker, drawing immediate attention. The italic text adds a slanted, cursive effect for stylistic emphasis. Combining both styles in CSS involves using font-weight: bold; and font-style: italic; enhancing emphasis with a bold and cursive appearance.

Syntax:

// The shorthand font property in CSS
.class {
      font: bold italic;
}
// Using font-style and font-weight properties
.class {
    font-style: italic;
    font-weight: bold;
}

Below are the approaches to combine Bold and Italic in CSS:

Table of Content

Using the Font Shorthand Property

The font property is a Shorthand Property that enables you to set font-related attributes suchas style and weight in a declaration. The bold italic text class in the <style> tag, applying italic style, bold weight, and optional color.

Example 1: The example shows how to combine bold and italic styles for text using font shorthand property in CSS.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }

        .gfg {
            margin: 20px auto;
            padding: 40px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 20px;
        }

        .bold-italic-text {
            font: bold italic 24px Arial, sans-serif;
            color: #4CAF50;
        }
    </style>
    <title>GeeksforGeeks</title>
</head>

<body>
    <div class="gfg">

        <!-- HTML using the bold-italic-text class -->
        <p class="bold-italic-text">
            A Computer Science portal for geeks.
        </p>
    </div>
</body>

</html>

Output:

How-to-combine-bold-and-italic-in-CSS

Using font-style and font-weight Properties

To combine bold and italic text styles in CSS, the font-style and font-weight properties can be implemented on the element. Create <div> and <p> elements, then use an internal stylesheet to define the .bold-italic-text class with italic and bold styles.

Example: The example used font-style and font-weight Properties to combine Bold and Italic in CSS.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }

        .gfg {
            width: 600px;
            margin: 20px auto;
            padding: 40px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 20px;
        }

        .bold-italic-text {
            font-style: italic;
            font-weight: bold;
            font-size: 16px;
            font-family: Arial, sans-serif;
            color: #4CAF50;
        }
    </style>
    <title>GeeksforGeeks</title>
</head>

<body>
    <div class="gfg">

        <!-- HTML using the bold-italic-text class -->
        <p class="bold-italic-text">
            Welcome To Geeksforgeeks!!
        </p>
    </div>
</body>

</html>

Output:

How-to-combine-bold-and-italic

Combining bold and italic styles in CSS enhances text emphasis by applying both a thicker, darker appearance and a slanted, cursive effect. This can be achieved using either the shorthand font property or the individual font-style and font-weight properties, offering flexibility in styling.


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Grid Container Grid Container
CSS Masking CSS Masking
How to add a Circle around a Number in CSS ? How to add a Circle around a Number in CSS ?
How to make div fixed after scroll to that div ? How to make div fixed after scroll to that div ?
How to prevent a CSS keyframe animation from running on page load ? How to prevent a CSS keyframe animation from running on page load ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje