1
00:00:00,555 --> 00:00:03,590
Pseudo-elements are similar to
pseudo-classes, but

2
00:00:03,590 --> 00:00:06,921
instead of describing a state, like
pseudo-classes do,

3
00:00:06,921 --> 00:00:10,300
pseudo-elements style certain parts of an
element.

4
00:00:10,300 --> 00:00:14,955
And they can insert elements and content,
into our page, from our CSS.

5
00:00:14,955 --> 00:00:17,520
Pseudo-elements are exactly what their
name implies.

6
00:00:17,520 --> 00:00:20,350
They are phony elements that are not part
of the DOM,

7
00:00:20,350 --> 00:00:23,000
the way real HTML elements are.

8
00:00:23,000 --> 00:00:27,680
And they can help keep our HTML cleaner,
because they target virtual elements that

9
00:00:27,680 --> 00:00:31,580
are not defined in the markup, and they
don't appear in the source code.

10
00:00:31,580 --> 00:00:34,740
Now, there are four types of
pseudo-elements in CSS.

11
00:00:34,740 --> 00:00:38,310
So, let's begin by taking a look at the
first line, and

12
00:00:38,310 --> 00:00:41,230
first letter pseudo-elements.

13
00:00:41,230 --> 00:00:45,820
Since text in paragraphs is usually fluid
on most sites, selecting and

14
00:00:45,820 --> 00:00:50,880
formatting the first rendered line of
text, would not be possible with class or

15
00:00:50,880 --> 00:00:55,040
ID selectors, because the line width
varies so much.

16
00:00:55,040 --> 00:00:59,110
So, this is where the first line
pseudo-element, will sort of work its

17
00:00:59,110 --> 00:01:04,290
magic, by targeting and styling the first
rendered line of text, in a paragraph.

18
00:01:04,290 --> 00:01:08,430
No matter how narrow, or how wide, the
line of text.

19
00:01:08,430 --> 00:01:13,760
So, back in our latest workspace, let's
scroll down to the first paragraph.

20
00:01:13,760 --> 00:01:17,770
And even though the first line of this
intro paragraph,

21
00:01:17,770 --> 00:01:20,490
does not have any HTML tags around it,

22
00:01:20,490 --> 00:01:24,990
as we can see here in the markup, we're
still able to select it and style it.

23
00:01:24,990 --> 00:01:30,240
So, let's go over to our CSS directory,
and open up the style.css file.

24
00:01:30,240 --> 00:01:35,692
And we're gonna create our pseudo-element
selector, by first targeting

25
00:01:35,692 --> 00:01:41,416
the class intro, followed by a colon, then
we're gonna type, first-line.

26
00:01:41,416 --> 00:01:44,577
[BLANK_AUDIO]

27
00:01:44,577 --> 00:01:47,736
And we're going to give that first
rendered line of text,

28
00:01:47,736 --> 00:01:51,409
a font weight property, and we're gonna
set the value to bold, and

29
00:01:51,409 --> 00:01:53,750
we're also gonna increase the font size.

30
00:01:53,750 --> 00:01:58,645
So, let's set the font-size value to 1.4em.

31
00:01:58,645 --> 00:01:59,540
All right?

32
00:01:59,540 --> 00:02:03,450
So, once we save our style sheets, and
refresh the browser,

33
00:02:03,450 --> 00:02:08,250
notice how this selects the first line of
the intro paragraph, and

34
00:02:08,250 --> 00:02:10,480
it styles it with those styles we
declared.

35
00:02:10,480 --> 00:02:15,350
And if we resize the viewport, we can see
how the first line pseudo-element,

36
00:02:15,350 --> 00:02:19,100
will always select the first line of text
rendered by the browser,

37
00:02:19,100 --> 00:02:20,430
no matter the line width.

38
00:02:21,780 --> 00:02:25,810
While the first line pseudo-element
identifies the first line of

39
00:02:25,810 --> 00:02:30,980
text within an element, we can also use
the first letter pseudo-element,

