A Smarter Way To Learn HTML & CSS(2015)

10
Font style

You can specify italics for any text. Here’s a class that applies italics to a paragraph.

p.standout {
font-style: italic;
}

Here’s a class that applies italics to h4 headings of the class “special”.

h4.special {
font-style: italic;
}

Here’s a class that applies italics to any text, whether it’s a paragraph, heading, or some other text element.

.emphasized {
font-style: italic;
}

Remember, class names can be anything you like, within the bounds of the naming rules I covered in Chapter 7.

Instead of defining CSS classes to italicize text, you can use the  tag in your HTML.

In the following paragraph, the words “David Copperfield” are italicized.

Leading style manuals say book titles, like David Copperfield, should be italicized.

An alternative to the  tag is the  tag.

You must be dressed and ready to go.

By default, the  tag has the same visual effect as the  tag. They both italicize text. The main difference is that when a screen reader sees the  tag, it puts extra vocal emphasis on the text enclosed in the tag. It doesn’t do that with  text.

Instead of creating a class for bold text in CSS, you can use the  tag in HTML. In the following paragraph the text “Please note:” is bolded.

Please note: The flight schedule is subject to change without notice.

An alternative to the  tag is the  tag. By default, the  tag has the same visual effect as the tag. They both bold text in most browsers. The main difference is that when a screen reader sees the  tag, the reader may say the text in a lower tone. It doesn’t do that with  text.

In your CSS file, add a class not tied to an element that italicizes text. In your HTML file code a heading of that class. Then write a one-sentence paragraph. In the paragraph, use the two HTML tags that italicize text and the two HTML tags that bold text. Save the files and display your HTML file.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-10-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-10-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/10.html

A Smarter Way To Learn HTML & CSS(2015)

10 Font style

10
Font style