Original subtitles

So we talked about pseudo classes before.

So now let's talk about pseudo elements,

which are a nice little CSS feature

that is worth learning about.

So pseudo elements are essentially elements

that don't exist in the HTML,

but that we can still select and style in CSS.

And some common examples of that

are the first letter of a paragraph

or the first line of a paragraph

or of some other texts of course.

So let's start with that first example that I gave you,

of the first letter.

So what we can do using a first letter pseudo element

is to select the very first letter of this H1 here,

which would be this emoji,

and then we could format it differently.

And so with that,

we could fix the fact that this is also italic,

which doesn't make a lot of sense.

So in the end, it's going to look like this.

So no longer italic,

and even with some space there on the right side.

So let's see how that is going to work.

So let's come somewhere down here,

and then let's say H1,

so we are selecting H1,

and then the pseudo element is written using two colons.

So colon colon, and then first letter.

All right.

So pseudo classes are written with just one colon

and the pseudo elements are with two colons.

And so with that, we can easily distinguish

between pseudo elements and pseudo classes.

So let's style that very first letter.

Let's say font style should be not italic, but normal.

And let's also give it some margin to the right,

of five pixels.

And there you go.

Do you see that?

Now there is some space and the text is no longer italic.

Great.

And of course,

that would also have worked with any other off the headings,

and with any other letter.

So of course it doesn't just work with emojis.

So let's say we wanted the first letter here of the H2,

to be a lot bigger.

Let's say font size 60 pixels for example,

or to make it even more visible 80 pixels.

And there you go.

So basically we selected this pseudo element,

which again is not actually an element in the HTML,

but it as if it was an element that we can select,

and then style right here.

Okay.

But this one here is not that interesting.

So let's remove it and let's try another one,

which is first-line.

For example, let's try to select all the paragraphs,

and then in there, select and style the very first line.

And let's say we actually wanted to color to be red,

just as a demo.

And so you'll see that actually worked just fine.

So this is a paragraph and it is the first line.

So it's red.

The same here.

The same here and here and here and really everywhere.

Right?

Now let me actually show you another new selector

that you don't know yet,

which is the adjacent element selector

or the adjacent sibling selector.

So a sibling element is basically an element

that is part of the same parent.

So for example, here,

this P is a sibling of this one and of this one

and of this one and all these other ones,

because they are all inside of the same container,

which is in this case, this article.

Right.

Now, the adjacent sibling is a sibling

that is actually the very next element.

So for example,

the adjacent sibling of this H3 is this paragraph here.

Okay.

So basically the adjacent element

is the sibling that comes right after it.

And there's actually a selector for that.

So what I want to do is to only select the paragraphs

that come after the H3s.

So that's going to be this one and this one.

Okay.

So let's say H3 and then plus.

So the plus here is the adjacent sibling selector.

So if we save that now, then you'll see that in fact,

only the paragraphs that are immediately after the H3,

so this one and this one, have been selected.

And then in there, of course,

only the first line has actually been selected and styled.

Okay.

But that's actually turned us off.

It's not that helpful,

but I still want to give you the reference

here of first-line

and maybe even more importantly,

of the adjacent sibling selector,

which in some cases is actually quite important.

All right.

But now let's actually use the probably most used

and most important pseudo element,

which are the after and the before pseudo elements.

So the after pseudo element creates a pseudo element,

that will automatically be the very first child

of the selected element.

And I'm sure that that sounds quite strange,

but this can actually be very useful

for some small cosmetic style

for which we don't want to necessarily add a new element

to the HTML.

So let me show you what I mean by that.

And, it's easiest to show you in the demo.

So what I'm talking about is this yellow, small thing here.

Let's give us some more space so we can actually see it.

So essentially I'm adding this small cosmetic style here.

So simply saying that this is a top article.

All right.

And so for this very small,

let's say thing,

we don't need to add a whole new element into our HTML.

I mean, of course we could do that,

but this is a good use case

to show you the before or the after a pseudo elements.

All right.

Let's put it back and go back here.

And so, yeah,

so remember that this element here,

is close to this a H1 here.

And so what we will do

is to create the after a pseudo element,

basically after the H1.

So, I will just write the code

and then it will be a bit easier to understand.

So colon colon, and then after.

And now the first property

that is mandatory to specify here is the content property.

So we specify content

and then here we need to write something.

And it can actually just be an empty string.

So just this empty text like this.

But in this case we want top.

Okay.

But even if you don't want any texts

in your pseudo elements,

you still have to define the content property.

And actually at this point,

the pseudo elements should already be visible in our page.

So let's give it a try.

And it looks like it's not there yet.

But let's figure out right here.

Oh, and actually it is here.

You see that it's here in the H1.

So we want it in the H2 actually.

