What are Pseudo classes | How to use Pseudo classes? - video Dailymotion

Web Artificer

Discover the power of pseudo-classes in CSS with this comprehensive guide to frontend development! In this enlightening video, you'll unravel the mysteries behind pseudo-classes and learn how to enhance your web development skills. Whether you're a beginner or a seasoned web developer, understanding pseudo-classes is crucial for creating dynamic and responsive websites. Join us as we delve deep into the world of CSS and explore the endless possibilities that pseudo-classes offer. Elevate your coding game and master the art of frontend development with this essential tutorial. Don't miss out on this game-changing insight into the world of web development! #whatarepseudoclasses #whatarepseudoclassesincss #whatarepseudo-classesandpseudo-elementsincss #whatarepseudoelementsandpseudoclasses #whatarepseudoclassesand what is hover in css? how to use hover in css? how to use link in css? how to use active class in html? what are pseudo classes in html? how to use on mouse over changes in css?

Transcript

00:00So in this video, we will see what pseudo classes are.

00:06Pseudo classes are when an event is driven by our mouse.

00:12For example, if we hover our mouse over something, its color changes.

00:17If we click on a link, its color changes.

00:21If we click on a link, its color changes.

00:24Often we see that when we search on Google,

00:27when we search the same thing on Google again,

00:31the color of the subset we have opened is different.

00:35So all this is used in pseudo classes.

00:39So let's use it in pseudo classes.

00:42Let's use anchor tag first.

00:45And we are not giving a reference to it,

00:49so let's put a static tag on it.

00:52We will not give any page or URL to it.

00:55Let's give it a class named link.

00:59Let's give it a text.

01:01This is a link.

01:04Okay.

01:05Now let's style it a little bit.

01:08.link

01:10Let's give it a font style.

01:16Let's give it a font size.

01:18Let's give it 16 pixels.

01:22And

01:25First of all, we use our pseudo class.

01:28.link

01:30Pseudo class is for class.

01:32Pseudo class is a different thing.

01:35And pseudo element is a different thing.

01:38So for pseudo class, we use colon.

01:42So after this, we write our class.

01:45So first of all, we will write link.

01:48It means

01:52This is an

01:55Unvisited

02:05This is an unvisited link.

02:09This link class means

02:12Let's give it a color for example.

02:15Green

02:17Green color means it is not visited.

02:21Let's give it a green color.

02:24Okay.

02:26.link

02:28We gave our class.

02:30Pseudo class is visited.

02:32It means it is visible by name that this link is not visited.

02:41Similarly, we will give it a color.

02:46We will give it a light color.

02:49Which will be a visited link.

02:52And this will be a power link.

02:55Power link means that when we

02:58We will take our mouse on it.

03:01We will neither click nor perform any event.

03:04We will just hover our mouse on it.

03:07So it will change its color.

03:11It will change its background color to blue.

03:18Blue is its by default color.

03:21So we will make it

03:25Yellow

03:28After this, we use active class.

03:31The mistake of active class is that whoever clicks on the link

03:35It tells that this link is now active.

03:39Okay.

03:42Now, as soon as I hover my mouse on it.

03:45So it changes its color.

03:48And as soon as it is clicked

03:51So this will be a power link.

03:58So this is a power link.

04:01Now, apart from the link, if we

04:04For example, instead of this, we use a handbook field.

04:08Input field text

04:11And we give it a class name.

04:14Link

04:19And now instead of this color

04:22We change it to background.

04:38Okay.

04:41Now we have made it a background color.

04:44Now, as soon as we hover our mouse on it.

04:47So it changes its color to yellow.

04:50If we keep clicking, it will change its color to pink.

What are Pseudo classes | How to use Pseudo classes?

Category

Transcript

Be the first to comment

Recommended