Original subtitles

In this lecture,

we will learn about six properties to style text with CSS.

And let's just quickly recap

what we did in the last lecture.

So we are writing external CSS in this CSS file

and the CSS file is always composed of multiple CSS rules.

So right now we only have one CSS rule,

but, of course, we will now start adding more of them.

Now, a CSS rule always starts with a selector.

So in this case, we are selecting the h1 element,

but if there were more h1 elements,

then the selector would actually select all of them.

Then we have this declaration block here

into which we can write one or more declarations

like this one

and each declaration has this property name.

So in this case, the color,

and then the value that we specify for that property,

which in this case is this keyword of blue.

And so now we will start adding some more properties here.

And the first one that I want to use is the font size.

So here we can basically specify the size of the text

and each property can take different types of values,

such as length or keywords.

So you see that here in the color, the value is a keyword,

but now here in the font size, we actually need a length.

So basically, the size of the text, in this case.

Now we can specify length using different units in CSS,

but don't worry about that for now.

So for now, we will simply use the very simplest one,

which is pixels on your screen.

So we can specify the font size, for example, 26 pixels,

then add a semi-colon here.

And so now the text on the screen

will be exactly 26 pixels of your physical screen.

So if I give this a save now,

then you see that the text here decreased.

And just remember that in case it didn't update

on your computer and you are successfully connected

to the live server, as you can see down here,

then just manually reload the page here once.

And then in the successful updates here of the code,

it will then automatically reload your page.

But anyway, let's now start adding the next property,

which is the font family.

And so here you can specify

basically different fonts for your text.

So just like you can specify a font

in something like a Word document or a Google Page document,

you can do the same in CSS.

However, what's different in the case of CSS

is that you cannot simply use a font family

that you have installed on your computer

because that wouldn't then work for all the users

that are going to visit your page in the future,

unless they also have that font installed on the computer.

So there is a solution for that

that we will talk about later,

but for now we will simply not actually specify

a real font family, but instead just use the keyword

that we want the browser to use any font size

that is a sans serif.

And sans serif, we will also learn a little bit later

what that actually means,

so in the design section of this course,

but if we give this now a save,

you see that this font here changed completely.

So now it looks more clean,

but what matters is that now as we update our page,

in fact, the font family here of this heading

now looks very different.

So it no longer has these serifs,

which are like these small things here

at the end of the letters.

And again, later, in the design section, we will then learn

how we can specify specific font families for our pages.

But now let's take a look at our next property here

for text, which is text transform.

And so with text transform,

we can basically turn a text uppercase.

So you can see, one more time,

the VS Code gives us a lot of suggestions here,

so this whole list.

And so the most used one here is actually uppercase.

So uppercase, like this,

and the result is exactly what you would expect.

So all the text simply turn uppercase.

So this is a simple one.

And now let's try another one which is called font style.

And here again, you see these options.

The most used one, in this case,

is to set some text to italic.

So let's check that out,

and indeed, that is just what happened.

So the text turned italic, as expected.

Great, so we already covered four properties

and some of its possible values here.

So we're making good progress.

And of course, as I mentioned before, you do not have

to start memorizing these properties here now.

You will get used to them over time

as you start using them more and more.

And let's actually get rid one of this one here,

because we will actually talk about colors

a little bit later.

Okay, so let's now go to our next headings.

So let's now style our h2 element.

So that is this basically main heading of this article.

And so we can use the properties that we already learned.

And so if you keep typing these property names,

they will start getting into your brain.

So this one, let's actually make it even bigger than the h1.

So really big, like 40 pixels,

and that's no problem at all.

So just because the h1 is the main heading of the page,

it doesn't mean that it also needs to be the biggest one.

So being the h1 is really all about semantics,

not only about what it looks like.

So we have a nice big text

and now let's just make it also sans serif,

so giving it this modern look and feel.

So the sans serif keyword,

and here we go.

Next up let's style our paragraphs.

And so, as I mentioned before,

by selecting the p element like this,

this will actually select all the p elements

that are on our page.

So this paragraph here and this and this,

and really all the ones that we have here on the page.

So let's give it again a font size,

