All language subtitles for 022 Introduction to CSS.en_US

Welcome to the first lecture about CSS.

So just like we did in the HTML fundamental section,

in this section we will also start by looking

at what CSS actually is,

and we will learn some common terminology,

so that you always know what I'm talking about

when I refer to different pieces of the CSS code.

So first of all,

CSS stands for Cascading Style Sheets.

And just like HTML,

CSS is also one of the core technologies of the web.

Now remember that we use HTML

to basically describe the content of a page.

And on the other hand,

we use CSS to describe the visual style

and the presentation of the content

that we previously wrote using HTML.

So CSS and HTML work very closely together.

And in fact, down here, you can see a webpage,

which is actually the project that we will build

later in the course.

So in the left side you have just the content.

So just the HTML.

And then on the right side,

you have the exact same HTML code, but with a lot of CSS.

And so that CSS describes the visual style

and also the layout basically of that whole content.

Now, as you already know,

HTML consists of a bunch of different elements

that we can use to describe the content.

And so again, CSS is similar to that,

because CSS consists of countless properties

that we developers can then use to format the content.

And these properties allow us to format different things

about a font, the text, the general spacing,

a layout of the page and so on and so forth.

There is really lots of different properties.

And of course you don't need to know all of them by heart.

There's just no need for that.

The way that you learn these properties

is that you use the most important ones over and over again,

and at one point it will then become very intuitive.

Okay, so this is what CSS is all about.

So let's now take a look at an actual piece of CSS code.

So this is what a typical small piece of CSS

might look like.

And it always starts with a selector.

So for example,

if we want to style all the h1 elements on the page,

we need to select it in CSS,

and then we can apply some styles to it.

And so each of these styles, we can call it a declaration.

So for example, here we set the font size to 20 pixels.

And so that font size is called the property.

And the 20 pixels is the value that we declare

for that font size property.

And so property and value together is a declaration.

And we can also, more casually, call that a style.

Then all of these declarations, or styles together,

make up the declaration block.

So we have these curly braces after the selector,

and so inside of the declaration block

go all the different declarations.

So all our styles.

And all this together,

so basically the selector plus the declaration block

is what we call a CSS rule.

And so what this means, is that in the end our CSS code

will be a lot of different CSS rules, one after another,

where we select all of our elements

and style them in any way that we want.

Okay.

And so that is exactly what we will start doing

in the next video.

So let's go there right now.