How to Align Paragraphs to the Right in CSS
Align paragraphs on Web pages using the "text-align" property in CSS (Cascading Style Sheets). The text alignment settings available in CSS include left, right and justified. By default, all paragraphs are left-aligned unless specified otherwise. Use class names in your HTML tags so you can create one style rule and reuse it on as many paragraphs as needed. You can also write style rules that give right alignment to paragraphs using ID names, but you should not reuse ID names on multiple tags in your Web pages.
Other People Are Reading
Instructions
-
-
1
Open the Web page in Notepad and locate the paragraphs you want to align to the right. Add a class name such as "right" to each paragraph:
<p class="red right">Right-aligned paragraph...</p>
<p class="right"> Right-aligned paragraph...</p>
Note that the first paragraph in the above code example has two class names. You can add multiple class names to any HTML tag, provided that you put a space between each one.
-
2
Go to the "<head>" tags in the Web page code and add "<style>" tags if you see none there:
<style type="text/css">
</style>
-
-
3
Write a style rule that selects the class you created. Set the "text-align" property to "right" to right-align the paragraphs:
.right {
text-align: right;
}
Note the dot before the "right" class name. This dot denotes a class name in CSS. You can also use the hash symbol to select an ID name.
-
1
Tips & Warnings
Once you create the class for your paragraphs and style it with right-aligned text, you can apply that class name to other HTML tags besides the "<p>" tag.
