In this video, tackle an exercise using pseudo-selectors.
- [Instructor] In this project update, let's start with changing the color of the initial state of the link. I'm going to add these styles to my global section since these are general styles that will apply to all the links on the page. I'm going to use a as my selector, color to change the text color and I'm going to use this yellow for my links. Save the file and let's check out our browser. We could've used the link pseudo selector which specifically applies to links with an H or F attribute but in my experience is not very common to use an anchor tag without the H or F. So generally, using just a works fine to style the initial state. For this particular design I don't see the need to show the user what links they've clicked on already so I'm not going to style the visited state but I will add a hover state. Let's go back to our CSS file. Adding the hover style is fairly common but just remember these don't apply to touch devices or those using keyboard navigation. So, think of hover styles as an added enhancement. Instead of changing the color this time, I'm going to remove the default underline with the text decoration property and a value of none. Save the file and let's go back and check, refresh the browser and remember this style only applies when you hover over the link. The underline is now removed. I don't really like how this link color looks in the project section. It's too light with the light background color. So, I'm going to use a descendant selector to change the link color just for this section. Back in my CSS file I'm going to go down to the projects block and add my projects space a so I can target just the links in this section and change the color to something else. So, I'm actually going to make this link look more like a button. So, I'm going to use a dark background color and a light text color. So, let's start by adding this almost white color for the text and for the background I'm going to use the dark blue. We're also going to move the underline here. Okay, that's enough styles. Let's save it and check in the browser. So now, we can see the background color, the underline has been removed and the font color has changed to something lighter but we're going to need to add some space inside this link to make it look a little more like a button. So, we're going to add padding. Basically padding will add space inside an element but we'll be going more in depth about what padding is later on in the course. Right now I'm going to give it a value of eight. Okay, let's check our changes, refresh the browser. So, to make it look even more like a button, let's add some rounded corners. Going back to my CSS file and I'm going to use this property called border radius and give it a value of four pixels. This will be just enough to round out the edges, just a little bit. The bigger the number, the rounded edges will be. Okay, so now it looks a little bit more like a button. The next thing I want to do is to find a hover style for these buttons. So, earlier we talked about how to apply opacity to the color values. Instead of changing the colors, let's change the opacity of these buttons on hover. To do so, we'll use the RGB functional value. My color pallet right now is actually using hex values. So, I'm going to use this online tool to convert my hex values into RGB values. I need to use that same dark blue color so I'll add the hex here to get the converted value. So, I'm going to copy this RGB value and go back to my CSS file and add a new selector for the button hover. So, that was in my projects a so I'm going to call this projects a:hover and then I'm going to use the background property again but this time with that new RGB value. So, I want to change the opacity on hover. So, I'm going to add the alpha channel so that means I have to change this to RGB a and then add the opacity value at the end. So, I just want it to be a little bit transparent. So, I'm going to go with 80% and just add in some spaces just for readability. Let's give this a test. Save the file, go back to the browser, refresh and let's hover over these links. Okay, so we can see that 80% opacity has been applied on hover. Well, now that I have these button styles, I can see that it's being applied to all the links in this section, including the links inside paragraphs. I only want to apply it to the links that go to either a case study or a live project. So, let's update the selector so we cannot apply it to more specific instances. So, instead of using a as the selector, let's create a new class just for the button styles. So, we need to call it btn for short. So, we will be putting a style on the links later on so I'm going to copy this for now and just leave this here. And then this is where my button styles are so I'm going to change that to projects.btn and I'll do the same for my hover styles as well. The reason I'm not calling it btna is because I'm going to add this class directly to the a tag within the project section. So, let's update the HTML. So, back in my HTML I'm going to add this class only to the links that point towards a project or a case study. So, the order doesn't matter as long as you make sure that there's a space in between the attributes. So, I'm just going to put mine right after the a, class equals quotes btn and and closing quotes and a space. So, I'm just going to copy this and add it to the rest of the buttons. Okay, I think I have it all. Let me save the file and check the browser. I'm going to refresh. So, it's been removed from here which is good. It's still showing here which is what I want as well as here and here. Now that I've checked that all the button styles are showing where they should, I still want to style these links different from the rest of the page because it's still on a light background. So, instead I'm going to choose a darker color for the links within the paragraphs. Back in my CSS file, I'm going to grab this color here and then I will apply it to the project a selector. So now, this style will apply only to links in the project sections that do not have the button class. Save this file and check our page. So now, it has the darker link color and the yellow link color appears on the rest of the page. So, you might be thinking, why didn't we just create a button class from the beginning instead of going back and changing it? Well, I just wanted to show how it goes when you're really working on a project. You try to think ahead as much as possible but as you build out your project, you may realize that styles are being applied somewhere else, unintentionally. So, adjusting selectors throughout the project is to be expected. At this point you probably want to change a bunch of things like fonts and spacing and we'll get to all of that in due time. Feel free to take some time to change up the colors or experiment with the different pseudo selectors but don't get too hung up on it right now. You can always come back and change it later.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts