All language subtitles for 004 Basic Styling with CSS

Let's now learn about the very basics of CSS,

and make our webpage look a little bit nicer.

So as you probably already know,

we use CSS to style elements,

and to create a layout for the overall page.

And we can write CSS right here

in the HTML file using the style element.

Okay, and that style element is not for visible content,

here on the page,

and so it would go right here into the head.

Okay, because remember the head is basically,

like for settings of the page.

And the style definitely counts as a setting.

So style,

and now to style elements,

we need to first select them.

And there are different types of selectors in CSS.

And we're gonna learn about a couple of them,

in this video and the next one.

But the most basic one,

is the element selector.

And with the element selector,

we can simply select all elements of a certain type.

For example, the body.

So we write body,

and then curly braces,

and then in here we can write or CSS declarations.

So each CSS declaration has a property name,

and then a value.

For example, we can style the background color.

So background color,

and let me actually autocomplete it here.

So background color is the property,

and then let's say, green.

So in CSS there are a couple of predefined color names,

and we can then use this.

Give it a safe, and bam.

Our page is green now.

So that's CSS for you.

So, we have the body element selector,

then all of this here is our declaration block,

and this here is a simple declaration,

where background color is the property in green,

is the specified value.

Now usually we write or CSS in an external CSS file.

So just like we write JavaScript,

in an external script,

we do the same basically with CSS.

So let's create that separate CSS file.

So I'm bringing back the sidebar here,

using Command or Control B,

and then, let's call this one the style dot CSS.

Close the sidebar,

and now we need to connect these two.

So again, just like we had to connect

the JavaScript file to the HTML,

we also have to select the CSS.

But it works a bit differently.

So let's get,

we'll actually let's copy this here,

or cut it here.

So when I save it now, of course it's gone,

Okay.

And that's because the style file,

is not yet linked to the HTML.

So, we link it by using the link element.

So that's not very creative,

so here we use href again,

which remember is the same attribute,

as in the anchor element here.

Okay, but don't confuse anchor with link.

So link does not create a clickable link,

so like this,

instead we use it only to basically

link CSS files to HTML files.

So here, we say style dot CSS,

because that's the name that we gave to the file.

Okay.

And then we also need to specify

the rel attribute and set it to Stylesheet.

Give it a safe and here we go.

The green color is back.

Okay.

And so now we can write all our styles,

in the separate file here,

and so we separated the presentation from the content.

So let's actually make this like yellow,

and we should probably give it a little bit a nicer color,

and then VS code when you hover a color like this,

you see this pop up which then allows you to select a color.

And this is very handy.

So let's do this,

and then maybe just very subtle color like this.

All right, this looks a lot better already.

Okay, so let's now explore some more CSS properties.

For example, we can set the font family.

And here we can start by setting it

to a font that you probably have on your computer,

and so Arial is probably one that you have,

now in practice we use web fonts,

for example from a service like Google fonts,

okay?

But in this case it doesn't really matter.

So let's just give it a save,

and so, saw this font here changing.

And on your system, that should work too,

and if you don't have Arial,

then just use some other fonts that you have available.

But now you might ask,

we set the font family on the body, right?

So why did all these elements like this h1 here

and this P element,

and this h2 element,

why did all of them get the Aria font as well?

Well, that's because the font family property

is a property that gets inherited.

Okay. So all the Child Elements of the body element,

will automatically get this font family assigned to them.

And that makes it very handy,

So that we don't have to go ahead,

and set the font families separately on all these elements.

So just setting this on the body,

will then set it on all the Child Elements.

Now, most properties to actually not inherit.

But generally, all the properties

that are related to funds will inherit.

So let's check out another one, font size,

and let's set it to 20 pixels.

Give it a save,

and you'll see that everything got a little bit bigger now.

However, not all the elements

have a font size of 20 pixels now.

And that's because the elements like this h1,

and this h2 have predefined font sizes

that automatically are applied from the browser,

if we do not specify them on our own.

Okay.

But of course we can overwrite them

with our own selectors.

So let's say h1,

and so this is another element selector,

and in this case of course it selects the h1 element.

So let's say font size 50 pixels.

And so take a look at this now,

and well that's huge.

Let's make it a little bit smaller maybe 40,

now that looks about right.

All right.

And now let's actually use the class names

and DIDs that we set in the previous lecture

to now select elements based on these classes.

So, remember that here we set this paragraph

to first and this one to second.

So we basically named them like this.

And in fact, let's go ahead,

and add another class here to this other paragraph.

So class, and I will call this one first two.

Okay.

So remember, IDs have to be unique,

so we can only use them once.

But classes can be used multiple times.

And so that's what we did here.

And so now I can go ahead

and select all the elements,

which have the first class,

so this paragraph and this paragraph,

and then style them however I want.

And this will then only affect these two paragraphs,

but not this one.

Okay, because this one has the second class.

So let me show that to you.

And so the class selector is using the dot.

So dot first.

Okay, and so this is our selector.

Dot is for the class.

And then first is the class name.

And so we set the text color,

using the color property.

And let's set it to red.

Give it a safe,

and what do you think will happen now?

That's right.

This paragraph and this one,

which are the two paragraphs,

which have the first class are now red.

But this other paragraph, is of course not read,

because we didn't select it here.

Okay.

And so this CSS rule here does not apply to it.

Finally, that's also format or form.

So, let's check that out,

and so here we have this your name ID, right?

So we already know how to select based on the class name,

and so let's now learn how to select based on ID.

And it's very similar but instead of the dot,

we use the hash.

So hash, your name,

I think that was the ID, right?

Yes, your name.

So let's set a different background color here,

and I will again use this trick

where I can now set the color

using this pop up window,

so that's the trick I like to use.

Let's make it similar but a little bit darker.

Yes, that looks nice.

And we will make it even nicer in the next lecture,

after we learned about the box model,

but for now this looks good already.

So another one that we can use here

is the border property,

and the border property,

is so called shorthand property.

Because here we can set multiple values

for just one property.

So for the border we can set the width,

so basically the thickness of the border,

so let's say five pixels,

then we can set the style of the border,

and let's make it solid,

but we could also make it dotted or dashed,

but that would look a little bit like weird,

and then the color.

So until now, we have always used CSS color names,

or this RGB format like this,

But of course CSS also accepts RGB colors.

So for that we use the hash,

and then let's use 444 as this dark gray.

So you see it as dark gray,

but we could of course change it,

again using this pop up.

Okay.

But let's leave it here with the RGB code,

give it a save and here you see,

this nice border around the form.

Okay.

So again, this border is a shorthand property,

because it allows us to specify

multiple values here like this.

You can also notice that this property

is not inherited, right?

So unlike the font family or the font size.

'Cause if it was inherited,

then now all these Child Elements here

would have a five pixel border around them as well.

Right?

So this one and this one,

but they do not.

And while in this case it wouldn't make sense.

And so that's why border is not inherited.

Okay, and this would be enough for one lecture.

In the next one, we will learn about the box model,

so that we can then add some spacing here.

For example some spacing here inside of this box,

to give it some space here,

and also some space between these elements.

So stay tuned for that,

and see you in the next lecture.