Original subtitles

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 going to 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 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 we can put this here on the other side,

but later we will need a 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 the site can't be reached,

so I can just close this

and I can then again click 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 web pages 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 the 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 for 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 here from the actual HTML element.

So before as we had to 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 then 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 noticed 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 tag,

so not the link tag.

So the link element really only has

the only purpose of connecting the HTML to a CSS file.

So here we specify H ref 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 rail property

and to tell the HTML ahead of time

that this is a style sheet.

And now when I saved 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 I advise you to do

for whenever you build your own web pages,

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 the style element, remember, so just like this.

But inline CSS,

which is what I showed you in the very beginning.

So adding the 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 texts.

And so that is going to be the subject of our next lecture.