CSS3 Tutorial for Beginners: 29 Guide To Pseudo Classes (Anchor, Links, Style)

This is Sasha and welcome to another CSS tutorial where I share with you how to edit and modify your business page. If you have a business website, this is the tutorial to watch. Now in this tutorial, what we’re going to do is talk about pseudo-classes.

Typically, pseudo-classes are used for links, and they’re fake classes or pseudo-classes that you can use. Now, if you’ve seen the mouse roll over on things like links that’s what pseudo-classes are. Let’s take a look at what they are, how they work and operate and show you some examples of pseudo-classes.

Here is my screen and if we take a look at pseudo-classes, one of the things or ways that you can create a pseudo-class is it’s ultimately used for links, and there are a few different pseudo-classes out there. There’s quite a handful of them. The more common ones are things like active, hover, visited, those kinds of things. It’s usually used for links.

I’m going to show you through how you can use this for other things. For example, if you’ve seen stuff like in a table and we’ll give you – I’ll show you a pattern here, and we’ll do like a table, and we’ll go for a row. The way that you apply this is let’s say you want to put your mouse over here and as people look at this table and move their mouse, you want it to roll over, and you want it to show maybe a different color.

Let’s say I want it to maybe show like this green color right here. I’ll go ahead and type out the background, and we’ll go ahead put that number in there.

--------------------- HTML CODE ------------------



		Backstageincome : Learn to grow a business and evolve your life!

Product	Sales #	Profits
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229

Business Launch Pad is focused on showing you the critical
concepts on how to build a profitable business from scratch.
Business Launch Pad is focused on showing you the critical
concepts on how to build a profitable business from scratch.


--------------------- CSS CODE ------------------

