0
0
CSSmarkup~5 mins

Font style in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Font style changes how text looks by making it normal, italic, or oblique. It helps make writing easier to read or more interesting.

To make quotes or special text stand out by using italic style.
To show emphasis on certain words in a paragraph.
To style text in buttons or links differently for better design.
To create a handwritten or slanted look for artistic effect.
To improve readability by distinguishing different types of text.
Syntax
CSS
selector {
  font-style: normal | italic | oblique;
}

normal means regular text with no slant.

italic is a slanted style that is often used for emphasis.

oblique is a slanted style similar to italic but less supported.

Examples
This makes the paragraph text normal with no slant.
CSS
p {
  font-style: normal;
}
This makes emphasized text italic, slanting it to the right.
CSS
em {
  font-style: italic;
}
This makes the text inside a span with class 'highlight' slightly slanted.
CSS
span.highlight {
  font-style: oblique;
}
Sample Program

This page shows three paragraphs with different font styles: normal, italic, and oblique. You can see how the text slants differently.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Font Style Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
    }
    p.normal {
      font-style: normal;
    }
    p.italic {
      font-style: italic;
    }
    p.oblique {
      font-style: oblique;
    }
  </style>
</head>
<body>
  <p class="normal">This text is normal style.</p>
  <p class="italic">This text is italic style.</p>
  <p class="oblique">This text is oblique style.</p>
</body>
</html>
OutputSuccess
Important Notes

Not all fonts support oblique style well; it may look similar to italic.

Use font-style to improve text meaning and design.

Summary

font-style changes text to normal, italic, or oblique.

Italic and oblique make text slanted for emphasis or style.

Use it to make your text clearer and more attractive.