Working with Layers

[00:00:00]
>> What I'd like to do next is, we're continuing work in the same index.html and style.css that we have been working with here in VS code. We've now been given a separate HTML and CSS file from our other developer friends. Maybe this was something we downloaded from online or maybe it is something that somebody else on the team was working on.

[00:00:23]
And we've been asked to integrate this HTML and CSS into our document here. So if you take a look at your file structure here inside of your folders, you will find that there is a file called addme.html. We're going to be working with that. And we have a CSS file that's called addme.css and so that is the HTML and CSS that we're gonna be working with here in this example.

[00:00:59]
And I always put on the word wrap. The first thing that you probably wanna do is, see what these people have given you. So let's just take a quick peek at what's going on, if we just open up addme.html in a browser, you'll see here that it's basically a card.

[00:01:19]
So we've been given a painting, it has some additional information underneath of it about that particular painting and it has a button that is going to take you somewhere else. This is not an HTML button, this is a link that has been styled as a button because when you click this you're gonna visit the two inch brush.com website.

[00:01:39]
So that's what we have here and we're being asked to incorporate it into the index.html page that we have. So how would we go about doing this? Well, first of all, we're going to start by grabbing the HTML that is relevant to us. And if you just take a quick look at what is here, you'll see that there's nothing special.

[00:02:04]
It just has a stylesheet associated with it. And the content is simply a figure in HTML figure element. So let us grab that HTML figure element, I'm going to simply copy it. And then you can close addme.html, we won't need it anymore. Here inside of my document, I need to place this somewhere, let's say, we're gonna place it inside of the article right here after the h1.

[00:02:33]
So I'm just gonna copy and paste, so there it is, great, let's Save it and let's look at index.html inside of our browser window. We look at that, you'll see that we have our webpage that we've been working with all along. You'll see that we have a card here, but of course, it's lost some of its styling along the way.

[00:02:58]
We had an inline style for the figure element. It said that the max width was 450 pixels, happens to match the width of that picture. Which is why it is this narrower width if we didn't have that there then we would copy and paste this in and it would stretch all the way across our browser window.

[00:03:17]
So that's cool, but of course, didn't bring in any of the styling. And since we haven't integrated the style sheet, none of that is a surprise. When integrating my addme.css file into my main style sheet style.css, there's a bunch of different ways we could go about doing this.

[00:03:38]
Clearly, we could copy and paste the styles from one end to the other and try to integrate them manually or we could keep these as separate stylesheets. I'm gonna walk you through this, keeping this as separate style sheets because I suspect that many of you will probably do something similar when working in your own environments.

[00:03:56]
And to do that, then I'm gonna switch over to style.css, and at the very top of style.css even before the root declaration here. What we're gonna do is, we are going to add the following code. We're going to add an add import statement, we're gonna import from our own file and we're gonna import what?

[00:04:25]
We're gonna import addme.css. So that of course is going to import the style sheet that's right there in our file structure, addme.css. And we are going to declare it as a layer with the name of addme because I'm super creative that way and reuse all my names. So we've now created a layer called add me inside of this style sheet.

[00:04:52]
And it will include this styles basically the styles from the addme.css inside of it. Now as of this recording, I am working with the most recent version of VS code for Mac. However, you'll see that VS code is very upset with me it does not like the code that I have just written.

[00:05:15]
And that is because, VS code has not been programmed to know about the layer specification yet or the code that I have put in here. It does in fact work but it'll look like I have written bad code and so you'll just have to ignore that error, hopefully in a month or a few months when VS code pushes out another update that will no longer be an issue.

[00:05:39]
It is good code, but it is cutting edge CSS, and so that is what we see here right now. Okay, so let's save that. And let's take a look at how our webpage is progressing I open up my HTML in my default browser and now what I have going on is, it looks a little bit maybe.

[00:06:06]
Better be button style is in fact present, but the text is pink, not white. No, I didn't write a button to look that way, that looks awful, but it was originally a purple button with white text. And you'll see here, the hover state works but the text inside of it is hot pink.

[00:06:28]
And now I have an interesting button looking thing down here at the bottom, in the footer. So there are styles here as well that are causing this link to be formatted like a gigantic button. So now we have to figure out what is going on with this. Also that is of course not the purple that I started with.

[00:06:48]
So what is happening? If we take a look at our CSS, I'm in my main stylesheet style.css here. We have declared purple to be medium slate blue. That is our purple here and in my CSS that I got distributed, I now have a purple that has a variable here that has a different shade of purple in it.

[00:07:16]
So these kinds of conflicts certainly arise if you have good developers who do better with prefacing these with some kind of prefix or something. Then maybe you won't run into these kinds of conflicts, but so somehow we're gonna have to fix this problem. The simplest thing to do here most likely is just to rename this variable.

[00:07:37]
Let's call it DK purple. So I've changed the name of my variable here. Now I need to make sure that I've changed the instances of it here inside of this stylesheet. So let us find where that purple is called. It's called here on the link, we need to change the name from purple to DK purple.

[00:07:56]
Okay, so if I save that now and I go back to my, Web browser here and I refresh, now I am using that dark purple that I originally had inside of my add this style sheet. And so that little problem is resolved. So that was straightforward enough to do.

[00:08:23]
The text color though comes from style.css, so let's take a look at that really quickly. So here inside of style.css, you'll see that we have a, any link is set to have this hot pink color that you see and use for all of the links. And since this style is not inside of a layer itself and since it is more specific, it is overwriting the white color that I have here inside of these links.

[00:08:56]
So that is something that we're going to wanna fix. The other thing that we have going on is that in our webpage, You will see that in the card we have aerial as our font and outside of the card we have trebuchet. So how are we going to resolve that as well?

[00:09:20]
Okay, So way that we can go about fixing this then, are probably as follows. Part of the reason that I put in a font in here is to remind you that when you're distributing your code and you call out things like fonts and colors and so forth, they might not match somebody else's branding.

[00:09:40]
So these are things that you might want to get rid of. If we got rid of our root with the variable of font here and in our stylesheet, maybe we have that same font here or maybe it will just call from our body here. We can just use inheritance to inherit that font here.

[00:10:01]
If that's the case we're gonna go with inheritance, then we should remove that call to that font here which is here on line 11. We can just get rid of that, save that. And refresh and now we're back to the correct fonts, but the problem with this white text is gonna remain.

[00:10:24]
So here in addme.css, we could make this more specific. We could add a colon any link, any hyphen link. That could definitely be a thing. We could certainly make it more specific by adding additional selectors here to the style, like putting figure in front of it, figure. And that might help some.

[00:10:56]
For some things, but it's not gonna help for all of them. So fortunately, by adding that figure in front of it, we managed to turn off the styling for the footer. We made it more specific to orient to the links that are inside of the figure, but the figure color is still pink.

[00:11:13]
And that is because remember that our layered styles are not gonna take priority over the unlearned styles and that's what we have going on here. We have an unlearned style that is hot pink, but our layered style is white. So this is just not a problem that we're gonna be able to resolve using the little tweaks that I've used so far.