Lessons: 12Length: 1 hour

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 CSS and AMP

When writing AMP-valid CSS, there are a few rules you need to follow. We’ll go through what they are and add some styling code to your site in this lesson.

Related Links

2.2 CSS and AMP

Hey, welcome back to up and running with AMP. In this lesson, we're gonna go through some of the rules of what you can and can't do with CSS in an AMP page. And we're gonna add in some CSS and styling the page that we're working on. So the first rule that you have to know about CSS with an AMP page is you can only use inline CSS. You can't use any external style sheets, which is, it's a bit of an adjustment to try to get used to at first. And there are ways that you can help to make your workflow a bit more smooth so that you can still actually write your CSS in a separate document. And then have it embedded automatically in multiple different pages. We're not gonna go through that right now cuz it's a little bit outside the scope of what we're covering. But I'm gonna include some links in the notes below this video where you can go and have a look at the tutorial that can help you with that side of things. For we're doing here, though, seeing as we're just making one page. We're just gonna write the CSS directly into the head section. So that's the first rule of CSS with AMP. The second rule is that your CSS has to be really, really compact. It can't be any greater than 50 kilobytes. If you go and have a look at a style sheet from pretty much any well known CSS framework, you'll see that it exceeds that amount. So you have to be fairly frugal with the code that you write. You can still achieve a great looking page, but you just have to be really conscious of how efficient you are with your code. There are also a few things that are not allowed to be used inside the CSS that you write. You're not allowed to use a style selector, something that just applies a rule to everything in your page. You're also not allowed to use the not pseudo selector. There's a couple of others like that and I'll also include a link in the notes below to those rules so you can read up on them. But basically you're trying to avoid any type of selector or any type of code that forces the browser to do a lot of computation. So rather than using a style selected to apply a rule to your entire page, you'll only apply a style to the very specific things you need to apply it to. So you'll see some of that in the code that we're gonna be writing. All right, so next up, when you do start writing your code into your page, it needs to be racked with this style amp-custom opening tag here. So that has to contain all the CSS for the entire page. All right, so back in our index.html document. Let's start adding in some CSS. So underneath this boilerplate code that we added earlier, this is where we're gonna set up a CSS. So we're gonna add in the opening tag, which is just the regular style tag but with amp-custom included in there. Now with your access to this course, you should also have gotten some source files. And to help speed things along a little bit, there's some CSS in there that you can copy and paste for this part of the lesson. So if you download the source files, open up the directory inside, they'll look like this, and the file that you want is named General_styles. So as the name suggests this is just gonna give us some general styling for our web page. So we have a quick look through, you can see this is this really minimal sort of CSS that we've been talking about. There's only 129 lines of code but that's completely sufficient for what we're aiming for. So just copy all of that code and then paste it in between the style tags that you just set up. So now save the code that you've added in. And if we go back to our preview, you can see that we've got some basic coloring starting to show up. Most of that code you're only actually gonna see take effect as we start adding in more HTML in the subsequent lessons. Now at this point, you might also notice that we have what looks like an ugly error in the console here. In this case, you during actually have to worry about this error. If you see another error, then check your code and make sure it's okay. But all we have happening here is that our live server that Adam is spinning up for us is including a little JavaScript to help manage that live reload. AMP is seeing that JavaScript and saying, hey, you can't use external JavaScript. And you can see that's the case. If you actually go to the file in your file explorer, open it up in your browser. Turn development mode on and have a look at the console. Now there's no error. However, you'll remember I said in the last lesson, if you do try to just test your files in this way, just straight off of your hard drive, you're gonna see errors later when you start to go further into your development process for your page. So, you're still better off doing your testing through this local server. Just be aware that you are gonna get that one error. Get to know which error that is so that you know you can safely ignore it. If that error is really throwing you off and making you feel like you're not sure you're actually validating your code properly, then what you can do is use either XAMP or MAP instead. They won't have that live reload, but they will give you a local server that doesn't have any JavaScript on it. So you won't get any error messages there in the console. All right, so that's enough to get us started with CSS. We've gone over the most important rules that you need to be aware of if you want to make your page validate. In the next lesson, we're gonna move on to adding images. We're gonna go through how images work in AMP. What some of the benefits are of doing your images in the AMP way. And then we're gonna go through, and we're gonna add an image into your web page. So I'll see you in the next lesson.

Back to the top