How to combine Bold and Italic in CSS ?

Last Updated : 04 Jan, 2024

In this article, we will learn how to combine bold and italic in CSS. Italic and bold are two text styles that are utilized to emphasize or draw attention to words or phrases. Bold text gives a darker appearance to the text while italic text adds a cursive effect.

Syntax

Below are the 2 possible approaches where the bold and italic text styles can be combined:

// 1st Approach
.class {
      font: bold italic;
}

// 2nd Approach
.class {
    font-style: italic;
    font-weight: bold;
}

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.

Approach

In the CSS code, for the bold italic text class is given within the <style> tag in the <head> section.
This code applies an italic font style, weight and potentially a color to enhance visibility.
In the <body> section you can see examples of using the bold italic text class for paragraphs by enclosing them within <p> tags.

Example 1: In this example, we will see how to combine bold and italic styles for text using font 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 the bold and italic text style in CSS, the font-style and font-weight properties can be implemented to the element.

Approach

Create the HTML element <div> and <p> in the HTML document. Use Internal stylesheet to write CSS code.
The element having class named ".bold-italic-text" defines the CSS properties including italic and bold the text.
It sets the font size to 16px with font family to Arial or sans-serif, and text color to #4CAF50 (a shade of green).

Example 2: The method used to merge italic styles is to apply the style and font weight properties.

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>