Font Styles allow you to provide further customization to your web text. You may have already referenced Udacity’s article on the use of Font Families. Font styles give one more layer of CSS knowledge to enhance your viewer’s user experience.
For this tutorial, you will learn how to easily apply the Font Styles. This tutorial will take advantage of CSS (Cascading Style Sheets) functions while creating the effect within the HTML (Hypertext Markup Language) page. All you need to start with is a simple code editor such as Notepad ++.
What are the Available Font Styles?
There are basically three Font Styles:
- Normal: The browser displays a normal font style. This is the default style.
- Italic: The browser displays an italic font style.
- Oblique: The browser displays an oblique font style.
Seeing the Font Styles in Use
Prepare your HTML page and add in the three Font Styles.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
font-size: 20pt;
}
p.italic {
font-style: italic;
font-size: 20pt;
}
p.oblique {
font-style: oblique;
font-size: 20pt;
}
</style>
</head><body><h1>The font-style Property</h1><p class="normal">This is a paragraph, normal.</p><p class="italic">This is a paragraph, italic.</p><p class="oblique">This is a paragraph, oblique.</p></body></html>The outcome in a browser appears as follows:
Note that at times the difference between italic and oblique can be hard to spot depending on the font in use.
Font Style Applications
Normal Font Style
As noted above, the “Normal” font style is used to set the font with its default style.
In the CSS environment you would display the “Normal” font style using the following:
p.normal {
font-style: normal;
}You would of course add to this CSS with font-color, font-size, etc.
For the HTML environment, you can alternatively use in inline style as follows:
<p style="font-style: normal;">this is the normal style</p>
This does the same as the CSS above but only for this specific area. If you are going to define larger areas of text, you should use the CSS ability.
Italic Font Style
What is italic? Generally, an italic font is a special version of the font.
In the CSS environment you would display the “Italic” font style using the following:
p.italic {
font-style: italic;
}You would of course add to this CSS with font-color, font-size, etc.
For the HTML environment, you can alternatively use in inline style as follows:
<p style="font-style: italic;">this is the italic style</p>Oblique Font Style
What is oblique? An oblique version of the font is just the regular version inclined a bit. It is not a “special version” as it is when you italicize a font.
In the CSS environment you would display the “Oblique” font style using the following:
p.oblique {
font-style: oblique;
}You would of course add to this CSS with font-color, font-size, etc.
For the HTML environment, you can alternatively use in inline style as follows:
<p style="font-style: oblique;">this is the oblique style</p>Final Note
Hopefully with this knowledge of the CSS Font Styles, you will be able to apply these styles effectively and correctly for their respective settings. Being able to understand the correct application comes from knowing why the application exists in the first place. Use these CSS Font Styles to enhance your web text and give your viewer an enhanced experience. This works in all modern browsers as well as the IOS and Android systems.
Where to Next?
This “The World of CSS Font Styles “tutorial should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
