Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The ::first-line and ::first-letter pseudo-elements let us target the first line of text and the first character in a line of text.
Quick Reference
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
You need to sign up for Treehouse in order to download course files.
Sign up