Pseudo-Elements - ::first-line and ::first-letter

Pseudo-elements are similar to pseudo-classes, but 0:00 instead of describing a state, like pseudo-classes do, 0:03 pseudo-elements, style certain parts of an element. 0:06 And they can insert elements and content, into our page, from our CSS. 0:10 Pseudo-elements are exactly what their name implies. 0:14 They are phony elements that are not part of the DOM, 0:17 the way real HTML elements are. 0:20 And they can help keep our HTML cleaner, because they target virtual elements that 0:23 are not defined in the markup, and they don't appear in the source code. 0:27 Now, there are four types of pseudo-elements in CSS. 0:31 So, let's begin by taking a look at the first line, and 0:34 first letter pseudo-elements. 0:38 Since text in paragraphs is usually fluid on most sites, selecting and 0:41 formatting the first rendered line of text, would not be possible with class or 0:45 ID selectors, because the line width varies so much. 0:50 So, this is where the first line pseudo-element, will sort of work its 0:55 magic, by targeting and styling the first rendered line of text, in a paragraph. 0:59 No matter how narrow, or how wide, the line of text. 1:04 So, back in our latest workspace, let's scroll down to the first paragraph. 1:08 And even though the first line of this intro paragraph, 1:13 does not have any HTML tags around it, 1:17 as we can see here in the markup, we're still able to select it and style it. 1:20 So, let's go over to our CSS directory, and open up the style.css file. 1:24 And we're gonna create our pseudo-element selector, by first targeting 1:30 the class intro, followed by a colon, then we're gonna type, first-line. 1:35 [BLANK_AUDIO] 1:41 And we're going to give that first rendered line of text, 1:44 a font weight property, and we're gonna set the value to bold, and 1:47 we're also gonna increase the font size. 1:51 So, lets set the font size value to 1.4em. 1:53 All right? 1:58 So, once we save our style sheets, and refresh the browser, 1:59 notice how this selects the first line of the intro paragraph, and 2:03 it styles it with those styles we declared. 2:08 And if we resize the viewport, we can see how the first line pseudo-element, 2:10 will always select the first line of text rendered by the browser, 2:15 no matter the line width. 2:19 While the first line pseudo-element identifies the first line of 2:21 text within an element, we can also use the first letter pseudo-element, 2:25 to identify the first letter of text, within an element. 2:30 So, first letter will actually target the very first character, 2:35 of the first line of text. 2:39 And it's commonly used for creating typographical effects like drop caps, 2:41 where the first letter on the paragraph is enlarged, to drop down two or more lines. 2:46 And this makes the letter stand out from the rest of the paragraph. 2:50 So, let's see how we're able to select and 2:53 style that first letter of our paragraph, with the first letter pseudo-element. 2:56 So, right below the first line rule, we'll again target the intro class. 3:01 And this time we're gonna write, colon, first-letter. 3:07 [BLANK_AUDIO] 3:11 So, let's add a few CSS properties to style the first letter. 3:15 Let's first float it left. 3:19 An d we're going to change the font size. 3:22 Let's set the value to 80 pixels, and let's change the color value to white. 3:24 Let's also give it some padding. 3:32 So, let's make the padding value, five pixels, ten pixels. 3:33 Right below that, let's change the background color, 3:39 with a background property. 3:41 And we're gonna make it a hex value of pound 384047. 3:43 Let's also give it some margins. 3:50 So, we'll add a margin property. 3:53 And let's set the top margin to ten pixels, the right margin to ten pixels, 3:55 and then, bottom zero, left zero. 4:00 All right, two more properties. 4:03 Let's give it a nice border radius, so, we'll add a border radius property, and 4:04 let's set it to five pixels, and finally let's change the line height. 4:09 So, let's add a line height property, and set it to one. 4:13 Right? 4:16 So, let's take a look at our awesome drop cap. 4:17 We'll save our style sheet. 4:19 And once we refresh the page, we see those new styles applied to the very 4:21 first letter of our paragraph, so now it looks like a drop cap, cool. 4:26 So, before we continue, 4:30 sometimes we might see pseudo-elements that use double colons, instead of one. 4:32 Now, the double colon is simply used to distinguish between pseudo-classes, and 4:38 pseudo-elements, since pseudo-classes use one colon. 4:42 But browsers will still support both values, and 4:45 they will work exactly the same way. 4:48 So, moving forward, we're going to stick with the double colon syntax. 4:50 [BLANK_AUDIO] 4:54