Optimizing CSS for Multi-Page Website Styling

So far, we've been embedding our CSS into a page. And that is the way you do certain things. Like if you were doing a single page website, you could embed your CSS.

If you're doing HTML emails, you would embed your CSS using the style tag. But when it comes to an entire website where you have other pages, embedding your CSS says, this CSS code can only affect this page. And you would have to repeat that in every single page, which would not be very efficient.

We'd like to keep our code dry. Don't repeat yourself. We don't wanna repeat our code, not only because that would be a waste of download, having to repeatedly download the same code over and over again, but also it would be very tedious to update anything.

You'd have to go to every single page making a change over and over again. So what we wanna do is we wanna share all of the CSS with multiple pages. And then we wanna make some changes that can affect the entire websites.

If I want to take all of this code and share it, I can put it into a CSS file. Now here I've already created the CSS file, but if I wanted to recreate this here, I could just delete this and move that to the trash. I could create a new file here and simply call it main.css. There we go.

Now it's a CSS file. It's the extension that lets us know what kind of file it is. We've got our web pages with our HTML files and CSS is cascading style sheets.

So where we're gonna put our CSS code. So I could take all of this code here and take all of this stuff. I'm gonna hold shift, click on the bottom to select everything in the style tag.

I do not want the style tag itself. I just want everything in the style tag. And I'm going to cut that from here, delete the style tag, which we no longer need and come back and paste this.

All right. Now we've got all of our CSS in this shared file and I'm very importantly have to save this file. Now, before I save this file, let me just preview this before I save it.

We're gonna still see it with the CSS just so we can see how we're gonna lose the CSS once we save these changes. So I'm gonna preview this in my browser here. So here we see it with our styling.

We see it with our colors and everything. Now I'm gonna go back and I'm gonna save this change. Save.

As you can see, the dot went away and now I know that I've saved that. And when I come back, now watch when I hit refresh, we just lost all the styling. So our nav looks different, our colors are gone, our fonts are gone, our sizes, everything we did in CSS is gone, but not to worry because we just moved the code over to here and now we need to link this file and all the other files in our website.

We need to link to that CSS. So this is something that goes on in the head just like we had the style tag. Now the style tag is for putting actual styles.

If I want to link to this CSS, I have to put a link tag for this. So it is the link tag and using Emmet, I could just type in link and then hit TAB and I get the link, the relationship, what kind of file is this? This is a style sheet. Ahref, where's the reference? Which file are you referencing? In this case, because I'm in San Francisco, I can link to that with a relative link just like we use relative links for linking to other pages or linking to image assets.

I could just say the file name because it's in the same folder. If I put it into a CSS folder, because maybe you have multiple CSS files, I would have to go, I'd have to say CSS slash. That would go into a CSS folder if I had that, but I don't have a CSS folder.

I just have one file and it doesn't have to be called main.css. It could be styles.css. There's no special name as long as it's a.css file. And now I have linked to that and it's as though it's going to import all of that CSS right in this place as though the code lives here through a style tag. So I'm going to save the change here, come back to my browser and all my styles will come back as though they live in this page.

But because they aren't embedded into the page because they're in a shared CSS, I can now take this same link and I can go to all the other files and I can link those as well. See this page here, if I preview this in my browser, this does not have any of the styling that we've done. Now it has all the same formatting, done the same way.

We have the same nav, header, main, footer. Everything about the structure is the same. We basically, when we originally did this, we knew what we were going to do in San Francisco and we built the San Francisco page and we just saved as another page and just swapped out some content, put a different image, put in some different text here.

And so I'm going to paste in my link to my CSS and save that. And when we come back and hit refresh, boom, this page looks the same as the featured location. Yes, it's not quite zoomed in here.

Let me go back to this page, I'll zoom in just so I have the same zoom level here. So that looks the same as this. There's no difference in the styling because they're sharing the same exact styling.

Nice. Now, just to continue on here, I need to link all of the pages. So not just about, I also need contact, making sure that if there's a little dot up there that indicates unsaved changes, I make sure I save that change.

The homepage needs it, paste that in. Tor packages, paste that in. Now in this case, I do also have some embedded styles here.

There's some things that we haven't learned yet. That I wanted to do in this page. So you can actually, you can link to multiple style sheets if you want.

You can also have embedded styles as well. It's not that you have an either or. So this has some styles that are unique to this particular page.

