Now, I hope you had to play around with this example website where you could toggle the CSS on and 1
off. 2
How exactly did I add CSS to this plain HTML website? 3
Well, that is what we're going to be learning about in this lesson. 4
There's three ways of adding CSS into an HTML website. 5
Inline, Internal, and External. 6
We're going to be exploring all three of these different styles of adding CSS, and I'm going to show 7
you why they're important and in which situations you would use which one. 8
Now, the first one is the "Inline" style of adding CSS. 9
As the name suggests, it goes into the same line as a particular HTML element. 10
So in this case, you can see we've got an HTML open tag and an HTML closing tag. 11
Now, we know from learning about HTML boilerplate, this is an element that goes into all of our HTML 12
documents. 13
There's nothing special about this particular element. 14
It just tells the browser that this file is made up of HTML. 15
Now, in this case, the inline CSS goes into the opening tag of the HTML. 16
This is where the CSS exists. 17
It's in the same line as the HTML tag. 18
What the inline CSS looks like is something like this. 19
You've got a style attribute, which is an attribute that is globally available to all tags, not just 20
HTML, but anything else. 21
Image, or Break, or anything you can think of, 22
you can add the style attribute to it. 23
As we know, normally attributes look like this. 24
They have a name of the attribute. 25
Then we add the equal sign. 26
And then finally we add a value for the attribute. 27
In this value-section is where we add our CSS code. 28
Our CSS code is broken down like this. 29
The first part of it is the property that you want to change. 30
And the second part is the value of that property that you want to set it to. 31
So in this case, what we're trying to do is to set our website's background to blue. 32
And if I go ahead and run this code and load it up in a browser, you would simply see a website that 33
has a blue background, 34
and this is achieved using our inline CSS. 35
Inline elements are really useful for adding CSS style to just a single element on your HTML page. 36
But normally that's quite cumbersome because as you can imagine, there's tons of different HTML elements. 37
If you have more and more of them and you wanted them to share similar styles, then you would have 38
to add these inline styles to each and every single one of them, which is pretty tedious. 39
It's not normally recommended to use inline styles in your entire document. 40
It's only for specific sections, or when you're testing, or when you only want it in one single element 41
or one line in your HTML document. 42
Now, the second way you can add CSS is through what's called "Internal CSS." 43
Now, this is done through a special HTML tag called the "style element." 44
We've got an open <style> tag and a closing </style> tag, 45
and in between those two lines is where we add all of our CSS. 46
All of this is our CSS. 47
The CSS looks a little bit different from what you saw previously, right? 48
Because previously all we had was this line. 49
Now, in this case, we've got something a little bit extra here, 50
why is that? 51
Well, this is because last time when we had the CSS rule, we had it inline inside a particular element. 52
So we said for this HTML element, we want to apply a background color. 53
Now, in this case, it's a little bit different because our internal style can apply to anywhere within 54
the same HTML document. 55
So it could go into any of these elements, the HTML or the head or anything that you've got coming 56
up later on as well. 57
What we have to add in addition is what we call a "Selector," and this selector comes before a 58
set of curly braces and then the CSS goes in between these two sets of curly braces. 59
Now, when I say in between a set of curly braces, you have to imagine it a little bit like this. 60
This is the opening curly brace, and this is the closing curly brace. 61
And if you had it all on one line, then it would look something like this with your CSS going in between 62
on multiple lines, 63
that's why we open and close them on separate lines 64
but if you imagine it as one line, then it would look something like this. 65
Our internal styling can apply to anywhere in our HTML document, and inside we can target or select 66
as many elements as we want. 67
We could say let's apply the background red to the HTML, and when this code is rendered in the browser, 68
you will see the background of the entire HTML turn red. 69
Internal styles are really useful for applying it only to one HTML document. 70
As you can see, this style and any code that goes in there is limited to the HTML that it sits in. 71
So it means if you have a multi-page website, then you probably shouldn't be using the internal style, 72
instead, you should be using something called an "External CSS styling". 73
Now the biggest difference between the external, and the internal, and inline styles is that this actually 74
lives in a completely separate file, which you'll normally see as styles.css or main.css or anything 75
that has a .css extension. Inside this CSS file is where we write our CSS rules. 76
So we've got our selector, we've got our property and we've got values and we can make many, many 77
of these inside this file. 78
Now how do we link up the style sheet file with our index.html? 79
Well, inside the head section of our HTML, we would add a link element which you'll notice is a self-closing 80
tag, 81
so it doesn't need a closing tag. 82
And we have two things that we normally write. 83
One which is a relationship (rel) which refers to what is the role of this thing that we're linking to. 84
And the second thing is the href, which is where is it located? 85
In this case, we're saying it's in the same directory and it's inside a file called styles.css 86
which points to this file right here. 87
And when we go ahead and run this and show it in the browser, you'll see it turns our HTML background 88
to a green color. 89
And this style of external CSS is what's used most commonly in web development. 90
And this is what we're going to be focusing on most of the time. 91
But it's important to be aware of the other two styles the inline, the internal, because you'll see 92
it out there in the wild in other people's CSS code. 93
So remember, inline is really useful when you only want to target a single element, 94
and internal is really useful when you only want to target a single web page. 95
But for most cases and when you have a multi-page website, then what you're going to need is the external 96
way of adding CSS through the use of a separate file, which will be called something, something.css. 97
And it's inside this file where you're going to be writing the CSS code that can target an entire 98
website with all of its multiple web pages. 99
So these are the three ways that you can add CSS to your HTML documents. 100
And don't worry, we're going to be practicing this and all of its forms many, many times so that you 101
understand how it works. 102
Let's try an exercise and see how to add CSS in various different ways to our HTML file. 103
All right. 104
So once you've downloaded and extracted the project file and opened it inside VS Code, you should see 105
this folder. 106
And here, notice that our five files that have already been created for you. 107
And in this exercise, there is a little bit of revision about creating multiple web pages, about file 108
paths, 109
but more importantly, we want you to practice using the three different ways of adding CSS: inline, 110
internal and external. 111
So starting inside index.html, the first thing I want you to do is to create three links to the three 112
different web pages. 113
This one, this one, and this one. 114
And once you've done that, then you can go inside each of those web pages. 115
So starting with the inline and then internal or external, and you're going to follow the instruction 116
that the h1 tells you to. 117
So in this case, we want to use inline styling in order to style this h1 in blue. And then you get 118
to go to the internal and do the same thing, but this time using internal styling and styling the h1 119
in red and then finally using external styling using this style.css file and styling the h1 in 120
green. 121
If you want to take a look at what the final outcome will look like, you can go into the Solution folder, 122
right-click on the solution.html and Show Preview. And then make sure that you collapse this solution 123
folder 124
because having all of it out, two versions of each file is very confusing. 125
So I recommend just collapsing that folder so you don't get confused and this is what you're aiming 126
for on the index.html, which is the home page. 127
We've got an h1 and then we've got three links. 128
And if we click on each of these, you can see they've got an h1 that says style me in blue, style 129
me in red, and green, and we're going to achieve that using the three different ways of adding CSS. 130
Once you're ready, go ahead and download the starting files and give this challenge a go. 131
Pause the video now. 132
All right. 133
So how did that go? 134
I'm going to run through the solution code with you to explain some of the things that you would need 135
to do to complete this challenge. 136
The first thing we said was to style the home page. 137
So we added in three anchor tags, which is how we create links, 138
and once we did that, we were able to use the href of each of the anchor tags in order to link to the 139
relevant web page. 140
The first one links to the inline web page, inline.html, internal, external, and we use the ./ 141
notation in order to reach within the current folder. 142
So solution.html lives inside solution, 143
and in this case, in order to get to inline.html, we use the ./ to get to this folder and 144
then we forward slash to go to inline.html right here. 145
Now once you've created your three links, the next stage is to go into the first web page, inline, and 146
here we want to style the h1 using CSS, but adding it inline. 147
As I said, it's in the literal line of the h1 element, so it only applies to this h1 element and we've 148
added it in right here saying that the style should be set so that the color of this text is blue. 149
And remember that the inline style goes in the opening tag of the element that you want to target. 150
The next one is Internal, so we add internal styling, usually by putting it inside the head section. 151
So between the open and closing tags of the head element, and this is a convention that most developers 152
will stick to, although this will work no matter where you put the style element. 153
So here we've got an open and closing style tag and in between we've added in our CSS. 154
So we're saying that our selector is going to select all the h1 on this page, of which there is only 155
one, and we're going to change its text color to red. 156
And finally, we've got the final version, which is the External HTML. 157
And we do this by creating a link element right again, inside the head section of your website. 158
We establish the relationship (rel) is we're setting up a style sheet and then we provide a href to the location 159
where our stylesheet is located, which is in the current directory, and then it's in a file called 160
style.css. 161
So we can see that right here. 162
And inside here we've again targeted the h1 and we've set the color to green. And all of that together 163
creates these different web pages in our multi-page website with the code that sets the style in three 164
different ways. 165
So did you get that right? 166
If you had any issues at all, be sure to go back into your code and fix anything that was wrong and 167
make sure that you've understood the three different ways of adding CSS. 168
In the next lesson, we're going to learn more about the different selectors that we can use to select 169
different parts of our HTML file. 170
So for all of that and more, I'll see you there.