Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you've got a lot of text on the page, it's often a good idea to make the start of each paragraph stand out in some manner. The typical method is to indent the first line of each paragraph a bit. This can be easily handled by the CSS Text Indent Property. But what if you don't want to be typical? The first-line pseudo-class has you covered. If you're familiar with the term pseudo -class, you'll recognize it from some other examples in CSS like hover, visited and active. The first-line pseudo-class is used to create a CSS selector in the same way as those more frequently used examples. Let's take a look.
Now with my tours.htm file from Chapter 5 > 05_06 folder open and available. I'm in Live View and I'm going to scroll down to my tour descriptions, and here you see that there is a first paragraph, it's kind of in a blockish form here. So I'm going to go ahead and make this stand out a little but. I'll just put my cursor there so that I can get the #mainContent .tourDescription p or paragraph tag rule up. Now, I'm going to create a new rule though by choosing New CSS Rule and that will get me most of what I want, and now all I have to do is add in a pseudo-class, and you do that by putting a colon and then whatever the name of the pseudo-class is; in this case it's first-line.
Click OK, and now we're ready to apply whatever properties that we want. In this case, I'm going to make it a little bit bigger. So I'm going to bump it up to 1.2 ems, entering 1.2 and then choosing em from the measurement unit list, and let's also add in a little spice of color. So I'll click on the Color Swatch, which will open the Color Picker and give me the Eyedropper tool. So now, I can go over to that little slice of blue that we see here. This is the blue background, and once I click on that, its value goes into the Color Swatch field, and I'm ready to click OK, and there you see our first-line.
Notice that it is applied to every tour description paragraph. It really makes it a lot more distinctive, don't you think? You can apply almost any text property, like font style, text transform, or font variant, to the first-line selector to make your first lines notable in a variety of ways.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103154 Viewers
58 Video lessons · 55689 Viewers
61 Video lessons · 89835 Viewers
56 Video lessons · 105000 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.