How to combine Bold and Italic in CSS ?

How to include Comments in CSS Code ?

Bold and italics are commonly used to emphasize or draw attention to specific words or phrases. Bold text has a darker and thicker appearance, while italic text adds a slanted, cursive effect. Bold text gives a darker appearance to the text while italic text adds a cursive effect.

Additionally, Use readable fonts to ensure your bold and italic text is clear, and maintain sufficient color contrast between text and background for readability.

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
Using font-style and font-weight Properties

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>w3wiki</title>
</head>

<body>
    <div class="gfg">

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

</html>

Output:

Using font-style and font-weight Properties

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

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