How to Use Italics in CSS
When creating a website and filling it with content, there are a number of different ways to customize your copy and make it stand out. One way to emphasize the text on your site is to use font styles. These can be applied to your page's information with cascading styles sheets (CSS). The elements on your page are identified by a name that you choose, then those elements are customized with CSS properties defined in a separate .css page or in the <head> section of your page.
Instructions
-
-
1
Open the page containing the text that you want to italicize in your regular Web editor. If you are using an editing program that allows you to toggle between "Design" and "Code" view, select the "Code" option.
-
2
Browse to the location of the text that you want to italicize.
-
-
3
Add a class identifier to the element containing the text that you want to italicize. For example, if your text is inside a "<div>" tag, you would modify it to say
<div class="xxxxxx">text to italicize</div>
where "xxxxxx" would be replaced with the name you want to give to the element.
-
4
Browse to the "<head>" section of your page, or open your .css document if you are using one.
-
5
Add the text for your class to the "<head>" section or to the .css document. If you are adding your first CSS class to the page, you will also need to include "<style type="text/css"></style>" to the "<head>" section. So, if this is your first CSS class on a page, you would type
<style type="text/css">
.xxxxxx {
font-style: italic;
}
</style>
If you already have CSS on your page, or if you are adding the class to a .css document, you would type
.xxxxxx {
font-style: italic;
}
-
1
Tips & Warnings
You can also use the HTML "<i>" and "</i>" tags before and after text that you want to italicize.