Paragraphs
In this lesson, we will study how to set paragraph styles in CSS. Let's begin!
We'll cover the following...
You can style the outlook of paragraphs with the line-height, text-align, and text-indent properties, as shown in the Listing below.
Listing: Styling paragraphs
<!DOCTYPE html>
<html>
<head>
<title>Styling paragraph</title>
<style>
body {
font-family: Verdana, Arial, sans-serif;
margin-left: 48px;
}
.stretched-line {
line-height: 200%;
text-align: right;
}
.condensed-line {
line-height: 90%;
text-align: center;
}
.indented-line {
text-indent: 32px;
text-align: justify;
}
.outdented-line {
text-indent: -32px;
text-align: justify;
}
</style>
</head>
<body>
<p>
Normal line height: Lorem ipsum dolor sit
amet, consectetur adipiscing elit fusce vel
sapien elit in malesuada.
</p><hr />
<p class="stretched-line">
Stretched line height: Lorem ipsum dolor sit
amet, consectetur adipiscing elit fusce vel
sapien elit in malesuada.
</p><hr />
<p class="condensed-line">
Condensed line height: Lorem ipsum dolor sit
amet, consectetur adipiscing elit fusce vel
sapien elit in malesuada.
</p><hr />
<p class="indented-line">
Indented line: Lorem ipsum dolor sit
amet, consectetur adipiscing elit fusce vel
sapien elit in malesuada.
</p><hr />
<p class="outdented-line">
Outdented line: Lorem ipsum dolor sit
amet, consectetur adipiscing elit fusce vel
sapien elit in malesuada.
</p>
</body>
</html>
The image below demonstrates the effect of styles in this listing. ...