And there it is.

So there is this element that we just created

and we will style it in a little bit

because like this, it doesn't make a lot of sense.

But here you can actually see it,

even in the dev tools,

and as you hover it, it is right there.

Okay.

But that's no stylet a little bit further.

Let's give it some background color.

I'm going to use some nice yellow with this code here.

F F E seven zero E.

All right.

And so now this looks more like a real element.

Then we can also change the font size, for example,

we can make it bold.

So let's see.

And that looks a little bit nicer already.

And now let's give it some padding.

Now by default,

any pseudo element is actually an inline element.

And so if we want to give it any padding,

we want the box model to apply to it normally.

Right?

And so in order to do that,

we need to render this element as an inline block box.

So display,

inline block.

And so this is actually one of the great use cases

of using inline block.

And so take a note of that, maybe.

Now let's add some padding here.

Let's say five pixels to the top

and ten pixels to the sides.

Nice.

So that's already looking quite good.

But now we need to add the final piece of the puzzle,

which is to actually position it in a meaningful place.

So notice how right here, the element is like,

kind of at the end of the element.

So at the end, and half of the element is outside of it.

So while here, in our example,

let's give, our H2,

just temporarily a background color here,

so we can see what's happening.

So background color,

orange.

Okay.

And so now where we want this pseudo element to be located,

is here a bit outside.

So first let's put it here in this corner,

and then from that we will move it outside.

So how do you think we can achieve that?

Well, the answer to that is absolute positioning.

All right.

So the third thing that we need to do

in order to absolutely position an element,

is to first give the parent element,

inside of which we want,

actually the positioning to happen, the position relative.

Remember that?

And so in this case,

that's going to be this H2 element.

So position relative,

and now we are ready to absolutely position this element.

So position absolute.

And let's put it at the top.

And just to test it for now, let's put on the left.

So this will be the top left corner.

And indeed that worked beautifully.

It's right here.

Just notice what happened,

if we turned off the position, relative here in the H2,

then this would immediately move up here,

to the very top of the page.

Right?

And so that's why we can never forget to position relative

on the parent element,

inside of which we want this to happen.

But now we want it here at the right side.

So right here.

And now let's actually move it out a little bit.

So move it up and move it to the right.

Okay.

And the reason why I'm doing that,

is so that I can show you something

that we haven't also talked about yet,

which is negative length.

So if we specify it here, 25 pixels to the right,

it would move from the right,

here in this direction to the left, basically.

Right?

So 25 pixels from the right into this direction.

However, if we set a negative value,

it will move in the opposite direction.

And so now it is right here.

So outside of the H1 while, at least partially

Right?

So not the H1, but the H2, of course.

Then at the top, let's do the same.

Let's say minus 10 pixels.

And it could be even a bit more, I guess.

Let's say minus 15.

And so that looks a bit better.

Okay.

And so now we can get actually rid of this one here.

And there we go.

So that looks just like this one.

Right?

Well, it's a bit different.

This one is a bit more up, so we can move it back down.

Let's say 10.

And also the color is black.

So let's do that here.

And let's stay consistent and use hexadecimal.

And so to make it black,

it's zero, zero and zero all the way.

And so now let's see, that that looks exactly the same.

But the only difference that it's actually four, four, four.

But that doesn't really matter.

And once again,

this element that we just created and styled,

does exist here,

kind of in the HTML three

that we can see here in the Def tools.

But of course in our own HTML,

it is nowhere to be found here, close to this H2.

Right.

So CSS, once we declare it here,

will then automatically create it,

and we'll put it here so that we can style it.

So the styles of course, then appear down here

in the styles panel,

and here are the usual values of the box model.

Okay.

And so this is how we work with pseudo elements in HTML.

Now there was also the before.

But actually that would look exactly the same way.

The difference is that

after will basically become the very last child element

of the one that we are selecting here,

while before we'll become the very first child element.

So if we changed this here to before,

then you'll see that here, it switched position.

But since we are positioning this element

in an absolute way,

that doesn't matter at all, how the result looks like.

But since we are positioning this pseudo element

in an absolute way, anyway,

it doesn't change how it looks like,

no matter if we use after or before.

Nice.

So with this,

we actually finished this part of the CSS fundamentals.

So great job, and well done for still being with me here,

even as the content is getting a little bit more complex,

and maybe a little bit harder to understand.

But that's just part of the learning journey.

And so just make sure that you really understand everything

that I show you here by practicing.

And by always reviewing the code for each lecture.

Now the next two lectures

will be about some developer skills

that are important for you

as you start your journey as a web developer.

And then after that,

we have one final coding challenge for the section,

so that you can practice what we just learned

over these last couple of videos.

So for the next few videos are very important,

and very exciting, I think.

And so see you there soon.