table tr:hover {background: #84d8b2;}

As I refresh and you can see as I do the rollover, you can look for every row that my mouse moves over, this is what it does, and you can do this for any element ultimately. In this case, I’ve used it as a table which makes things convenient, but you could do it for other things.

You could do it for even like paragraphs. Like over here, as you look through articles, I like using it for tables but if you go ahead and let’s just say you use it for paragraph and we go ahead and hit refresh, now you can see as I roll over the paragraph, you can see how that ultimately would work as well. Anything with a paragraph tag that’s what it’s going to do.

--------------------- HTML CODE ------------------



		Backstageincome : Learn to grow a business and evolve your life!

Product	Sales #	Profits
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229


--------------------- CSS CODE ------------------

p:hover {background: #84d8b2;}

Using pseudo-classes in links

You could use it for other things but, in either case, the majority of ways to do it is for links, okay? Let me backtrack it here for the table and let me add a couple of links in here for you. I’ll go ahead and create a few links. We’ll type these out linking to backstage income, stageincome.com, and backstageincome.com and close that link out. Here I have one link, okay? Here’s another link, here’s a third link, okay?

We have kind of three links. I’ll go ahead and comment this table out so that way we could use it here on another tutorial but for the time being, let’s take a look at how links are formed. You can see as I look at links and make me add a few spaces here, breaking spaces, in between these and that way you can see how it works, okay?

Here you can see since I’ve already visited that website, it’s going to highlight it in a certain way. Typically with pseudo-class is the way that they work is you have an a:link, you have an a:visited, you’ll also have let me just go ahead and place this right here, the other one that you’ll have is anchor hover, okay, and we’ll do this one is a:active, okay?

--------------------- HTML CODE ------------------



		Backstageincome : Learn to grow a business and evolve your life!

Product	Sales #	Profits
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229


--------------------- CSS CODE ------------------

a:link {}
a:active {}
a:visited {}
a:hover {}

/* table tr:hover {background: #84d8b2;} */

These are the four that you ultimately have when it comes to pseudo-classes. These are kind of subclasses and the way that you dictate it is through that double dot or that colon, okay? You have the anchor, and then you have the colon and then what you’re doing just like we did with the table row with the colon, that’s how we define that pseudo-class, okay?

In either case, to stylize this link so let’s say you want to go ahead and make this link very fancy or it’s a lot different. This is how you do and create buttons in theory because buttons when you have the rollover effect, this is what they look like, this is what they work.

Let’s say I do text decoration and I do none on this one. We do background number and let’s pick a color real quick, and I’ll go ahead and choose let’s say this color right here. Okay, padding of let’s say 5 pixels, okay, and then I’ll show you exactly how that looks, okay?

--------------------- HTML CODE ------------------



		Backstageincome : Learn to grow a business and evolve your life!

		



	

Backstageincome.com



	
Backstageincome.com



Backstageincome.com

Product	Sales #	Profits
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229


--------------------- CSS CODE ------------------

a:link {
	text-decoration: none;
	background: #5bbf92;
	padding: 15px 10px;
	margin: 25px;
}
a:active {}
a:visited {}
a:hover {}

/* table tr:hover {background: #84d8b2;} */

It’ll show you that is how my button is being created. I could do padding let’s say of top let’s say 15 and on the right let’s say 10 pixels, okay? You can see that right there and let’s add in a little bit of margin just so that they don’t run into each other. Okay, margin and let me see why they’re all getting there together. Let’s add a few more breaking spaces right there in between those so there we go.

Rolling over links

I have like these little buttons, and that’s how you do the buttons, but this is just the primary link, right? It’s not if the mouse rolls over. If the mouse rolls over, okay, what do I want to target there? Well, that’s this hover or hover method, okay, so if that happens, what I could kind of do is copy the same thing, keep in mind all the other properties would work so we don’t need to add or include text decoration unless we change that, okay? I’ll go ahead and copy these.

We don’t need the margin. We don’t need the padding. All I may want to do is just the background property. I’ll go ahead and let’s say we change that to blue. We text decorate, and we do underline, okay? Watch what happens. As I roll over, look at that. As I roll over these, we get an underline and the color changes.

--------------------- HTML CODE ------------------



		Backstageincome : Learn to grow a business and evolve your life!

		



	

Backstageincome.com



	
Backstageincome.com



Backstageincome.com

Product	Sales #	Profits
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229


--------------------- CSS CODE ------------------

a:link {
	text-decoration: none;
	background: #5bbf92;
	padding: 15px 10px;
	margin: 25px;
}
a:active {}

a:visited {}

a:hover {
	text-decoration: underline;
	background: #65b3f2;
}

/* table tr:hover {background: #84d8b2;} */

If I only wanted the rollover without the underline, I could get rid of that underline, and I’ll pick it up from the other class, okay? You could see here I roll over and you can see the hand changes also to the cursor or the pointer hand right there, okay? That’s what that is.

Visited links

You’ll see that this link since I’ve visited it in the past, is changed to purple. What you can do and that would be the attended pseudo-class. If you want something that’s visited or let’s say in our case and situation, I’ll say background color of gray right here.

--------------------- HTML CODE ------------------



		Backstageincome : Learn to grow a business and evolve your life!

		



	

Backstageincome.com



	
Backstageincome.com



Backstageincome.com

Product	Sales #	Profits
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229


--------------------- CSS CODE ------------------

a:link {
	text-decoration: none;
	background: #5bbf92;
	padding: 15px 10px;
	margin: 25px;
}
a:active {}

a:visited {
	background: #ccc;
}

a:hover {
	text-decoration: underline;
	background: #65b3f2;
}

/* table tr:hover {background: #84d8b2;} */

That means I’ve already visited it. If it was something I didn’t attend, let’s say backstageincome2 and 3, you can they would be ordinarily green or the standard way.

Active links

The final one is active, and that’s actually when you press on it. You can see how when I press on this one, and it changes it to red. That’s because I didn’t define it yet when I press on that one as well the same thing, it’s red. That’s the active mode.

If I want it in the press, what I could do is let’s say we pick a little darker blue and to give you a slight variation, background color. We’ll do something like this, and we’ll also add a border of 3 pixels solid, and I’ll do it in even darker one right here so that you can see what’s going on.

As I press this, look at – you can see that border right there coming up a little bit, okay? That’s ultimately how you style and decorate links, and if you don’t want that link to be red like you can see it’s red, I could go ahead and say color white. Watch what happens. Boom.

--------------------- HTML CODE ------------------



		Backstageincome : Learn to grow a business and evolve your life!

		



	

Backstageincome.com



	
Backstageincome.com



Backstageincome.com

Product	Sales #	Profits
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229


--------------------- CSS CODE ------------------

a:link {
	text-decoration: none;
	background: #5bbf92;
	padding: 15px 10px;
	margin: 25px;
}
a:active {
	background-color: #3378af;
	border: 3px solid #145b93;
	color: #fff;
}

a:visited {
	background: #ccc;
}

a:hover {
	text-decoration: underline;
	background: #65b3f2;
}

/* table tr:hover {background: #84d8b2;} */

The text of that color changes to white. Ultimately when you’re stylizing links, you know, you have all four of these pseudo-classes to make a significant impact on creating buttons, on building links that way that your links are formed. If you didn’t want a background then you didn’t wish to pad here, ultimately you could get rid of this, you know, background color and we’ll get rid of this background color.

You could stick to other colors. You could stick to just text color so right here, you go standard link, and this is how people create excellent links, maybe they have let’s say a green link instead of something like this.

We’ll do color right here then when it’s active, you can do something like color right here, and some people do the same thing for the visited right here, let me get rid of this white on the active and for when the rollover happens, we could do something that’s a little more bluey, okay, right there and this will be color right there. There we go. Let’s take a look.

--------------------- HTML CODE ------------------



		Backstageincome : Learn to grow a business and evolve your life!

		



	

Backstageincome.com



	
Backstageincome.com



Backstageincome.com

Product	Sales #	Profits
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229
Start Trading Stocks	539	$12,539
Business Launch Pad	109	$1,132
100 Stock Trading Tips	239	$5,229


--------------------- CSS CODE ------------------

a:link {
	text-decoration: none;
	color: #1eb587;
}
a:active {
	color: #158c67;
}

a:visited {
	color: #158c67;
}

a:hover {
	color: #2582aa;
}

/* table tr:hover {background: #84d8b2;} */

As you can see with the links as I do the rollover, you can see how that works and how a custom link is ultimately created. That’s mainly pseudo-classes, but for me also you have to keep in mind how you can use these classes is that eventually if you look at a table, you can use that in this way as well.

As you do rollovers, you can do it that way. There’s a lot of additional pseudo-classes that you may want to do some research on such as there’s one that’s called check. Theta’s one right here that’s called empty. There’s another one that’s called on focus, in-range, invalid. There’s a tone of them out there so take a look at them, you know, there’s a list of them. We’re not going to cover all of them.

There is a cool one that I’ll cover here in this next video about the nth-child selector but otherwise that’s how you use the pseudo-classes on a basic level and shows you how you can modify and manipulate things just merely by adding that rollover effect which is ultimately what most people would prefer to use them as and that’s how you can create some really powerful buttons as well.

Grow your business, income, & life

CSS3 Tutorial for Beginners: 29 Guide To Pseudo Classes (Anchor, Links, Style)

Using pseudo-classes in links

Rolling over links

Visited links

Active links

Online Business Toolbox

Planning a blog business

Pin Designer Course

Company

Training

Next Step

Help

don't call us.
we will coconut
you

organic pop up market store is heading your way

Grow your business, income, & life

Using pseudo-classes in links

Rolling over links

Visited links

Active links

Online Business Toolbox

Planning a blog business

Pin Designer Course

Company

Training

Next Step

Help

don't call us.we will coconutyou

organic pop up market store is heading your way​

don't call us.
we will coconut
you

organic pop up market store is heading your way