Subtitles of the Movie

In this movie we take a look at how to control our Paragraph-level Formatting. Now this will include both our ability to align paragraph and block level elements as well as indent text. Now both of these things should be somewhat familiar to you through the use of word processing programs and essentially we have kind of the same control that we have from our word processing programs in CSS. With alignment we will use the text-align property with one of the values of left, right, center, or justify. Now these are going to behave very similar to alignment options in word processing programs with left-align having the left edge of the text straight in a line with the left edge of whatever that parent element is. The right-align will make it so that the right edge of the text is flush with the right edge of whatever the parent element is. Now, whenever you have left- or right-align the opposite edge of the text will appear jagged. So, with left-align the right edge of the text for that paragraph is going to appear kind of jagged. Now, that edge that's all jagged is actually referred to as the rag whenever we're looking at our typography. With the right-align the rag will appear on the left-hand side. With center we're taking the text and we're aligning it to the center of the parent element and that's going to make it so that the rag appears on both sides, so it's going to be jagged all the way through. And lastly we have justify, and justify is going to attempt to make the left- and right-hand edges of the text flush with the left- and right-hand sides of the containing element. However, when we use justify on our screen it may or may not do a very good job. It all depends on how much text is available and how much spacing the browser is going to have to do to make it justified. So, if you do set justify know that it may not actually do what you're wanting it to do. Now, with indenting we have the ability to use the text-indent property and the text-indent controls the spacing that's added to the first line of text, and we can control that with any value that we want. So, let's go ahead here and jump into our project and see this at work. So, I'll jump over to my main.css and the first thing I want to do is I want to affect my SiteMission. So my SiteMission I want to text-align that to the right. So I'll go ahead and save that and whenever I look at it in my browser I'll see this become right-aligned. Notice how the right edge of the text is now flush with the right edge of the parent element, and that's really the effect that I want. Now I also want to do some indenting here with our Tutorials, so I'll jump down here to the Tutorial section and I'm going to add in a rule here to target all paragraphs in the tutorials section and do text-indent of 2em. So, I'll go ahead and save that, and I'll go ahead and scroll on down and we'll see that we have the Tutorial section right here, and there's our first paragraph and whenever I Refresh it indents it over. Now, it is possible for us to set our text-indent to a negative value and if there's enough space it will actually create what's called a hanging indent. So, I'll change that to negative 1em, I'll save, and then jump back over here and Refresh, and as you can see it's indenting negatively so we have that hanging indent. Now, of course, we don't really want a hanging indent in this case, so I'll go ahead and jump back in here and I'll set that back to 2em, and there we go. Now, depending on how you feel about this indent you may want to remove it because a lot of people are kind of familiar with your block look for your web site content. Of course, if you're going to be printing this out it may be a good idea to add in that first indent because it will allow you to see where a paragraph begins and ends. Now with our traditional web design we don't typically need this first line indent because you can see where a paragraph begins and ends because of that space between our paragraphs, but if you end up getting rid of that space you may want to put in this indent. Now I'm actually going to go ahead and get rid of it because I like that block look, so I'll go ahead and just change my CSS, delete it and save it, and then Refresh my page, and there it is. Now, that concludes our look at Paragraph-level Formatting using alignment and indent options. This movie also concludes this Section where we examined controlling typographical aspects of HTML objects using CSS. At this point you should have a good level of understanding about how to create and apply rules that control color, size, and many other aspects of text.