Increasing CSS Specificity

[00:00:00]
>> So here, it doesn't quite work. So what we've actually got going on is a little bit of a conflict. Again, once we start putting things together, we come into conflicts with our styles and their specificity. So what's happening here is that earlier in our styles up towards the top here, we have a class plus an HTML element, a project figure.

[00:00:24]
And we said display block. Later in the document, we have a class by itself, but we have no HTML element with it. So our grid styling is not being applied. It's actually being overridden by what comes earlier in the document. We need to increase our specificity in order to make this work.

[00:00:42]
So I am going to add figure in front of this. Now it has equal specificity. We have a class and an HTML element. Earlier in the document, we had the same, so the one that wins comes later in the document. If you're wondering about how we knew all of these rules, the intermediate HTML and CSS course here will go through all of the specificity stuff and explain all of the rules and how they work.

[00:01:05]
So if we save that and go back into Firefox here and refresh, now I have my image and figure caption over here on the left side of the screen. Together, now we need to tell them where to go. So let's get that done. So .figure-portfolio. Img margin-top 0, grid-column 2/3, and grid-row 1/2.

[00:01:50]
And then after that, so we're telling the image where to go, go over to the right. So on the second column in the first row. And then for figure-portfolio figcaption, We have a grid-column of 1/2 and a grid-row of 1/2. So in other words, figure caption, we want you to go in the first column, same row, and the image we're putting on the right, same row.

[00:02:25]
Okay, and when we refresh our webpage, Now we have our image on the right and we have our track list here on the left, whew. Questions so far? Okay, so the last thing we need to address here on the screen is our jagged background. So the jagged background we have right now actually has built into it some black background to work great on the home page.

[00:02:55]
But what we want now is this jagged background to have some transparency to it. And so I played around with this by quite a bit. And what I found was I needed to rewrite a little bit of code in order to make this work in terms of HTML.

[00:03:12]
Normally, this jagged background would go on the footer. But because the footer already has the background fit of cover set to it so that this image changes, we can start to see more of that image as we resize. If we put the jagged image on the footer as well, that image also resizes, and we wind up with half of the image is white and half of the image has stars on it.

[00:03:37]
It's really weird looking. So we have to keep this jagged background in its own special little div in order to make this work. So we're going to change the HTML in just the footer for this page. And so here we are in the footer. And this is the container, and so forth.

[00:04:01]
I don't know why that's red. No idea, okay, so after the footer here, what I'm gonna do is I'm gonna add a div with a class of bottom-trim. It's just a little div that's just here all by itself. That's all the HTML we need, just a div with the class of bottom-trim.

[00:04:29]
And I've put this in just before the container so that my div will stretch all the way across the page. So we have this now separate div called bottom-trim that's going to sit as wide as the footer itself, not as wide as the container, and that is where we're gonna place this background image.

[00:04:46]
So let's go to our stylesheet, and we are going to go into our footer styles, which we have to find. Projects, contact, and our footer styles. And what I'm going to do is add to this a class called bottom-trim. And here, I'll put in my background image, which will be url ../img.

[00:05:25]
And I have a slightly different image here for this one, fem-featured, -bottom.png. Background-repeat. Repeat-x. Background-position: top center, and height: 16px. Now, 99% of the time, you should never use height in your designs. But in this particular instance, we have a div that has no content inside of it.

[00:06:11]
The only way in order for this image to show is if we give it a little bit of height artificially. And why 16 pixels? That happens to be the size of the graphic. So we're making the div as tall as the graphic, make sense? That's why we're doing that.

[00:06:25]
Okay, and then padding-bottom: 4rem. And now when I save this and I go back to my webpage, We will see here this wild and crazy dashed thing going on here. What happened here, okay? Well, what happened here is my footer itself has a big padding on it. So that padding is pushing this jagged design away from the edges of the screen here.

[00:07:02]
So what I'm going to need to do is add a couple of extra styles for that. And I'm going to say .project + footer. So in other words, any footer that its immediate sibling comes right before it has a class of project, which would be our featured section, that also has a class of project.

[00:07:28]
padding-top: 0. Okay, so if we change that and refresh the page, now we have our jagged images here. We need to remove the one that was here before. And I think that that one is, where is that image located? And that one is on our section-featured project. So what we're going to do is, Here in our HTML, Back up here, we have our class of section-featured project.

[00:08:18]
What I'm going to do in my CSS, so we have this class here called section-featured. I'm gonna copy it. I'm gonna paste it. And I'm gonna make a change. Instead of calling it section-featured, I'm gonna call it project. Because it's later in the document, it will override what comes before, and I'm gonna set this up to not have this background image.

[00:08:47]
So it's going to have just a single background image. Okay, and when I save that, and now go back to my webpage. There it is without that background image. How cool is that?