So, now let's take a look at more efficient methods of adding CSS to a page.

In the previous lesson we learned that inline styles and

internal styles, while they get the job done and they have their use.

They're not exactly beneficial to us when working on larger projects.

Because we're not separating the content from the presentation and

depending on the size of our project it can make overall development and

maintenance quite difficult.

So instead of writing our CSS inside the HTML file the most common and

efficient way of adding CSS to a page is with an external stylesheet.

And that's because when we use an external stylesheet,

we can change the look of an entire website with just one file.

So let's see how that works.

So first we'll need to create a stylesheet and that's where we'll write our styles.

So in our workspace we'll create a new file by going over to File > New File.

Then we're going to name our file style.css.

And to keep our files nicely organize we want to save it in our css folder.

You can actually just click and drag the file inside the folder.

And don't worry about the import styles file just yet.

We're gonna get to that later in this video.

So the .css extension is what tells the browser that the file is a stylesheet.

So make sure you always add that .css extension to every stylesheet you create.

[BLANK_AUDIO]

So next we'll need to link the stylesheet to our HTML file and

we can do that with HTML's link element.

So we'll go over to the head section of our HTML file and

right beneath the title tag we'll create a link tag.

At the very least we'll need to add two attributes to this link tag in order for

our CSS file to link correctly.

So first we'll include the rel attribute.

And this is an important attribute that specifies the relationship between

the current HTML document and the link document.

So, its value needs to be stylesheet, because that's what we're linking to.

So this sort of tells the browser, hey, we're linking to a stylesheet right here.

And keep in mind that if this rel value is misspelled, so for

instance if we write stylesheets instead of stylesheet the browser will

not link to the stylesheet, so make sure that it always reads stylesheet.

So after the rel attribute we need to add an href attribute and

the href attribute is what points to the location of the CSS file.

So we know that the new CSS file recreated is inside the folder named css.

So we need to write the path to the CSS file as css/style.css.

So now we can save our index.html file, and go over to

our new style.css file where we'll write a few styles for some of our elements.

So first let's style the body of the page by

writing the word body followed by a space and a set of curly braces.

And inside the curly braces, we'll write text-align followed

by colon and a space, then the word center and a semicolon.

Right below that, let's style the h1 element.

So we'll write h1 followed by a space and a set of curly braces.

And inside the curly braces we're going to type font-size, followed

by a colon and a space then 72px and a semicolon.

And below that let's also write color colon space and the word white, semicolon.

Next, let's give our header an orange background color, by writing header.

Then, inside the curly braces, we're going to

type background-color: space, then the word orange, and a semicolon.

And finally, let's add styles to our paragraph by writing p, then

we're going to write font-size: space followed by 20px and a semicolon.

Again, don't worry if you're not sure what these styles mean right now.

We're gonna cover that part really soon.

All you need to understand here is the concept of separating

content from presentation.

So now let's save our stylesheet.

And go over to the browser preview.

And when we refresh the page we can see how

the external stylesheet affects the page.

So, compared to the previous methods we use to add CSS,

the advantage to using this external stylesheet method is flexibility.

We may have multiple HTML files linked to the stylesheet, but

as long as we keep our CSS in a separate file any styling changes or

additions we need to make are done in one file.

Another advantage is that the stylesheet is often cached by the browser after

the first request which saves on download time throughout the site or repeat visits.

Because the stylesheet only needs to download one time.

And if you're wondering why we write CSS or

link to stylesheets from the head section of the HTML document.

Well that's more for page loading purposes.

Even though CSS will still load if it's written or

linked outside the head section.

It's a standard practice to link to stylesheets from the head of the document.

That way, the browser loads and

parses the stylesheet first, before any of the body elements.

And this way, when our website is up on a web server and a user visits our site,

the HTML is nicely styled right before it's presented to the user.

And we can use more than one link tag if we need to link to different stylesheets.

Just keep in mind that each one requires a new request to the web server.

I suggest linking no more than three stylesheets, even on large, complex sites.

I'll usually try to keep it at one or two linked stylesheets.