Instructor: There are three places
where we can write CSS,
and we call them Inline CSS, Internal CSS, and External CSS.
And so let's now learn about
these three different types of CSS
and also which one is the best.
And in this section and also the next one,
we will actually keep working on this same project
that we started building in the last section.
So the section about the introduction to HTML.
And remember that this is how we left the project
after that last section.
And now by the end of this first CSS section,
it will look like this.
So that's completely different, right?
So we have a lot of colors here.
We have this color border at the top.
The font is also completely different.
So the text color also changed.
And yeah, here we have some nice background colors.
We even have this button here floating here
on the right side.
And so yeah, a lot of visual styles are gonna be applied
through the page throughout this section.
And you will learn a lot of CSS by building this project.
Okay?
Now I like to keep one folder for each of these sections.
And so I will now go to my desktop
and create a brand new project folder for this section.
So what I'm going to do is this time,
I will not go into this folder,
which is the code that we downloaded from GitHub,
But instead, what I will do is to simply copy this project
from the last section.
Okay.
And then I will call it 03 and CSS Fundamentals.
And so the starting point for this section
is the final code of the last section.
So I hope that makes sense.
But if you feel like just working in the same folder,
that is of course, absolutely no problem.
So you can't just keep writing code exactly
in the same documents that we have been working on
in the last section.
I'm just doing it like this so that in the end
I can give you all the code organized nicely.
Okay?
So I will now close this window here.
And we can right-click for example here on VS code
and say, new window and then open the folder from here.
So on the desktop, it is this that I just created, open it,
and then as always, I'm pushing it to the left side.
Now, yeah, we can put this here on the other side,
but later, we will need a little bit more space,
because you'll see
that there was some space here before, right?
And so with this layout just being on the right side,
there is not enough for that.
But for now, that doesn't really matter.
Now this one that we had before,
now since we closed that window, it will no longer work.
So if I reload here now,
Google Chrome tells me that this site can't be reached.
So I can just close this
and I can then click again here on Go Live
now in this new window, okay?
So in this new project, which is actually the same,
but it is a new project folder.
And so for VS code, it is like a new project.
So if I click now on Go Live, it should start again.
And so here is the way we left the project
after the last section,
which is the starting point of this new one.
Great.
But now let's finally get started with some CSS, right?
So remember there were three ways of writing CSS,
and the first one was Inline CSS.
So let me start by showing you how Inline CSS works.
And Inline CSS is basically just writing the CSS code
inside essentially of the element.
So let's say that we wanted to style this text here, blue.
So this h1.
We could declare the style attribute like this.
And then inside of this HTML element
and inside of this HTML file,
we would then start writing our CSS.
So we can say, color and then set it to blue.
If I give it a save,
then you see that it turned actually blue.
So this worked, right?
However, inline styles should usually never be used, okay?
I'm just showing this to you
so that if in some case
you see this here on some other code
and some other webpage, then you know what it is.
But you should not use it when you code on your own.
So when you build your own webpages or websites,
then don't do this.
Okay?
And so let's now move on to the second way of writing CSS,
which is called Internal CSS.
So with Internal CSS, we come here to the head
and then we declare a style element.
So style.
And then we can write our CSS right here
into this style element.
So basically, this entire page is HTML,
but everything that is inside this style element
that needs to be inside of the head will be CSS.
And so now let's write something very similar
to what we wrote by the end of the last video.
So remember that we always need to start with a selector
because in this case, we are not going to write the code
directly on the h1 element.
And so our CSS needs a way of knowing
what element we actually want to style, right?
So we can select it like this.
And then we start our declaration block.
And again, that is what we talked about
by the end of the last lecture.
And so now here we can write a style,
so a declaration which is just a property,
in this case, the color property.
And then we specify the blue value for it.
And if we now save it and reload,
then you see that once again, the code turned blue here.
So this entire text just became blue.
Great.
So this is already a huge step forward
because now we decoupled the style,
which is all of this year from the actual HTML element.
So before, as we had the style here,
then the CSS and the HTML were kind of entangled
and that is never a good thing in programming.
And so we want to keep these things in separate places.
We also call it the separation of concerns.
And so now we have our style here,
so everything up in the head
and the elements down here separated.
However, if we have a lot of CSS code,
then that is also not really practical.
So imagine we have like 500 lines of CSS code
and that is actually not uncommon.
And so in that case, that would bloat our HTML file
and it would be very hard to navigate it.
And so therefore, we can separate things even more
by putting all of our CSS code into a special CSS file.
So let's do that.
So we click here again on new file.
And this one here can have any name,
but I like to call it style.css.
Okay?
So in HTML, the first page should usually
always be called index.html.
That's really a convention.
But for the CSS file,
you can give it any name that you want,
but again, I like to call it style.css.
Okay?
And so this is what we now call External CSS,
because we will move now this declaration block
or this rule actually into a completely different file.
And so this CSS is now external to the HTML.
Okay?
So we have our style here
and now we no longer need the style in here.
Now maybe you notice that as I saved this,
the blue color is actually gone.
So why do you think that is happening?
So why is this text no longer blue,
even though we have the exact same code here
as we had before?
Well, the reason is that HTML right now
has no way of knowing that we actually do have a CSS file,
or in other words, the HTML file and the CSS file
do not automatically get linked.
So what we need to do is to tell our HTML file
that there is a CSS file
that we want to use to style the HTML.
So we need to link them together basically.
And we do that once again here in the HTML head,
because that is exactly where all the information
about the page goes.
And for that, we use the link element.
So that's yet another new element.
And the link element is actually quite confusing
for beginners because many people when they start out,
they might think that the link element
is actually to create hyperlinks like here,
but that is, of course, not the case.
So as you know already, to create hyperlinks,
we use the anchor tech, so not the link tech.
So the link element really only has the only purpose
of connecting the HTML to a CSS file.
So here, we specify href once again,
and then here, we need the path to the CSS file.
And so in that case, this is just style.css.
Then here, it is also good to specify the rel property
and tell the HTML ahead of time that this is a style sheet.
And now when I save this again, watch what happens.
And nice, our text here is blue again.
And so now we successfully connected our CSS file right here
to our HTML file.
So this is now External CSS,
and it is what we will use
throughout the rest of the course.
And it's also what advise you to do
for whenever you build your own webpages.
However, Internal CSS also sometimes has its place,
especially, when you just want to build something small
and fast and want to do everything in the same file,
then it is perfectly acceptable to create Internal CSS
using these style element, remember?
So just like this.
But Inline CSS,
which is what I showed you in the very beginning.
So adding this style right here using the style attribute,
that is usually not a good practice.
And so it's not a good idea to do that.
All right.
And with this now in place,
we are ready to start learning
our very first couple of CSS properties for styling text.
And so that is going to be the subject of our next lecture.