How to Make Text Italic

Italicized text is used for many reasons: citing sources, emphasizing a point, or even just to mix up mundane text. You can make text italic on websites, blogs, MySpace profiles, journals, and anywhere else HTML is permitted by users. To learn how to make text italic and change its attributes, read on:

PLEASE NOTE: The codes in this article can all be copy and pasted into websites, MySpace profiles, and anywhere HTML is allowed. However, you MUST remove the asterick (*) at the beginning of the tags in order for them to work.

Difficulty: Easy

Instructions

1. The Italic Tags in HTML
   
   Whenever you want to make text display in italics, you need to use italic tags. These short, simple tags tell your web browser that any text between them should look italic:
   
   
   <*i> This is italic text. <*/i>
   
   
   The first tag, <*i>, is called the opening tag. This is what makes text italic; anything that comes after the opening tag will have the italic style. The second tag, <*/i>, is called the closing tag. This stops making the text italic.
   
   Another way to create italicized text is by using the 'emphasis' attribute. Some prefer 'emphasis' to italic, believing italic is old and outdated; however, both tags produce the same exact results, so it's completely up to you what tags you choose:
   
   
   <*em> This is italic text using emphasis tags. <*/em>
   
   
   Both italic tags and emphasis tags can be equally customized using CSS.

2. Changing Italic Appearance with CSS
   
   You can also make italic text more personalized, by making changes to the italic attributes in your stylesheet. If you use italic tags multiples times on your website or MySpace profile, this is a much easier way to change the font size, color, and face for italic without having to repeat the same code over and over again. It also gives your italic text some more pop.
   
   To start, create a section in your stylesheet to make changes to your bold attribute:
   
   i {
   
   }
   
   Or, if you are using emphasis tags, use this example instead:
   
   em {
   
   }
   
   Italic is represented by 'i,' and emphasis is represented by 'em,' exactly like their tags. Remember to include your opening and closing curly brackets - { } - before and after your code.
   
   You can make just about any changes to your bold attribute as you can for any other text on your MySpace profile or website, including the font size, type, and color:
   
   i {
   color: #hexcode;
   font-size: ##px;
   font-family: font name;
   }
   
   em {
   color: #hexcode;
   font-size: ##px;
   font-family: font name;
   }
   
   To change the color of all of your italic text, use 'color: #hexcode;” and change “hexcode” to the hex color code you want to use. To make italic text smaller or larger, change '##' to a point size: remember, 14px is the default size. If you go lower than 14px, text will be small; go higher, text will be large. To change the font face, replace “font name” with the name of the font of your choice.
   
   If you would rather not make any changes to your italic text, then skip this step. Or, if you don't want to change one attribute, like the font color, delete the entire line of code for that attribute. You can also add additional attributes: lines, borders, and so on.
   
   Below is a sample snippet of code that you can use to change your italic text's style:
   
   i {
   color: #FFF333;
   font-size: 18px;
   font-family: Georgia;
   border: 1px solid;
   }
   
   The code above will make your italic text yellow, sized 18, with a Georgia typeface, and a thin, solid yellow border around the text.
   
   Note: When changing attributes for italic text in, you must use HTML italic or emphasis tags ( <*i> <*/i> OR <*em> <*/em> ) for the changes to be applied. The changes will not be applied to any italic text created using CSS (explained below).

3. You can make your MySpace or website text italic using CSS as well:
   
   
   <*font style="font-style: italic">This is italic text.<*/font>
   
   
   Just like HTML, CSS has opening and closing tags. However, with CSS, the code that changes the attributes of the text must be included in those tags, called style tags, where with HTML, italic is understood just by using italic tags and changes to the attributes must be made separately in a stylesheet.
   
   CSS also offers the style “oblique.” This is technically not the same as italic, as italic is, in actuality, a style of writing, where oblique is simply the slanting of text. But when used in web design, the differences between italic and oblique are very subtle, with oblique making text slightly more slanted than italic, similar to the way “bolder” is slightly more darker and prominent than “bold.”
   
   
   <*font style="font-weight: oblique;">This is oblique text.<*/font>
   
   
   As with italic, you can change and customize the attributes for oblique by defining the style with CSS.

4. Customizing Italic & Oblique Attributes
   
   Like changing the attributes of italic in HTML in your stylesheet, you can change the style of italic and oblique in CSS, though the method is different. To customize italic and oblique text, you must define attributes within the same style tags you use to create italic text:
   
   
   <*font style="font-style: italic; color: #hexcode; font-family: font name; font-size: ##px;">This is italic text.<*/font>
   
   The attributes are exactly the same as the ones used in your stylesheet in the above HTML example, and you can make all of the same changes. The only difference is that they are contained within the style tags.
   
   
   <*font style="font-style: italic; color: #C3C3C3; font-family: Arial; font-size: 18px; border-bottom: 2px dotted;">This is italic text.<*/font>
   
   The code above will create italicized text that is gray, with the Arial font, sized 18 points, and with a 2-point-sized dotted border on the bottom of the text.
   
   Of course, you can make the same changes to oblique text by swapping “font-style: italic;” with “font-style: oblique;” to make text italic.