Check out a free preview of the full Professional CSS: Build a Website from Scratch course
The "Styling Image Border Radius" Lesson is part of the full, Professional CSS: Build a Website from Scratch course featured in this preview video. Here's what you'd learn in this lesson:
Kevin demonstrates how to use a generic selector to add a border radius to all images in the codebase, instead of adding a utility class to each individual image.
Transcript from the "Styling Image Border Radius" Lesson
[00:00:00]
>> Kevin Powell: There in this idea of trying to be generic, and this actually goes well with the question of when do you wanna use utility class or not? It's if we look in this, and this might be a little bit of foreshadowing for something that will run into later on.
[00:00:12]
Is that when we look at our images, all of the images we have, every single one of them has a border radius on there. So these images have it, but it's a bit smaller. And then we have these images here that have a larger border radius on them.
[00:00:28]
So one thing we can do, and you see this, and there's something, it's just everywhere. Do I really wanna go on every single image within my entire thing and add a utility class to it to give it a round corner? Maybe not [LAUGH]. So it is something that you could decide that it actually makes more sense to come in and just do a really generic selector, so we could go all the way up to our base.
[00:00:50]
Another thing that's nice with layers is you can just search within your code base for your layer name, so you can find it fast, and you're not searching through your whole code. So in my base layer, you potentially could come in and just say that all of your images have a border radius on them.
[00:01:13]
And we have some var border radius, I think it's three, which is our biggest one. We might need to modify that on the smaller ones we have that are in the cards later on, but then I just get a border ES on every one of them. So sometimes, when you're going through, if you see something that you think would save you time, try it out, see if it works.
[00:01:35]
Don't even need a utility class there, cuz I think utility classes for this could potentially be tedious. But yeah, as I said, this might be a bit of foreshadowing that you can run into trouble with these. So just do be a little bit careful if you do decide to go down this route.
[00:01:49]
But for now, we'll leave it like this, just so we can see sort of implications of what that can cause later on.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops