In this particular video.
Let's talk about pseudo element styling.
So what actually is this pseudo element?
Well, see, the element is used to target specific parts of an element for styling or a pseudo element
is a key word added to a selector that lets you style a specific part of the selected elements.
So what it means is that for pseudo elements we can target a specific part of a text.
Let's say that this my text, which represents a new take meaning the first line so I can target only
I and style it differently, or I can add some line spacing between the first line.
That's what you call the pseudo element styling.
So the motive for this particular video is that you are going to style these elements differently.
For example, let's start with the new Vertex Academy first line before we continue.
I have provided a starter file for you.
You can download it and then review on the same pipeline or better so you can use your own file if you
wish.
So inside the HTML, I have a few lines of code, I have the H one and then underline and a paragraph
and a subheading.
So I never take first line and we scroll down.
I have an overtake first letter here and then I have a dev with a class of container and with a few
text inside.
So let's focus on pseudo elements.
So the first step is I want to style the H one, the H one first line.
Have a look H one first line.
Whereas H one yes my H one is this one.
Yeah, this one I never text first line line number 19.
I want to style this one using C the element.
So back to my CSS file.
So first we will target the H one and then column colon and you bring in first line and that.
So with this one, let's see, let's give it a color of say red.
Now have a look and see that the first line I have a color of red.
That's my first line.
So I see that the first line targets the entire line of my text, meaning is a line.
And I can keep on and add a couple of text.
Let's say font size of this one is 20 pixels.
I can also add text decoration and I will say supposed to be dashed and I can add a background color
of say, pink.
So for this we can add couple of CSS properties, but not all search properties that can be applied
to first line.
And I will show you in just a second.
So let's continue.
So when I save it, now we see that I have something happening and we can add some line spacing between
them.
So line spacing in the space between each character.
So here I can say line spacing, line spacing.
So let us spacing rather is going to be as six pixels, six pixels.
As that.
And now you see that we have some spacing between them.
Let me change the text to uppercase.
That is text transform is uppercase.
Now have a look.
Now they are in uppercase.
I think the font is too small.
Let me give it a font size of, say, 30.
Yes.
Now this looks better.
That is the first line.
We have first line and the first letter.
Let's say that I want to target the first letter of my H three.
So let's see the H three inside my code here.
The H three is.
Let me see.
Where is my eight three?
Yes.
Line number 25.
I gave it a new vertex academy First letter.
Meaning I'm going to target the H three.
So come here and make this of a three.
And then first letter, meaning target the first letter.
So let me give it a color of red.
And let's see that if I have Target, the first letter I could see here.
Now, indeed, I have targeted the first letter.
That is the element for you.
So I can increase the font size to say 90 pixels.
Yes.
And it looks good.
I believe we see this kind of effect or style in some code and in some books.
We see something of this sort.
Now we can do something within our own code.
Okay.
And it's something I can add.
Let us piece in.
Let us be seen also.
Six pictures and icons Add Text Transformation.
Text Transform to uppercase.
Nancy, that I have transformed into uppercase as before.
That is about the first letter.
Okay.
And we can also target with a class with our custom class, not always select the element name, but
we can also add a class down here so that I've added a class called container.
And I want to target the nested child called P so dot container because it's a class.
And then our target, my element and my pseudo element.
So have a look.
So here our target dot container that my class and then P and then column colon and then the first letter
as that.
And for this let me give it a color of give it a purple color.
And then let's give you a font size of, say, $100.
Now have a look.
And that is it.
So let's have some notes.
Or some points.
And this.
Well, note that the first line is the element can only be applied to block level elements.
Again, the first line can be used to apply to block level elements.
If you have an element which is inline element, you cannot use the first line and I'll provide all
block level elements for you in the PDF guide.
An example of them is a footer from H one to ax header the or the P structure in a table, video address,
article and block code.
All these are block level elements.
And then again, this means that you cannot use an you cannot use on an element such as pen, which
is an inline element.
And you also have some properties that can be used on the first line.
An example is word spacing, letter spacing, vertical line test transform, and many more.
Like I said, I'll provide all these ones for you in the PDF Guide the next video.
Let's finish up and talk about before and after pseudo classes.