Adobe Dreamweaver: Creating CSS Layouts Tutorials
Text / Indenting Paragraphs
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Dreamweaver: Creating CSS Layouts / Text / Indenting Paragraphs)
Another formatting device that you may be familiar with from the print world that's used to improve the look of text is that of indenting the first line of a paragraph. You can see that in this example each paragraph is indented about 25 pixels. This acts as a clear hook for the reader, drawing the eye to the beginning of the next paragraph. This is especially useful where line height is quite narrow and it helps the reader find the beginning of the next paragraph. CSS gives us the text file Indent property for this so if we look at this example, I've gone in and added, let's go to my CSS Styles window, I've added a redefinition of the Paragraph Tag and if we look at that here in the CSS Rule Definition, in the Block category, notice that there is a text file Indent value. I can set pixels, points, inches, centimeters, ems, percentages and so on. Now, in this case, every new paragraph will have this indent applied to it. Notice if I add a new paragraph, that one right there, I get an indent. Probably a better strategy is to remove the text indent here in the Paragraph Tag and notice that all my indents are gone and let's add a Class. This is probably a good example of adding a new Class. Let's call this .PIndent, paragraph indent like so, click OK and that brings up the CSS Rule Definition, go back to Block and let's set up my text indent to 25 pixels as I had before. Now, I've gone ahead and defined that Class. I haven't applied it to any paragraphs, but I can. I can simply click on my Paragraph Tag here in Dreamweaver's Tag Selector, let's open this up a little bit so we can see it. Right there is my Paragraph Tag and there's the Paragraph Tag in the Tag Selector and there's my paragraph that's selected. Now what I do is I can right click on the PIndent and click Apply and notice that now I can specify which paragraphs will be indented. Likewise, for this one, I can right click with my CSS window open, right click and choose Apply. Another method of applying styles is to use the Property Inspector. Let's go ahead and select the paragraph using the Tag Selector, that one there. Notice that here I have a Style drop-down and there's PIndent. I can apply it that way. Notice that again those three paragraphs have been singled out for indentation. Probably a little bit more flexible than just setting up an indent, a Paragraph Indent using the P Tag or the Body Tag. That will then create Paragraph Indents for all new paragraphs, whereas this method, notice if I add another paragraph here, it's not indented until I specifically request that it gets indented. So there you have a demonstration of the text file Indent property within CSS to improve the look of your text, particularly the text as it begins each paragraph. Let me now move on to the next movie and demonstrate how to apply drop caps to your text to improve the legibility and readability of your paragraphs.
Tutorial Information
| Course: | Adobe Dreamweaver: Creating CSS Layouts |
| Author: | James Gonzalez |
| SKU: | 33914 |
| ISBN: | 1-934743-99-2 |
| Release Date: | 2008-09-21 |
| Duration: | 8 hrs / 92 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
