Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So in our last lesson we talked about paragraphs and how they work and how they wrap. Now let's take a look at how to change the alignment of a paragraph. Here we have a document, a fully formed XHTML document with all the front matter at the top and in the content of the document we have one paragraph element and it's there to there. We have the paragraph tag and the close tag and some text in between and down here at the bottom we have this document opened in a browser with the paragraph displaying there on the screen.
Let me just drag this back a little bit so the paragraph wraps nicely. You will notice that the paragraph is justified on the left, it's aligned flush on the left and it's ragging on the right and this is the default alignment for a paragraph in XHTML and HTML. So let's take a look at how to change that, I'm going to add an attribute to the paragraph here, say align="right". So this is what an attribute looks like in XHTML. You have the attribute name, and an equal sign and the argument of the attribute is in quotes.
I tend to use double quotes. Single quotes also work just fine. So this is how it's formed, you have the left angle bracket and then the name of the tag, which is a p tag in this case for paragraph, and then you have some space. It can be any amount of white space. You can have new lines here. You can have any amount of legal white space and then the name of the attribute. In this case is align which tells the paragraph how to do its alignment and an equal sign and the argument in quotes and in this case, the argument is the word "right" and a close angle bracket and then you have the close tag down here with the content in the middle.
So I'm going to go ahead and save this. What we expect to have happen when we reload in the browser is that the right side will be flush, the left side will be ragged. So I'll go ahead and hit Reload and there we have it. The right side of the paragraph is now flush and the left side is ragged, and so that's the right alignment. There are two other alignments available, one is called justify and what this does is this makes both sides of the paragraph flush and then we have the left side as flush and the right side as flush.
And the other alignment is center, which makes it ragged on both sides, all of the content centered in between and there we have center. The default option of course is left and so we saw that without any argument in the alignment. You can also do it this way if you want to explicitly assign it. You can say align= "left" and reload in the browser. We have that flush on the left and ragged on the right as we did with the default arrangement. And so that is the alignment attribute to the paragraph tag and its various options.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101747 Viewers
61 Video lessons · 88508 Viewers
71 Video lessons · 72321 Viewers
56 Video lessons · 104034 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.