We're gonna have all of our shared styles, but then since these things only appear on this page, we can embed them on that page. We don't have to share everything if we don't want. And then finally travel planning here, paste that in.

Now all of them have the same exact link to the same exact CSS. And so that means that all of these pages, assuming they're at the same zoom level here, they're all gonna look the same. Now I can click around my site and look, they all look exactly the same.

And if I make a change, that's going to affect all of them the same. I only have to download the code once, and then that is stored in the browser's cache. So it caches the file.

And that cache is temporary memory that speeds things up. So once the first page loads and it stores that CSS file, then once you go to another page, it already has that CSS loaded in cache and it can just pull from that cache. It does not have to re-download that.

So each new page, it's only downloading the HTML, it's not having to re-download that CSS, it pulls it from the browser cache. So it actually speeds up the website as well by sharing the code across pages as well as making updates easier, which is really the main reason that we want to do this is yes, we optimize the downloading of the site, but also it makes it much easier to change globally across multiple pages. I want to center this nav bar here.

And this is why we actually left this for this time because I wanted you to see that we can globally change this across the entire website. Now, all of this is text and these are inline elements. So let me go to the CSS file here.

And just in case you don't remember, from when we did this in a previous exercise, we set these list items to be display inline, so they're next to each other. And also the links inside are also inline elements as well, even though they're inline block for the better box model. These are all inline elements.

And inline elements should be thought of kind of like text. And if you want to center text, you would center the container of that text. You don't center the individual item.

Like I can't say center the word revolution. I can center the whole paragraph by saying the paragraph is centered, but I can't go to a word and say this word is centered. And I'd have to center the whole paragraph.

So I can go to the container of the nav, which is the nav tag itself. Looking at any of these navs here, notice there's the nav. If I say center everything in the nav as a text aligned center, all of those inline elements will follow that text alignment.

So I'm gonna go and create a rule. I don't right now have a rule for the entire nav. And if you're looking for styles, as we start to get more styles here, you might be looking and instead of having to scroll around being like, I wonder if it's there, did I miss it? You can use the go-to symbol, go to symbol in editor here.

Command shift O or on windows control shift O. And then you get a list of all your rules. And not only is this a little bit easier to look at, but you can also start typing, N-A-V. And you'll see all of your nav styles.

So here I do have a nav in here with other things like header, main, footer, but I don't have one by itself. I have one for lists in the nav, list items, and I'm using my up and down arrow keys here. So this is a really great way here by going into go to symbol in editor and then starting to type, like if you want to find your H1 style, here's one for all H1, H2, and H3.

And then when I hit my down arrow to navigate this little list here, I can go to this and I can hit ENTER or return to actually go there. If let's say I was at the top here and I just wanted to go peek at something else and come back to where I am, when I go to go to symbol in editor, let's say I want to find something in learn more. So I go learn more and maybe I just wanted to see how much padding was there.

If I hit escape, I go back to where I was. So that's really useful for go to symbol. I don't have any nav rules here, although I do have other things around nav, like things that are in nav.

So I may as well add the other nav rule here to say, yeah, let's take this and center everything in it. Or if I want to just keep using the list, all the list items are in the list, I could also just do text align center here as well. So I wouldn't have to create a new rule.

I could just say text align everything in the list. That would also work. And now when I hit refresh, oh, look at that.

So I made a change in the shared CSS. It not only changed this page, but also this page and this page and notice they all changed. Awesome.

So one change affected all the pages in my site. Let's do this again, but for the logo in the header. It is also an inline element because images are inline elements.

We can center everything in the header and that will center the logo inside. Let's go back to our code here. And actually, if you don't remember the setup here, so here is a link, which is an inline element.

So links are inline by default. Images are inline by default. So everything in the header is inline.

If I center everything in the header using text align center, that'll center the logo as well. I'm gonna see if I can find a header rule. So I can say go to symbol and editor, type in header.

And here I do actually have a rule for header. So I'm gonna add it to this and I can say text align center, save that, come back to my browser, hit refresh and once again, every page in the entire website, including the homepage has all been changed. So this globally updating through our CSS file is really powerful to be able to change the entire website.

Now, one kind of final change here for the nav before we move on is something I don't see here in Chrome because of that recent change in Chrome. I don't know if this is a bug or if this is a permanent change, it's going to remain. So, but I can't see the difference between visited links and regular link colors.

