5

How to combine Bold and Italic in CSS ?

 1 year ago
source link: https://www.geeksforgeeks.org/how-to-combine-bold-and-italic-in-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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;
}

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.

<!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.

<!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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Commit to GfG's Three-90 Challenge! Purchase a course, complete 90% in 90 days, and save 90% cost click here to explore.

Last Updated : 04 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK