A Smarter Way To Learn HTML & CSS(2015)

15
First-line indent
and blockquote

By default, browsers don’t indent the first line of a paragraph. The following paragraph shows how the browser displays a paragraph if you don’t tell it to display it differently.

Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus. They have a round head, narrow snout, large eyes, and a variety of distinctive coloration patterns that are species-dependent.

But you can specify a first-line indent.

p {
text-indent: 1em;
}

So now a paragraph would have a first-line indent, like this.

Slow lorises are a group of several species of strepsirrhine primates which make up the genus Nycticebus. They have a round head, narrow snout, large eyes, and a variety of distinctive coloration patterns that are species-dependent.

Note that any positive em value gives you an indent. The larger the value, the deeper the indent.

To explicitly specify the default, no first-line indent, you could write…

p {
text-indent: 0;
}

You use blockquote to visually set off a quotation that’s more than a few words long. By default, any paragraph placed inside blockquote tags is indented, like this.

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.

This is the HTML.

<blockquote><p>We hold these truths to be self-evident, that all men are created equal, that they are endowed bytheir Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.</p><blockquote>

You can enclose more than one paragraph in blockquote tags. You can enclose headings, too. And if you don’t like the default blockquote styling, you can change it in your CSS. For example, this code increases the size of the text and displays the text in gray.

blockquote {
font-size: 1.4em;
color: darkslategray;
}

You can even increase or eliminate the amount of blockquote indent. That’s in the next chapter.

In your CSS file code a class of paragraphs that indents the first line. Then code a blockquote that decreases the text size and colors the text gray. In your HTML file code a paragraph that indents the first line. Then code a paragraph inside blockquote tags.

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

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

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