So I wanna preview this in another browser where I can see that difference. So I'm just gonna go to one of my HTML files and I'm gonna preview this in another browser, any other browser. So Firefox, Safari, Microsoft Edge, which Microsoft Edge is actually based on the same rendering engine as Chrome.

It's basically like Microsoft Chrome, essentially. I'm gonna use Firefox here and I'm gonna zoom in so you can see this a little better. So here notice that I've been to this page, so it's grayed out.

Once I click on contact here, notice how it's grayed out as well. So the gray means visited. Now I'm fine with that with other things in the site where once you've clicked the link, it grays out because you've been there, but I don't like that for the nav.

I want the nav to be consistent where it's always the same across all of the links that are here. I always want them to be blue. So I just want them permanently blue, but just the links in the nav.

Like other links here, like these, I'm fine if I've already clicked on Alcatraz, I want people to know like, oh, let's gray it out because you've already been there. You've already looked at Alcatraz, right? So I just wanna change the nav links. And so I'm gonna set all of those visited colors in the nav to be the same blue as a regular link.

So I'll go to my CSS here and I want to find those nav links styles. So once again, I can go to symbol and editor, type in a for anchor tag, and here is the nav a down here. So these are my links that are in the nav.

So I wanna do the visited state for those links. So I'm gonna do the same nav a colon visited, which is a pseudo class, a class added by the browser to say, let's style the visited links, only visited links in the nav. And I wanna make them the same blue color that we've been using.

So color and let me just copy the color here, which is the same blue that we're using elsewhere for our regular links. And that way the visited links will match the regular links. And there we go.

Now those match. Now it doesn't really matter which page I'm on here as I click around, they are all the same color, which is good. I do want to make, oh, wait a minute.

A moment ago, we did have a hover. We had an orange hover and now the hover is not working. I wonder why.

This was part of the plan. Let's figure this out. I'm going to right click and inspect this.

And I'm gonna put the dev tools over here on the right, dock to the right. And I'm gonna make these dev tools bigger. I'm gonna hit command plus to make those bigger.

And these look very similar to the Chrome developer tools. Very similar. We have the layout tab here where we can see this box model indicator.

We have our list of styles. We have our little picker to pick elements so we can hover over things. And it again, highlights it over here.

We can right click and inspect same way as we do in Chrome to bring up the dev tools. Actually, I'm gonna make these just a little bigger even so you can see them better. All right.

Now when I look at these links here, so I'm gonna select one of these links. Notice that at the top here, we have some styles and then the styles go down. So what's with the ordering here? First of all, I see the file that contains that rule.

I see the line in the code. So is this the 31st line, 65th line, 71st line. Sometimes code order matters.

If two rules have the same specificity, then the code order matters. But code order only matters when it's the same specificity score. If something is more specific, that will always win regardless of your code order.

The most important thing in CSS when determining what wins, what gets the color in this case. Is it the hover color? Is it the visited color? Something's got, it can only be one color. So what gets that color? The most specific rule wins.

If we have two rules that are the same specificity, only then does code order matter. So the issue here is that my hover state has a different specificity. So back here on my CSS, I'm gonna hit Command F for search or Control F on Windows.

I'm gonna type in hover here. That's another way you could find it, but actually finding things like this, it's actually easier to go in, say, go to Symbol and Editor, because you can see all these. And here, when I type in hover, you can actually see the whole list to scroll through.

I only have one hover style. So while you can do a find using this go to Symbol and Editor, it's actually nicer. So I only have one rule here for hover, and that determines this orange color.

But let's look at the specificity for this. The specificity is 11. You get 100 for an ID, 10 for each class, and one for each tag.

So the A, that's a tag. So that's the specificity of one. But then the class, that's a pseudo class, that gives us 10.

So 10 plus one is 11. So this is an 11 score. But we just added another one for nav visited.

So let me go to Symbol and Editor, type in visited, and we got the nav visited here. This is a score of 12. The other one was 11.

So a 12 beats an 11. So this is actually winning out, not because of code order, but because of specificity. And because this is more specific, the hover cannot work.

But what I could do is I could increase the specificity by creating a hover rule with our orange color. And I don't remember the orange color, so I'm gonna just go back to my hover rule, copy my orange color, go back to this, and I'm showing you in the menu, but normally I would do this through the keyboard shortcut. And I could go back to my visited, and I can use that color.

