Inheritance and CSS selectors

If you want to turn the text italic inside a container you can also use the font-style property on the parent element; the style will then be applied on all the child-elements due to CSS inheritance.

#my_container {
  font-style:italic;
}

And the HTML:

<div id="my_container">
  <p>All text in this container will be written with italic unless overwritten by higher-priority declarations.</p>
</div>

Result:

Of course, this also works with class- and element selectors:

.my_class_name {
  font-style:italic;
}
b {
  font-style:italic;
}

Embedded CSS

When embedding the CSS in the HTML, you can use the style element:

<style>
  .italic {
    font-style:italic;
  }
</style>
<div class="italic">
  <p>This text is using font-style:italic; in the CSS.</p>
</div>

It is important to place the style code before the elements that you want to style in order to prevent re-painting of the page.

The .italic class we created in the above examples can be applied to any element that you want to apply italics to.

How to change the font-style of text

How you should change the font-style of text is generally going to depend on the circumstances. Ideally you should place all of your CSS in your external stylesheet, and that also includes small modifications such as adding italics. If you avoid mixing HTML with CSS, your code will usually be easier to maintain in the longer term; but this is not always possible or practical.

There are a few ways you can go about changing the. Do it inline, directly on the HTML elements using the style attribute — this is not recommended, but sometimes fine when you know what you are doing.

<p>This is some text and <span style="font-style:italic;">this is written with an italic font</span>. We can control italics with CSS font-style.</p>

The second way to change styling directly from the HTML code is by embedding the CSS in the HTML using the <style> element — although not recommended for most things, it may work for small boxes or modules that are inserted on a page.

<style>
  .italic {
    font-style:italic;
  }
</style>
<p>This is some text and <span class="italic">this is written with an italic font</span>. We can control italics with CSS font-style.</p>

Nowadays it is quite common to embed CSS directly in the HTML for certain things. If you are developing a plugin for a CMS system or similar, then it is generally going to be better to place the code in external CSS files — these files may then be managed by the CMS automatically.

Using external CSS files will often help you to easier maintain your code. When linking to external CSS files, you will be using the <link> element, and this can either be located in the head or the body — it may not validate in the body, but it is supported, and some websites use it to delay loading of parts of the CSS. Most of you should probably stick to using the head, as the alternative is complex and difficult to get right:

<link rel="stylesheet" href="my-stylesheet.css">

Loading italic fonts

If you are using custom fonts on your website, then you need to make sure to include the italic version of the font you are using for the fonts to display accurately; browsers can compensate somewhat for missing italic fonts, but the result may very in quality.

When linking to custom fonts, we use the font-face rule to link the relevant fonts.

Each individual font is linked using its own font-face rule via the src property. Within the src, you may also include alternative formats — if a browser does not understand one format, it should automatically try another — it is common to have both woff and woff2 versions of the same font.

So, if we download and use Open Sans as an example, the CSS that includes our font should look like:

/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
         url('/fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/open-sans-v15-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}
  /* open-sans-italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: local('Open Sans Italic'), local('OpenSans-Italic'),
         url('/fonts/open-sans-v15-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/open-sans-v15-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}
  /* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
         url('/fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/open-sans-v15-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}
  /* open-sans-700italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
         url('/fonts/open-sans-v15-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/fonts/open-sans-v15-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}

Please note that the fonts themselves should be uploaded to the /fonts/ directory on your website for this to work.

Tell us what you think: