Hello, everyone, and welcome back.
In today's video, you learn about Soohoo elements.
A element is used to status specific parts of a.T.M element.
These are all the seedy elements in siestas.
Let's start with the first one, which is FirstLine.
So the first line to the element is used to silence to the first line of text.
It works only for block elements like paragraph and heading dags.
Let's try an example to understand it better.
Tim, you've got this Web page.
You've got these paragraphs and headings.
Let's have you on the first line of each paragraph to have more letter spacing and a different phone
color.
So let's try that.
Let's bring about quote it here.
All right.
So.
I don't think we have a clause for the paragraphs.
So let's try using selectors.
So article all the paragraphs, which I did a change of articles like those.
Let's give them about Onkalo first.
Sorry, like coral.
Let's save it.
As you can see, all these photographs are Dellec children of these articles.
Now, what we want is we want to use this pseudo everyman to select all the FirstLine talked about ruffs
and give them some styling.
So let's say the first line on what you wanted to do was you wanted to increase some lateral spacing.
So that's that.
See?
Kubic says.
And we also wanted to change the phone.
So let's do that.
Let's go to let's say, like the TV.
As you could see, the first line is like green in color, all these selected paragraphs.
And there is a bit more.
Let us reason.
All right.
So let's wait a second to tell me which is first later.
So as the name suggests, it is used to act status to the first letter of X.
And even this element just works only for block elements like paragraph and heading Darden's.
Let's try an example to understand it, too.
All right.
So that's just copy this comment.
Is this here some sort of first line?
Let's see first.
Later on, let's increase the font size C.
Thirty six pixels on, let's change the color do.
Let's see if there's a like like we can just go with Guru.
So let's say it was you can see.
All these boats that just are starting.
So they've got a bigger font size and the water doesn't go.
No, if I uncommon this, I see.
As you can see, both these sides are looking together.
So we can use multiple Tsugaru elements on the scene.
All right, so moving on to the third one, which is selection, so it is used to add science to the
selected text.
So when I select this text, as you can see right now, though, there's a highlight of this blue color
on the form that it is like.
So it is used to change this, these stadiums.
So let's write an example.
When the sun is better.
So let's bingo barcoded do.
So article all the paragraphs which are Varrick child of this paragraph that are pseudo element, which
is selective selection.
Sorry.
Let's say a background color.
Like go road and color us black.
Let's say.
Let's try selecting these elements.
So now as you can see.
All these elements, they're getting highlighted with this light blue color on the front, coteries
black, except for this one.
This is happening because the formula is already like a loop.
Now, moving on to the next two SUDA elements, which are before and after.
So these are used to add some extra content before and after the content of the extremist element.
This extra content could be text, image or blank.
Let's try an example to understand it better.
Let's just call mental lisbona.
So, again, let's select all these articles.
All the photographs which eidetic child legislated before.
What did you want?
Good.
Before all this text, so we can use this attribute contained inside double codes.
We can just we were single, could achieve it.
And as you can see.
This paragraph has a good before it, similarly, all these paragraphs.
Similarly, try adding something after the contents of a paragraph and let's say of the.
So constant, double goads, and that's the single good.
The, too, and now, as you can see, there's a signal called before and after.
Also, let's give it a background color to all these so articles on all these paragraphs.
Let's give them background color.
So we like to go Gaudreau.
Let's do it here.
And now, as you can see, all these highlighted ones have this good in the beginning and at the end.
Similarly, we got an image so of got this small image here.
Let's put it back in a good.
So to add an image, you can do something like this.
So you have to use this.
You are on the inside that just given that you are on the table.
Let's do this late Google.
Let's see, we.
Save it.
And as you can see, there is this small smiley hue before all these elements.
Similarly, if I wanted to add this mighty afterwards as well.
So I can simply use this, you are the method and bust the location as a barometer.
Now, as you can see, we've got the same image at the end.
There's just one thing to remember.
So when you used image in before and after, you cannot change that within you.
So just ensure that we're dealing with height, require the images of the same dimensions.
Similarly, as I mentioned, this could be ended also.
So let's just try that.
Let's see.
Indeed.
Similarly, we're here.
Empty the toilet.
As you can see, there's nothing before and after these elements.
That's all for today, guys.
If there's something that you did not understand.
Feel free to drop a comment and we will discuss it.
See you in the next video by Undig.