Oh, sorry, this is the hover. There. So what I've just done is I've increased the specificity to say in the nav, I wanna hover, and I need to at least match, if not beat the specificity of this.

It's okay to match it in this case, because now that this comes after this, this will win over this one because they have the same 12, and in that case, when it's the same specificity, the later rule wins over the earlier rule. And now when I hit refresh, now notice my hover works again. So main takeaways here are specificity is really important.

Check out the specificity score. And that's actually how in your DevTools here, how it determines which rules on top. So the top rule is the more specific rule.

And actually it also, in Firefox, shows you the specificity there as well. It's either the more specific rule, or if two rules have the same specificity, then the one that's later in your code would apply more. So it puts those rules that apply at the top, and then those might override the less specific rules that are down below.

So it kind of ranks these here in order of specificity. So like this one's two, this one is 11, this one is 12. So this is most specific, less and less going down.

Here's one for all links, that's only one. So it goes down in specificity. Or if two would have the same specificity, the later rule would appear up top here.

That's why knowing the line in your code, like that starts on line 71, is important because if you have two rules that are of the same specificity, the later one would win. If you have two rules that were the same, then you would see maybe one is 71, and maybe the one below would be on 70, or maybe 65 or something like that. So the DevTools and vs. Code kind of help you in that same thing.

Also, if I hit TAB here, notice my focus is also not working because previously when I did the hover, so let's go back to the hover here. Notice that I had done hover and focus. And see how quick that was when I did the keystroke to just typed in hover, right? Or if I'm looking for focus, I could type in focus.

So even though I was showing you this here, remember Command Shift O, or Control Shift O on Windows. And because I did focus there, I wanna add focus as well to my more specific rule that I just added down below. So I'm gonna go to the nav visited.

So quick to be able to navigate around your file using that keystroke. And I'm gonna go to this hover, and we're gonna do the same thing for the focus state. The focus is when we're keyboard navigating using tab, or if other browsers require a different keystroke, it might be a different keystroke here.

I'm gonna save that. And then now I can hit TAB, and now we get that orange color there as well. Now we get it for hover, and we also get it for the focus when I'm tabbing through those links.

All right, good stuff there. Now I have something that I can globally change throughout my website using my shared CSS. I fixed my nav.

Last little touches here. The whole page actually has some margins on it. We never remove those margins.

So my little border here doesn't go quite to the edge of the page. So I wanna remove those default body margins. There is eight pixels of body margin by default.

We never removed those. We're gonna do that now. And I already have a rule for body.

So I'm just gonna say margin zero to get rid of those. So that just gets rid of that little extra space that we didn't want. Now that we are also linked to other pages, we can see on this page right here, this is actually a normal bulleted list, which we want to be a normal bulleted list.

This is, if you remember when we did the descendant selector for the nav. Let's go to the nav list. Remember how we said, don't remove the bullets from all lists, only remove the bullets from lists in the nav.

We did that because there's gonna be other pages that have lists. The only thing is we never styled that list. So notice how there's more space here between these lines.

And so we're not using the same line height for lists like this, because we never styled those. I do have a rule for paragraphs here. So I have a line height and also some extra space below each paragraph.

And these list items, they don't have a lot of space between them. I'd like there to be the same space between them as I do for my paragraphs. So I wanna apply this not just to paragraphs, but also to list items as well.

So look at the same nice line height, the same margin between them, and then we get that nice same styling. Now it looks much more like the paragraph. So it coordinates with everything else, which is nice.

Also, other things we can do are, let's say we want to, on pages like here, let's say we wanted to put a rule up above our heading twos. So these are heading twos. Maybe we wanna separate them a little bit more.

We can go to our heading two rule, which is right here. And I could say, let's put a border on top of that. So border top, maybe just a thin one pixel solid gray line to add that border.

Now that's really close. And if we think about the box model, keep in mind that border, there's space inside and that's padding. So I could put some padding on the top of this.

So I could say padding top, and maybe I wanna do like 20 pixels. Now I have some space there, which is good. I like that.

But maybe now I want there to be even more space above because now maybe I think that's too kind of equidistant here. I want some even more space above those. So that would be margin, which is outside the border.

So I could do top margin, which would be space above that. So I can make that even more. So I could say margin top.

Maybe I do like 40 pixels for that. Now I have even more space, really helping just to separate those sections. All right.

So there we go. Go ahead and try out this in exercise 4C in the book.