Introduction to Using CSS Styles
Now that you know what an HTML document is, let's get into the role that CSS plays in building out websites. We're also going to build out our structure for the website that we're going to build throughout this course.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
  • Complete the Exercise
Video locked
This video is viewable to users with a free Dev Camp account

I'm going to open up the code file right here, and I still have it open. If you open it up in VS Code or whatever text editor you're using, we're going to talk about CSS and how you can implement it. CSS stands for Cascading Style Sheets and there are three main ways that you can use CSS code.

The first is going to be inline, the second is going to be what is called embedded, and then the third is imported. We're going to use all three just so you can become familiar with them, but then I'm going to show the best practice.

Inline means that we are going to add a style directly to the element. If you come and you have this H1 right here. If you type style, then inside of here you can type some type of style rule. So I'm going to go with the basic one and just say color:, and then we can give this any color that we want.

I'm going to say color: red;, end it with a semi-colon. Now if I hit save, what is going to happen here, if I come back, hit refresh, you can see that, that is red.

large

Now, we're going to be using the developer tools quite a bit so let's start getting used to that. If I right-click on that element, click inspect, you can see that it says the element style is red.

large

So if I wanna change this to blue, now you can see the color has been changed to blue and the element itself has the inline style of color: blue.

large

So that is how you can use an inline style. Now I'm going to comment this out. The way that you can comment in VS Code, is if you're on a line of code, you can type control and then the slash character. So it'll look like control + /. Type those key bindings in, on whatever line you're on, and this will add a comment.

large

Now you also could just type this out manually, so you could just say <!--some content -->. What a comment is going to do is it's going to remove it from the page. So if you come back here, hit refresh, you can see that it's gone.

large

It's still in the code so you can see right, it's commented out. It is still in the code, but it's not going to be shown to the user. The reason why I'm doing that is because I want you to be able to see all three versions on how you can import and work with style sheets. I don't wanna delete them so you can kind of compare and contrast.

Now let's come down here, and I'm going to just copy that line of code. Uncomment this out. I'm going to remove this entire style rule. Now that is gone. We're back to just having an H1.

If I come up into the head tag here and now type <style>, what this is going to do is it's going to give me a beginning and an ending tag and we can embed style here. So any time that you want to select an item on the page, then you can just grab that element.

Right here, I want to grab the H1 tags, so I'm going to say

<style>
    h1 {
        color: red;
    }
</style>

Then in curly braces, I'm going to add a style. Here we'll go with our same color red. Once again, hit save, and now if I come back, hit refresh, you can see we're back to it saying Hey from HTML.

large

What we're doing here, and I'm walking through a few different concepts here all at the same time, so if this is confusing, I definitely recommend for you to go through it a couple of times just to familiarize yourself with it.

Because we are getting here, not only to embedded styles but the only way that an embedded style works is to work with CSS selectors. Now selectors are going to be something you're going to be doing throughout this entire course and for pretty much every website you ever build, you're going to have to use selectors.

We're going to walk through them quite a bit in the next set of videos, but what we have here is we're saying that we wanna have every H1 heading to have the color red. That's a reason why it was able to know that Hey from HTML should be red without us having to put inline.

The reason why this is really helpful is, imagine that you have some kind of scenario. Let's add another style here. You can add as many as you want, so if I want to say text-decoration, say underline. This is going to underline this text as you can see right here.

large

The reason why you want to go with this approach is, imagine a scenario where you have multiple headings on the page. You could have all kinds of different paragraphs, and you want your headings to all to be the same.

What you're able to do here is you're able to say, "Okay, I want to have every H1 to have these styles." If you use inline styles, you'd need to type this entire line of code every single time that you called the heading. That's not very scalable.

Imagine a scenario where you want to change the colors. So you wanna change it to blue or some other color, then what's going to happen is you're going to have to go and remember every spot that you typed that code and then change it.

As you can see here, if I just copy this and say Hey from HTML again, hit refresh, you can see that the same style is applied right here. This is a much more scalable way of doing it.

large

Now, so far we've gone through two ways, we've seen how we could use inline styles, that's where we add the tag directly to the element. Then we saw how we can use embedded styles, that's where we have more of this abstract concept of a style tag in the document.

Now it gets a little bit trickier when we go into the third option, which is to have external style sheets. The reason why you need external style sheets is, let's take a real-world example.

Say you're building out this website, which we're about to do. If you wanted to make some kind of style rule, such as the hover effect right here on the navigation items if you wanted to have that same effect and you wanted it to be on all of these other pages like we do right here.

If you use embedded styles then what that would mean is that you'd have to literally copy and paste all of the style information and all of that code into every single page of the entire site.

What this would mean is inside of this style tag, you would have literally thousands of lines of code all right here, and it would be on every single page.

large

Then, kind of like the issue we had with the inline styles, what you'd have to do is if you had to make a change, so say that you wanted to change that kind of gold color to something else, you'd have to go and make the change in every spot in every file in your project.

Now, this is going to be a relatively small project, we're only going to have four pages. Imagine a scenario where you have hundreds of pages. That would start to get very unwieldy, very quickly. So instead, we have a third option, which is called external style sheets.

In this case, I'm going to be able to keep these here because the way that you select the items is going to be exactly the same and as we're doing with embedded. It's only how we're defining them that'll be different.

I'm going to comment all of this out. Once again, if you're new to VS Code, if you wanna comment out multiple lines of code, you can just select all of it and then hit the control + / again. That will comment all of that out.

large

Now, our third option of having our external style sheets, you're going to use a link. This is going to be link, a self-closing tag. If you're using VS Code, it should do all this for you automatically. If you type in link and then tab, this is going to give you a stylesheet.

large

What our href stands for is it's asking for a reference. What it means is it is saying, "I need you to tell me where to go find this other file." For here, just for ease of use, I'm just going to say styles.css.

You give the full name to the file, hit save, and now we're not going to have any styles. If I come back here and hit refresh, you can see we don't have any styles. Technically there's going to be an error if you click on console.

large

You can see right here where it gives you this error. What it's saying is that it tried to go find this styles file, and it couldn't do it. We're going to fix that now. If you click on this little explorer here, then you can see that in the open editor we have the index file and we also do not have a folder open.

Let's create a project folder. I'm going to click open folder. We're here on the desktop, and now let's just right-click, say new folder and we're just going to call this HTML-CSS. Let's open this up, click on select folder, and this is now going to open up a project.

Now we wanna put our index.HTML file in there, so if you go down into the explorer or if you're on Mac you can go into the finder and then go to your desktop. You can just click and drag the index file directly into our new project folder. You can see it's right there. Now click on new file and say styles.CSS.

large

In here, let's use that same exact code. So h1 and then inside of it we'll say color: red;. Then let's go with that text-decoration of underline

h1 {
    color: red;
    text-decoration: underline;
}

Hit save, and now let's go back and see if that worked. If you come back, hit refresh. Oh and actually I made one mistake. Right here, you can see it's still looking for this file on the desktop. This is a good mistake to make because what it means is it'll just kind of reinforce understanding of how the path system works.

The way the browser is using this file and the way it's reading it is it's going into the hard drive, then it goes into the user's directory. Then into one I have called devCamp, then it goes to the Desktop then it tries to find this file. It can't do that anymore because we moved the file.

large

If you hit control + o and click on html-css, then click on index and open it up. Now you can see we have our file back again, and the styles are being applied.

In review, we now have our index file using an external style sheet. So instead of having to put this code in every single file of our entire project, what we can do is we can just call this one file, or you can even call other files, and then import those directly into any other page of your project.