Grow your CSS skills. Land your dream job.

font-style

Last updated on:

The font-style property allows you to make text appear italicized (i.e. sloped, or slanted).

em {
    font-style: italic;
}

This property accepts one of three possible values: normal, italic, and oblique.

If a given font family has an italic or oblique face embedded, the browser will select that face. If no italic or oblique face is available, the browser will mimic the sloping effect. If italic is defined and there is no italic face available, the browser will look for an oblique face before it tries to mimic the italic. The same applies to oblique; it too will look first for an italic face.

To prevent the browser from adding a mimicked, or synthesized, version of the italic or oblique face, you may use the font-synthesis property (if supported).

Italic vs. Oblique

According to the spec, "Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face." However, if the font being used does not have italic or oblique faces available, in most cases there is little, if any, difference between italic and oblique.

The demo below demonstrates both italic and oblique:

Check out this Pen!

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

Comments

  1. Chase Dickinson
    Permalink to comment#

    Hey my italic isn’t working for external css,
    stylesheet

    body{
    background-color: #FF0099;
    
    p.normal {
        font-style: normal;
    
    }
    
    p.italic {
        font-style: italic;
    }
    
    p.oblique {
        font-style: oblique;
    }
    

    My website

    3 movies
    Tommy Boy with Chris Farley, Anchorman: the Legend of Ron Burgundy, with Will Ferral, and Dumb and Dumber, with Jim Carrey
    
    
    
    
     Tommy Boy is about, his dad's (Who died) business Callahan Auto parts is going out of busniess and Tommy is trying to save the business and sells Zalinski buys 500,000 break-pads to keep in business. Directored by Peter Segal. I would give this movie a 10 out of 10. Due to Chrisa Farley and his comedy in this movie is genuis.
    
     Anchorman is about Rob and his News Team. There is a girl journalist and she is trying to take Rob's job and Rob ends up getting fired. She becomes Anchor. In the end They co-anchor each other in the News for the World. Directored by Adam McKay. I would rate this movie a 9 out of 10 due to Will fereel going over the top. It ain't a 10 because Steve Caroll gets a gernade. That is dangerous.
    
     Dumb and Dumber is about Lloyd is trying to find the girl of his dreams because she left a brief case behind. Directored by Peter Farrelly and Bobby Farrelly. I would rate my movie a 9 out of 10 due to Jim Carrey and Jeff Daniels going out and trying to be kids again. It isn't a 10 due to the fact that it is really dumb. 
    
    
    
    
    

    what should i do?
    my email
    mace4chase@gmail.com

    • Kieran
      Permalink to comment#

      Your body tag is missing it’s closing brackets. Try

      body{
          background-color: #FF0099;
      }
      
      p.normal {
          font-style: normal;
      }
      
      p.italic {
          font-style: italic;
      }
      
      p.oblique {
          font-style: oblique;
      }
      

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".