40
00:02:30,980 --> 00:02:35,320
to identify the first letter of text,
within an element.

41
00:02:35,320 --> 00:02:39,600
So, first letter will actually target the
very first character,

42
00:02:39,600 --> 00:02:41,390
of the first line of text.

43
00:02:41,390 --> 00:02:46,370
And it's commonly used for creating
typographical effects like drop caps,

44
00:02:46,370 --> 00:02:50,680
where the first letter on the paragraph is
enlarged, to drop down two or more lines.

45
00:02:50,680 --> 00:02:53,720
And this makes the letter stand out from
the rest of the paragraph.

46
00:02:53,720 --> 00:02:56,640
So, let's see how we're able to select and

47
00:02:56,640 --> 00:03:01,270
style that first letter of our paragraph,
with the first letter pseudo-element.

48
00:03:01,270 --> 00:03:07,840
So, right below the first line rule, we'll
again target the intro class.

49
00:03:07,840 --> 00:03:11,517
And this time we're gonna write, colon,
first-letter.

50
00:03:11,517 --> 00:03:15,637
[BLANK_AUDIO]

51
00:03:15,637 --> 00:03:19,110
So, let's add a few CSS properties to
style the first letter.

52
00:03:19,110 --> 00:03:20,650
Let's first float it left.

53
00:03:22,232 --> 00:03:24,720
An d we're going to change the font size.

54
00:03:24,720 --> 00:03:30,080
Let's set the value to 80 pixels, and
let's change the color value to white.

55
00:03:32,070 --> 00:03:33,780
Let's also give it some padding.

56
00:03:33,780 --> 00:03:39,590
So, let's make the padding value, five
pixels, ten pixels.

57
00:03:39,590 --> 00:03:41,950
Right below that, let's change the
background color,

58
00:03:41,950 --> 00:03:43,880
with a background property.

59
00:03:43,880 --> 00:03:50,460
And we're gonna make it a hex value of
pound 384047.

60
00:03:50,460 --> 00:03:53,470
Let's also give it some margins.

61
00:03:53,470 --> 00:03:55,580
So, we'll add a margin property.

62
00:03:55,580 --> 00:04:00,380
And let's set the top margin to ten
pixels, the right margin to ten pixels,

63
00:04:00,380 --> 00:04:03,410
and then, bottom zero, left zero.

64
00:04:03,410 --> 00:04:04,970
All right, two more properties.

65
00:04:04,970 --> 00:04:09,790
Let's give it a nice border radius, so,
we'll add a border-radius property, and

66
00:04:09,790 --> 00:04:13,570
let's set it to five pixels, and finally
let's change the line height.

67
00:04:13,570 --> 00:04:16,505
So, let's add a line height property, and
set it to one.

68
00:04:16,505 --> 00:04:17,430
Right?

69
00:04:17,430 --> 00:04:19,600
So, let's take a look at our awesome drop
cap.

70
00:04:19,600 --> 00:04:21,200
We'll save our style sheet.

71
00:04:21,200 --> 00:04:26,270
And once we refresh the page, we see those
new styles applied to the very

72
00:04:26,270 --> 00:04:30,560
first letter of our paragraph, so now it
looks like a drop cap, cool.

73
00:04:30,560 --> 00:04:32,000
So, before we continue,

74
00:04:32,000 --> 00:04:38,140
sometimes we might see pseudo-elements
that use double colons, instead of one.

75
00:04:38,140 --> 00:04:42,207
Now, the double colon is simply used to
distinguish between pseudo-classes, and

76
00:04:42,207 --> 00:04:45,700
pseudo-elements, since pseudo-classes use
one colon.

77
00:04:45,700 --> 00:04:48,510
But browsers will still support both
values, and

78
00:04:48,510 --> 00:04:50,650
they will work exactly the same way.

79
00:04:50,650 --> 00:04:54,311
So, moving forward, we're going to stick
with the double colon syntax.

80
00:04:54,311 --> 00:05:00,099
[BLANK_AUDIO]