let's say of 22 pixels.

And for now, all of these lengths here,

so all of these numbers that I've been using

are kind of random,

but later we will also learn how we can use a system

so that we can basically automatically

figure out which font sizes we should use.

Now I also want to change the font family again,

and once again, using sans serif,

and nice, that looks very nice already.

And if we compare it with our demo,

then we can see that we start getting closer

to, or yeah, to our demo page,

so what we want to achieve in the end.

There is actually just one more thing

that I want to change here in the paragraphs,

which is to specify yet another new property,

which is the line height.

So I will first actually specify it.

And then you will see the difference in the text.

So here we actually use a value without a unit.

So in this case, this 1.5 simply means

that the line height will be 1.5 times the font size.

So by default, the line height is simply one,

but now if we set it to 1.5, then you should see the space

between the lines here increase

between here and here and here.

So look closely at that as I now click here

to reload the page,

and you'll see that really changed.

And we could set it even higher, of course,

and then we would get even more space,

but already looks a bit too much.

So let's go back to 1.5, like this.

Now, by the way, something quite interesting happened here

that maybe you noticed.

So remember how inside of these paragraphs

that we just styled, we have different elements

such as this italic text,

which is an em element, remember?

So here in this paragraph,

for example, we have the em element,

or here in this paragraph, we have the strong element.

Or down here we have the anchor,

so this element right here.

And as you can see, these elements here on the page,

so for example, this anchor here

somehow got the same font size

and the same font family as the p element,

even though we did not specify these styles

for the link anywhere.

So we didn't specify the font size and the family

and the line height, not for the anchor,

not for strong text,

or not for strong elements,

and also not for the em element.

But still they got these styles applied to them somehow.

And the reason for this

is a very important mechanism called inheritance.

Now this is a little bit complex to understand.

And so we will have a whole lecture

on inheritance a little bit later,

but still I wanted to already show you this effect

in action here at this point.

But anyway, let's now keep styling or reminding elements.

So starting with h3,

and let's put that here after the h2

to group our rules here in a logical way.

So the font size in this one, let's make it like 30 pixels.

So that's going to be this one here, exactly.

And this one.

So again, we have multiple h3 elements.

And so by using the h3 selector here,

we will select all of them.

Now, just the font family again,

and setting it to sans serif.

All right.

And now finally, we have the h4 heading.

So that's this one here.

So let's again set the font size

and the font family,

so 20 pixels

and here sans serif.

And actually, let's also turn the text uppercase here.

And remember how we use the text transform property

for that.

If we set it to uppercase like this,

nice.

And now there is just one final property

that I want to show you to basically style text,

which is that we can also align text.

So again, a little bit like we can do in Microsoft Word

or in Google Pages or something like that.

And so for that, we use the text align property.

And again, you can see the options here.

One interesting one that we can use

is to align the text to the center.

And so guess what will happen now when I save it?

Well, we need to go down here again

and you see that now it is in the center of the page.

And technically it is in the center of its parent element,

but that parent element basically occupies this entire page,

and so therefore it is now at the center of the page.

All right.

And so now the only thing that we are missing

is these list items here.

So all of these five and these three,

and also these anchors, so the links,

but we will style the links a little bit later

because there are some special cases for links.

So let's just finish this video

by styling these li elements.

All right.

Let's do that down here,

and notice how we do not style the ol element

and the ul element

that are the parent elements of the list items.

So remember that the list itself is an ol

or it is a ul,

but we do actually style the li elements.

And so again, let's set the font family to something,

so to sans serif, actually.

Give it a save.

And we also want to change the font size one more time.

So by default, we get this font size that we see here,

which is usually 16 pixels by default.

So that's an important thing

that we also need to know a little bit later.

So take note of that.

But of course, we want to make it a little bit bigger.

So we have our paragraphs at 22 pixels.

So let's actually make this a little bit smaller.

So let's say, at 20 pixels.

And that's it. Beautiful.

So we finished the basic styling of our text of our page,

and we learned about six new CSS properties along the way.

So take some time to review what we just did,

and then let's move on to the next lecture

where we will learn a little bit more about selectors.