This is Sasha and welcome to another CSS training video today where I share with you how to edit and modify your business website online. Today, we’re going to take a look at pagination or pagination. This way you can style the appropriate pages or the navigation links within the pages. Let’s take a look at how this is done on the screen.
If we take a look at the code here, what I’ve done is just set up a basic div right there, and inside of that I have the anchor links or the anchor tags, and I also have one button that’s also active meaning that it’s selected or you are on page number 2.
This is kind of what I have set up as a basic line, and you can see it here on the left or the right over here with all the numbers. Let’s go ahead and build these things out. I’ll go ahead and create my pagination code. What I’m going to do is to show you border 1 pixel solid red and so that way you can see right here.
Right now it’s sufficiently full. You could leave it like this. I’ll go ahead and change the display to inline-block so that way it’s just kind of, you know, on its own inline and I can move around a little bit easier.
We’ll go ahead and leave that for the time being just for usability sake. Then what I need to do is go ahead and structure my anchor links, okay? I’ll go ahead and create that rule. For that, I’ll go ahead and do text decoration none because I don’t want any text decoration.
I’ll go ahead and change the color to maybe like a little gray color right there. I’ll also probably want to pay off, let’s give it, 15 pixels. I’ll go ahead and putt a border of 1 pixel solid blue for the time being to take a look here, okay, and we’re zoomed in pretty heavy. I’ll zoom out just a little bit.
We probably don’t need that red there so I’ll go ahead and remove that so you can see there’s the border, I think probably 15 is too much, let’s go ahead and do 8 right here. Eight looks pretty good, but 8 on top and bottom looks okay, but I probably want maybe 12, let’s do 10 pixels there and maybe 6 on the top and bottom.
There we go, we have more extensive number maybe even 12 to the right and left. Okay, so there we go. That looks a lot nicer and better.
What I also want to do is go ahead and potentially creates like, let me go ahead and do this, we’ll go body and background, I’ll choose like a, let’s say, a gray or baby blue background because they’ll give me a little bit of something to play with the colors.
I’ll go ahead and make sure this is kind of like a bluish background, okay? We can go ahead and also change this background of our anchor links to white, okay? You can see they’re white. We have kind of this border which is okay. I don’t like it. It’s a little bit too strong, so I’ll go ahead and change that to potentially this color right here so you can see we’re starting to look a little bit better.
I also don’t like that they’re very cornered. I’ll do border-radius, let’s say, 5 pixels and let’s see what that looks like. Let me zoom in a little bit so you can see.
That starting to look a lot better. I also want maybe a little bit more of a roll over effect, okay? I order to create that roll over effect; I’ll go ahead, and create or copy this rule right here and make sure we’re on the hover state, okay, and then when I need to do here is go ahead and say, “Okay. Well, what do I want?”
I want the background color to change. What do I want it to switch to? Let’s say we’ll change it to a darker tone something like this and probably text color, and we will want white, okay? Let’s just take a look at what that looks like. You could see as I roll over, it seems pretty good, you know?
The other thing is probably maybe a transition so the fade transition will do all, will do 1 second ease, okay, so let’s see what that looks like. You can see it’s a little bit – it’s nice. It gives it a little bit of fade effect.
I could do maybe 300 milliseconds instead to give it a little bit quicker so you can see it’s a little quicker effect right there. That also looks good. You can see it seems pretty good. But now which page are we on? Well, that’s defined by this active class, right?
What we need to do is target the active class. What I’ll do is create another rule right here, and we’ll do a dot, or we’ll do, let’s say active. Let’s see if we can target it this way and you can see that were right there already on two but I don’t want it to be that same color.
Let’s say we choose something a little bit darker right there, okay? That one is darker, and then the other one can roll over that slider, or you could make it like a green tone, okay? We could see something like a green color tone right here. Let’s see here. We’ll do something like this, okay? We have like a green color tone there, and then the other ones are blue with a roll over effect.
You can see how I style that pretty nicely right there with a little active area also. I could do maybe like a 2-pixel border if I wanted that, I could do no limit at all. I could do 0 pixels, and you can see how I have these kinds of things. I could also tone down the radius to maybe just two instead.
I’m going to go ahead and darken this background a little bit so you could see just kind of what it looks like. But you can see how right there, we’ve created our pagination CSS code with a little bit of nice roll over effect and if I zoom out a 100%, you can see that’s what it looks like.
If I need it a little bit taller, I could bump the padding up right here. I could do 10 pixels here and, let’s say, 18, 19 pixels there. You could see. You could play with this just depending on what you want. If I want, you know, 9 pixels on the radius.
If I want, let’s say if I want circles kind of you could do that as well but remember once you get until the numbers of like 15, 25, 105 the circles typically won’t work as well and you also have to keep in mind with the padding. Sometimes you have to play with this to get it to the appropriate proportions, right? Well, you can see how I can create circles as well reasonably easily right there. Anyways, there you go. That’s your example.
