Instructor: Now, I hope you had a play around
with this example website
where you could toggle the CSS on and off.
How exactly did I add CSS to this plain HTML website?
Well, that is what we're gonna be learning about
in this lesson.
There's three ways of adding CSS into an HTML website,
inline, internal, and external.
We're gonna be exploring all three
of these different styles of adding CSS,
and I'm gonna show you why they're important,
and in which situations you would use which one.
Now, the first one is the inline style of adding CSS.
As the name suggests,
it goes into the same line as a particular HTML element.
So in this case, you can see we've got an HTML open tag
and an HTML closing tag.
Now, we know from learning about HTML boilerplate,
this is an element that goes into all of our HTML documents.
There's nothing special about this particular element.
It just tells the browser
that this file is made up of HTML.
Now in this case,
the inline CSS goes into the opening tag of the HTML.
This is where the CSS exists.
It's in the same line as the HTML tag.
What the in-line CSS looks like is something like this.
You've got a style attribute,
which is an attribute that is globally available
to all tags, not just HTML, but anything else.
Image or break or anything you can think of,
you can add the style attribute to it.
As we know, normally attributes look like this.
They have a name of the attribute,
then we add the equal sign,
and then finally we add a value for the attribute.
In this value section is where we add our CSS code.
Our CSS code is broken down like this.
The first part of it is the property that you want to change
and the second part is the value of that property
that you want to set it to.
So in this case, what we're trying to do
is to set our website's background to blue,
and if I go ahead and run this code
and load it up in a browser,
you would simply see a website that has a blue background,
and this is achieved using our inline CSS.
Inline elements are really useful for adding CSS style
to just a single element on your HTML page.
But normally that's quite cumbersome,
because as you can imagine,
there's tons of different HTML elements.
If you have more and more of them
and you wanted them to share similar styles,
then you would have to add these inline styles
to each and every single one of them,
which is pretty tedious.
It's not normally recommended to use inline styles
in your entire document.
It's only for specific sections or when you're testing
or when you only want it in one single element
or one line in your HTML document.
Now the second way you can add CSS is
through what's called internal CSS.
Now this is done through a special HTML tag
called the style element.
We've got an open style tag and a closing style tag,
and in between those two lines
is where we add all of our CSS.
All of this is our CSS.
This CSS looks a little bit different
from what you saw previously, right?
Because previously all we had was this line.
Now, in this case,
we've got something a little bit extra here.
Why is that?
Well, this is because last time when we had the CSS rule,
we had it inline inside a particular element.
So we said for this HTML element,
we want to apply a background color.
Now in this case, it's a little bit different
because our internal style can apply to anywhere
within the same HTML document.
So it could go into any of these elements,
the HTML or the head
or anything that you've got coming up later on as well.
What we have to add in addition is what we call a selector,
and this selector comes before a set of curly braces
and then the CSS goes in between
these two sets of curly braces.
Now, when I say in between a set of curly braces,
you have to imagine it a little bit like this.
This is the opening curly brace,
and this is the closing curly brace,
and if you had it all on one line,
then it would look something like this
with your CSS going in between on multiple lines.
That's why we open and close them on separate lines.
But if you imagine it as one line,
then it would look something like this.
Our internal styling can apply
to anywhere in our HTML document,
and inside, we can target or select
as many elements as we want.
We could say, let's apply the background red to the HTML
and when this code is rendered in the browser,
you'll see the background of the entire HTML turn red.
Internal styles are really useful
for applying it only to one HTML document.
As you can see, this style and any code that goes in there
is limited to the HTML that it sits in.
So it means if you have a multi-page website,
then you probably shouldn't be using the internal style.
Instead, you should be using
something called an external CSS styling.
Now, the biggest difference
between the external and the internal and the inline styles
is that this actually lives in a completely separate file,
which you'll normally see as style.css, or main.css,
or anything that has a .css extension.
Inside this CSS file is where we write our CSS rules,
so we've got our selector, we've got our property,
and we've got values,
and we can make many, many of these inside this file.
Now how do we link up the style sheet file
with our index.html?
Well, inside the head section of our HTML,
we would add a link element,
which you'll notice is a self-closing tag
so it doesn't need a closing tag,
and we have two things that we normally write.
One, which is a relationship,
which refers to what is the role
of this thing that we are linking to?
And the second thing is the href,
which is where is it located?
In this case, we're saying it's in the same directory,
and it's inside a file called styles.css,
which points to this file right here,
and when we go ahead and run this
and show it in the browser,
you'll see it turns our HTML's background to a green color.
And this style of external CSS
is what's used most commonly in web development,
and this is what we're gonna be focusing on
most of the time.
But it's important to be aware of the other two styles,
the inline, the internal,
because you'll see it out there in the wild
in other people's CSS code.
So remember, inline is really useful
when you only want to target a single element,
and internal is really useful
when you only want to target a single webpage.
But for most cases, and when you have a multi-page website,
then what you're gonna need
is the external way of adding CSS
through the use of a separate file,
which will be called something-something.css,
and it's inside this file
where you're going to be writing the CSS code
that can target an entire website
with all of its multiple web pages.
So these are the three ways
that you can add CSS to your HTML documents.
And don't worry, we're gonna be practicing this
and all of its forms many, many times
so that you understand how it works.
Let's try an exercise and see how to add CSS
in various different ways to our HTML file.
All right, so once you've downloaded
and extracted the project file
and open it inside VS Code,
you should see this folder,
and here, notice there are five files
that have already been created for you.
And in this exercise, there is a little bit of revision
about creating multiple, about file paths,
but more importantly,
we want you to practice
using the three different ways of adding CSS,
inline, internal, and external.
So starting inside index.html,
the first thing I want you to do is to create three links
to the three different webpages,
this one, this one, and this one.
And once you've done that,
then you can go inside each of those webpages,
so starting with the inline, and then internal, external.
And you're going to follow the instruction
that the H1 tells you to.
So in this case, we want to use inline styling
in order to style this H1 in blue.
And then you get to go to the internal,
and do the same thing, but this time using internal styling
and styling the H1 in red,
and then finally using external styling,
using this style.css file,
and styling the H1 in green.
If you want to take a look
at what the final outcome will look like,
you can go into the solution folder,
right click on the solution.html, and show preview,
and then make sure that you collapse this solution folder,
because having all of it out, two versions of each file,
is very confusing,
so I recommend just collapsing that folder
so you don't get confused.
And this is what you are aiming for.
On the index.html, which is the homepage,
we've got an H1 and then we've got three links,
and if we click on each of these,
you can see they've got an H1
that says, "Style Me in Blue," "Style Me in Red,"
and green,
and we're going to achieve that
using the three different ways of adding CSS.
Once you're ready, go ahead and download the starting files
and give this challenge a go.
Pause the video now.
All right, so how did that go?
I'm gonna run through the solution code with you
to explain some of the things that you would need to do
to complete this challenge.
The first thing we said was to style the homepage.
So we added in three anchor tags,
which is how we create links,
and once we did that,
we were able to use the href of each of the anchor tags
in order to link to the relevant webpage.
The first one links to the inline webpage, inline.html,
internal, external, and we use the dot slash notation
in order to reach within the current folder.
So solution.html lives inside solution,
and in this case, in order to get to inline.html,
we use the dot slash to get to this folder,
and then we forward slash to go to inline.html right here.
Now, once you've created your three links,
the next stage is to go into the first webpage, inline,
and here we want to style that H1 using CSS,
but adding it inline.
As I said, it's in the literal line of the H1 element
so it only applies to this H1 element,
and we've added it in right here,
saying that the style should be set
so that the color of this text is blue.
And remember that the inline style goes
in the opening tag of the element that you want to target.
The next one is internal.
So we add internal styling
usually by putting it inside the head section,
so between the open and closing tags of the head element.
And this is a convention that most developers will stick to,
although this will work
no matter where you put the style element.
So here we've got an open and closing style tag,
and in between we've added in our CSS.
So we're saying that our selector
is going to select all the H1 on this page,
of which there is only one,
and we're going to change its text color to red.
And finally we've got the final version,
which is the external HTML,
and we do this by creating a link element,
right again, inside the head section of your website.
We establish the relationship,
is we're setting up a style sheet,
and then we provide a href
to the location where our style sheet is located,
which is in the current directory,
and then it's in a file called style.CSS,
so we can see that right here.
And inside here, we've again targeted the H1
and we've set the color to green,
and all of that together
creates these different web pages in our multi-page website
with the code that sets the style in three different ways.
So did you get that right?
If you had any issues at all,
be sure to go back into your code
and fix anything that was wrong
and make sure that you've understood
the three different ways of adding CSS.
In the next lesson, we're gonna learn more
about the different selectors
that we can use to select different parts of our HTML file.
So for all of that and more, I'll see you there.