How To Use CSS to Italicize Text
Cascading style sheets (CSS) save file space and allow you to format Web pages quickly for the Internet. You can style text within a line, heading or paragraph for the purpose you have in mind. CSS uses font-style specifically for text. The italic property is a font-style that helps you slant text on a Web page. You can italicize a single word, phrase, line or paragraph, or you can italicize multiple lines of text at the same time.
Other People Are Reading
Instructions
-
Italicize Multiple Lines of Text
-
1
Go to the HEAD tag of the HTML file you want to format.
-
2
Insert the following CSS code to style the contents of your Web page. The "p.italics" selector is used for paragraphs, while "s.italics" is used for text on the same line. "H1.italics," "h2.italics," "h3.italics," "h4.italics," "h5.italics" and "h6.italics" are used for headings on your Web page (ordered from largest to smallest).
<style type="text/css">
<!--
p.italics { font-style:italic; }
span.italics { font-style:italic; }
h1.italics { font-style:italic; }
h2.italics { font-style:italic; }
h3.italics { font-style:italic; }
h4.italics { font-style:italic; }
h5.italics { font-style:italic; }
h6.italics { font-style:italic; }
-->
</style>
-
-
3
Remove any elements you don't want to style from the CSS code in Step 2, such as:
h6.italics { font-style:italic; }
-
4
Go to the BODY tag and find any HTML tags you want to italicize, such as:
<p>content you want to italicize</p>
-
5
Add 'class="italics"' to the tag as follows:
<p class="italics">content you want to italicize</p>
Italicize Individual Text
-
6
Go to the BODY tag of the HTML file you're formatting.
-
7
Insert the following code to italicize text in a paragraph, but replace "your contents here" with your actual text:
<p style="font-style:italic;">your contents here</p>
-
8
Replace "p" with "span" to italicize text you want to keep on the same line, such as:
<span style="font-style:italic;">your contents here</span>
-
9
Replace "p" with "h1," "h2," "h3," "h4," "h5" or "h6" to italicize text in a heading (ordered from largest to smallest) as follows:
<h1 style="font-style:italic;">your contents here</h1>
<h2 style="font-style:italic;">your contents here</h2>
<h3 style="font-style:italic;">your contents here</h3>
<h4 style="font-style:italic;">your contents here</h4>
<h5 style="font-style:italic;">your contents here</h5>
<h6 style="font-style:italic;">your contents here</h6>
-
1
