How to use font-style and font-weight Properties In CSS
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.
<!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>w3wiki</title>
</head>
<body>
<div class="gfg">
<!-- HTML using the bold-italic-text class -->
<p class="bold-italic-text">
Welcome To w3wiki!!
</p>
</div>
</body>
</html>
Output:
How to combine Bold and Italic in CSS ?
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 shorthandfont
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