Overriding CSS with Classes

[00:00:00]
>> So let's start here in the header and find my article. So what we need to do here in the header and in the intro, we know that the comment image was associated with that section with a class of intro. We actually wanna keep a lot of the styling that's associated with intro but we need to swap the background image out for something else.

[00:00:23]
One of the easiest ways to do this is just add another class. So I'm going to call this intro space stars, okay? So now I have two classes. So I have two classes that are applied here. What this means is that all of the class, all of the styles that have the intro class name will apply to this part of the webpage.

[00:00:46]
And now I can make some new class called stars and have styling with that, it will also apply. If that comes later in the document, then my star styling will override my intro styling. So that's the plan for what we're gonna do here. So here under intro, the intro section of my page, I can just continue on further down in that particular section and I'm going to add stars as my style.

[00:01:18]
I can give this padding I want the padding a little different than what I had on the home page so 4rem 0 6rem 0. And then I'm going to need to add my two background images. So because I'm swapping out my background image of the stars and my previous intro had the two background images the jagged background image and the comet.

[00:01:42]
Now I need to swap out both of those images here. The jagged one will stay the same, the stars image will become new. So background image, Will be url and this is going to be ../img/fem-featured-top.png, url will be ../img/ fem-stars-sky.jpg. And let me put on the word wrap here as well.

[00:02:41]
Okay. So one image is staying the same that's the femme featured top, the jagged image. I just have to redeclare it because I'm changing the other image. Then we can add my other styles here. So we have background-repeat, repeat, x, no-repeat and background-position and that is gonna be bottom center, top center.

[00:03:23]
All right, then if we save that and take a look at our web page, There's our stars. Yay, server hello that works. Because I had two classes and I had intro that had the comment came earlier in my stylesheet, stars came later in my stylesheet. So because of those two classes assigned to that same section, whatever is coming later is going to win in this particular scenario.

[00:03:51]
So the stars override the comment something deep and metaphysical about that I guess, okay. So then, A couple of other things that I'd like to do. I think that this text looks a little bit long, and so I'd like to shorten that up a little bit and there's an easy way to do that.

[00:04:17]
The style again is gonna be header plus article. So this is the article that immediately follows the header. So in other words, not all the articles in the document just any article that immediately follows a header element, max-width of 500 pixels. So that will give us a max-width on that text up on the top and that just looks better.

[00:04:44]
Now you can gaze into the abyss on the right side of the page, okay? Awesome, let's move on to styling the featured area. So here in my featured styles, Okay, so first of all, in my featured styles. I have an iframe with a video that's coming from YouTube and as we saw, by default, this video is very tiny, really, really very tiny.

[00:05:20]
There is nothing here in the YouTube code that indicates how big that particular video should be. So what I'm going to do is I am going to add to this a class of YouTube. Okay, so I add that here in my HTML. Now I have a class of YouTube.

[00:05:38]
And then in my stylesheet in my featured section here, just scroll on down to the bottom, before my media queries and I'm gonna add a YouTube style. Now, part of the issue with iframe's is that it is very hard to get these to scale in a responsive kind of manner.

[00:05:59]
But thanks to the aspect ratio, we are able to get this to scale here. So the way to set this up is a very cool trick for your videos. You can say aspect-ratio is 16 / 9 if you say 16/9 and it's all together, I think it doesn't quite work.

[00:06:23]
You have to put the spaces in as well. So, that's a pretty typical aspect ratio for a video so that's what we'll use here. We'll say width is 100%, okay? And then we can give it some space on the bottom, margin-bottom, 3rem. Okay, so now when we take a look at our web page.

[00:06:48]
We go from our tiny video to a nice big video, isn't that great? So pretty, okay. Now, the next problem that we have inside of our web page here in our featured section as we pointed out, we have all of this styling that looks so great on the homepage.

[00:07:08]
And it looks absolutely awful here on this inside page, all these figures and figure captions and all the rest of it. So let's use the same trick that we just used in the intro, where we had intro and stars as two classes. Here in our featured section, let's also have two classes we can call this.

[00:07:27]
Featured and project, okay? So in our HTML, We can go to our featured section here. So I'm gonna call this section featured and space project, okay? So that'll give me a class that I can use to neutralize some of this other styling. Now, in my CSS, what I can do here is say, make sure you're further down in your styling here after the initial styling.

[00:08:04]
We'll say .project, Figure remember it's set up to display as Grid by default, so we'll say display block, turn that off. And then for .project figcaption we can say background-color transparent. Remember transparent is the key word that means transparent [LAUGH] Take away all the color that I had there and just make it nothing.

[00:08:42]
Our color will be var black, And text-align will be left. Of course, these last two are overriding some styles we had earlier. We had set the color to be white. We had set the text-align to be center. Now we're resetting these to black and left. I am gonna press on at the moment and continue on.

[00:09:07]
Because we're gonna continue to make a whole lot of changes here and this is going to change.