Astro Crash Course #4 - Styles

All right, so now we've got a few different pages and a layout file which wraps them all. And now I want to move on to styles. So there's lots of different ways we can add styles to an Astro application. We can add them into components directly using a style tag below the template itself. So we can do that in pages or the layout or reusable components that we'll see later. Or we could use an external stylesheet which we could either make in the source directory somewhere then import it as a module into say the layout component or we could make the stylesheet in the public folder and then link it uh from the layout in the head instead. You could also use external libraries like Tailwind as well. In this course we're going to just focus on using style tags within the components themselves to keep things simple. But there is something really important about how these component styles are handled by Astro when it comes to the scope of them. So, we'll talk about that shortly as well. For now, I want to try adding some simple styles to the homepage. And currently, the only thing we can style on this is an H2. So, let's try styling it. So, I'm going to come down here and add a style tag at the bottom of the components. And then inside these style tags, I'll just add an H2 style by giving it a color of red or something just so we can see that this works. Then, I'm going to save the file. Okay, so that has worked. the H2 is red. But if we go to the other pages, then the H2 isn't red. And that makes sense, right? Because we only added the style tags to the homepage, not the other ones. So, what if we added the H2 style to the layout page instead? Would that style then be applied to all of the pages that use the layout? Well, let's try it out. I'm going to cut the style and then come to the layout file and then paste it in right at the bottom of this file. And actually, I'm going to tack on an H1 to this rule as well, so that it styles both H1's and H2s to be red because we've got an H1 in the layout file up here. Okay. So, then I'm going to save it. And in the browser, we can see that first of all, the H1 is styled red as it should be because that's in the layout component. But the style doesn't get applied to any of the H2 tags on the different pages. And the reason it doesn't is because when we add a style tag to a component, then by default, Astro scopes those styles to that single component and they won't be applied to any other component elements, even if they're nested within the component we add the styles to. So in this case, it's styling the H1 because the H1 is inside the layout file where we just added the styles, but it's not styling the page headings because the H2 tags are not within the layout component themselves. Now the way Astros scopes these styles to components is by adding data attributes to the elements themselves and then applying the styles only to elements with those data attributes. And you can see that if you inspect the H1 in the header. So if you find that H1, you should see that you've got a big data attribute which the CSS selector can then target when applying the styles. And that makes sure then that the styles don't get applied to the same elements in different components. So then that's how we add styles to components. And as we said by default those styles are scoped to the components we make them in. Now we can also override that default behavior by adding an attribute to the styles tag which is is then a colon and then global. And by doing this, we're now telling Astro that we don't want to scope these styles to only this component and we want to make them global instead and we want to apply them to every single component or page. And now in the browser, we can see those styles have been applied to the H2 in the different pages as well. And if we inspect one of these elements now, then the rules no longer have those data attributes applied to them and neither do the elements. So it's not scoping the styles anymore when we use that is global attribute. So then something I might do is apply some global styles in the layout component for things like link styles, page headings, wrappers, and all those things that appear on most pages throughout the site. And then as well as that, I can go into the page components and apply some more specific styles sculpt only to that page. Also, you could mix and match if you wanted to. In this layout file, I can have some styles which are not global and some styles which are global. So what I'm going to do then is get rid of these styles right here. And then I'll paste in some styles which I got from my course files. And you can see that the top set of styles are not global. So they'll be scoped only to this layout component because they only contain styles for the header and navbar which are only found in this layout and nowhere else. And then below that, we've got some styles for the rest of the site, which will be global. So, we're setting the font family of everything to Poppins, which we also need to link to, and we'll do that in a moment. And we're applying some styles to a content class, which is going to wrap the entire page content and styles some things within it as well, like the H2 and the P tags. Now, we don't actually have this content class used anywhere in the project so far. So, I'm just going to head to the page components now and add it in. Okay. Okay, so I'm just going to start with this homepage. And what I'm going to do is delete this H2 for now. Then I'll replace that with a div. And that's going to have a class of contents. So we just start this class, right? It's going to be a wrapper for our main content on each page. Underneath that, we'll do a paragraph tag. And inside there, we'll just do a little bit of Lauram ipsom. And then below that, I'm going to have an anchor tag, which is going to go to the books page. So the href is going to be forward slashbooks. And then for the text, we can just say, "Take a look at my reviews." All right. Okay. So down here, I also want to add some styles just for this component. So they're going to be scoped to this. And I'm going to paste those in down here. So you can actually see we've got this same content class and we apply this rule to it. So all this does is basically append this to the content class that we already have and it only applies it to this component. And also if we were to override any of these properties right here like the width or the margin then they would take precedence inside this component only. All right. All right. So we also style the anchor type that we've got right here. Again scope to this components and we give it a hover state as well to change the background color. Awesome. Okay. So that is the homepage done. Now, let's open up the about page. And again, I'm going to replace this with a div. And that's going to have a class of content. And inside here, we'll do the H2 again. And we will say about. Below that, we'll do a paragraph tag with some Lauram. And we'll do a little bit more on this page. So, Lauram 30. And in fact, I think I will do another tag, another Lauram Ipsum tag. Um, so let me duplicate this onto the next line. And we don't need any styles added to this one. So we'll save it. And in fact, if we go back, did I have a title for this? No, we didn't. So let's do an H2 again. And we'll say welcome right here. All right. So now, finally, let's go to the books page inside here. And all we really need to do for this is create a div with a class of contents. And inside there, we'll do the H2 again, which says books. And I think, my friends, that's pretty much it. We do need to do one more thing, and that is to import the Poppins font because we use it right here. And we can add that to the head up here. So, I'm just going to copy this now from Google Fonts, and I'm going to paste it in up here, like so. All right. So, we can see it right there. Now, I'm going to save this file and try this out. All right. And now, we can see all of those styles taking effect. And notice on the homepage the text is all center aligned because we added that style to the homepage content. But on other pages we don't have those extra styles. Okay. So now we know a little bit more about adding styles to an Astro project. Let's move on and talk a little bit about templating in the next lesson.