FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Your First Stylesheet

[SOUND] In a previous episode, we noted how, by default, the browser will make anchor tags blue if you have never visited them before. So let's learn how we can override it using the most basic way, the way it was done a long time ago, and that's by using an attribute called style. So, just as we can have a href attribute or a target attribute for anchor tags specifically, we can also have style tags that will work on any of the elements that go within the body. So let's try it now. style equals, and then quotations. So notice it follows the exact format. The name of the attribute is style and the value is what? And this is where we get to use CSS. And CSS takes a specific shape of property name and property value. So in this case, if we want the color to be yellow, why don't we do color followed by a colon, then the value, yellow? Now, what we have here is considered a statement. Get the color, make it yellow, name colon value, and then we specify that we are finished by ending it with a semicolon. So let's save that. And now, if I come back and reload the page, this text is now yellow, and that's a terrible color. Please don't ever do that. But let's say we wanna make it black. Refresh, now it's black. Let's say you come from a print background and you're used to using maybe RGB values. Okay, I can do that as well. rgb, and this means red, green, blue. So let's say 100 red, 200 green, 50 blue. Reload the page, and now we get this nice green color. We also have the option of using what's known as hex values. So that would be a six-digit sequence that references a specific color. So, for example, if I wanted a grayish color. I could do e3e3e3. And notice that I prepend a pound sign to specify that this is a hex value. Now, if I load the page, sure enough, we are referencing it like so. So, there are many ways that you can specify a color, and it's as simple as using the color name, or if you need more control, do rgb. There's also something called rgba, which you're not quite ready for yet. And then you can use a hex value. And then there's hsl. There's lots of different ways. I encourage you to research them on your own, but for now, stick with simple declared colors. Notice how this anchor tag has an underline. What if you do not want the underline? Well, that is referenced by a property name called text-decoration. text-decoration from the browser is set to, and if we look here, here's all the options that are available. It's set to underline by default. If I reload the page, nothing will happen because that's already the default. If you want to verify this, once again, right-click or Control-click, Inspect Element. And now if we come to the right area, right around here, you can see default stylings that are in place. So, what we see right here is It is picking these values up from what we've specified right in here. But we can also review anything that's set by default. So, notice user agent stylesheet. This is the default style sheet, text-decoration of underline using this selector, and you'll learn about selectors shortly. Just note that because it's crossed out, that means it was overrided by something else, and this is the cascading nature of CSS. You can override previous values so that you can be more specific. In this case, we've overwritten it with our own, so that takes precedence. So now we know we can override the values, so let's change it. And now we're going to say text-decoration should be none. I don't want any kind of decoration. Now let's view it, and there's no underline. The first thing you may notice now though is very quickly with two properties alone, our markup is starting to look really messy. And this gets away from the basic idea of using markup to describe our content. We're no longer just solely describing the content. We are styling the content as well, and there should be separation. There should always be separation, and that's why it's better to create a style sheet. We can create a style sheet by creating a new file, and we will give this a name of anything we want. I'll call it style. And to specify that it is a CSS file, it needs to end in an extension of not html, but css. Now, I will take everything we've declared here. I'm gonna cut it, clean this up, and if I paste it in, let's see what happens with that alone. When I come back, reload the page, and now it's no longer taking effect, and why? Well, we've created a new file, but how would the browser possibly know that we want to pull in the styling from this file? And it doesn't. We have to link to it. So, would we link to it within the body? You could, but why would you? It's not going to be displayed on the page. It makes much more sense to link to your CSS files, maybe your JavaScripts, from the head. So we'll do that. We use a link element to link to a file. Now, we need to tell it what's the relationship to this file. It's a stylesheet that we're linking to. Next, where is it? So we're going to use that familiar href property that we learned with anchor tags. The href is going to be style.css. It's in the same directory, so I can reference it simply like so. Now, there will never be text within the link, so we can self-close it the way we did with meta tags. Let's get rid of this and self-close it, or again, it's just okay to do it like so as well. Just be consistent. If I load the page once again, it's still not taking effect. Why is that? Well, let's view the source and figure this out. When I view the source, and you can link to specific pages, so notice even though I'm in the source, I can view the HTML page that we're not linking to correctly. So now, let's see if we are picking up style.css. Click on it, and yes, it is pulling in that file. So, for some reason, it's not picking that up. And the reason is, while we can use properties like this specifically within an anchor tag, we can only do so because it's implied what the styling is associated with. When you have style within here, it's implied that we're styling the anchor tag. Within a CSS file, we need to be a little more explicit. In this case, if I want to reference a tag name like anchor tags, I have to u a followed by a curly brace, and then followed by a closing curly brace, like so. And now, I can take everything here, paste it in, and again, always indent for good practice. So now, what we're saying here is, find all anchor tags, any element that has a name of a. In this case, it's only referring to this right here. Then, execute anything within the surrounding curly braces. And here we're gonna get the color, make it red, text-decoration, no underline. Let's try it now, and ta-da, now it is taking effect because we have explicitly stated what the styling is associated with. Now, why don't we add a heading tag? Keep it like so. Reload the page. And now, let's say I want to change the font of the heading one tag. Okay. Well, we can do that, not by doing the style attribute. Even though you can get away from that, it's a very bad practice. I don't want you to do that. Always when you style something, reference the associated style sheet. And now I'm gonna say, find all heading one elements and execute anything within the curly braces. In this case, if I wanna change the font, I can type font. And if you use a good editor, lots of times, they will give you code hints. So if I say font-family, you can see here's all of the choices. And you'll learn a little bit more about what fonts to choose in a future lesson. Just know you can't always use any font that's available on your computer because it likely won't be available on the computer of whoever is browsing your website. So there are HTML-safe fonts that will be available on a huge, huge majority of all computers. In this case, I'm gonna specify Helvetica and a fallback. And that means if the user does not have Helvetica, fall back to Arial. And then there is a base value called sans-serif, and that will refer to without getting into it too much, a very specific kind of font. However, a good tip to know is sans-serif will automatically use one of these fonts if it's available as the default. So, what you can do, if you want, is set this to sans-serif, and make sure you end it with a semicolon, and it will automatically use the most appropriate sans serif font. I'm gonna save it. And now, if I reload the page, you can see in this case, it seems to be using Helvetica. So, congratulations. You've gotten your first dose of using CSS. You can do some amazing things with CSS. It's much more powerful than many might think. In the next episode tomorrow, I wanna teach you a better way to organize your folder structures, because already things are getting a little bit confusing, so we'll do that in the next episode.

Back to the top