-: In this lecture,
we will learn about six properties to style text with CSS.
And lets 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 DH1 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 this
case the color and then the value that we
specify for that property.
Which in this case, is this keyword of blue.
Okay?
And so now we will start adding some more properties
here, and 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 to
twenty-six pixels
then add a semi colon here
and so now the text on the screen will be exactly
twenty-six 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 lets 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 the also have that font installed on their
computer right?
So, there's 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 it actually means
so in the design section of this course.
But, if we give this now a save
you see that the font here changed
completely.
Right?
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. Right?
So, it no longer has the 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 lets 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 that we as
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 lets try another one which is called
font
style,
and here again you see this options
and the most used one in this case is to set
some text to italic.
So lets 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 lets actually get rid one of this one here
because we will actually talk about colors
a little bit later.
Okay, so lets now go to our next headings
so lets now style our H2 element.
So that 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, lets actually make it even bigger
than the H1.
So really big,
like forty 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 lets just make it also a sans serif.
So giving it this modern look and feel
So the sans serif keywords
and here we go.
Next up, lets 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.
Okay?
So lets give it again a font size
lets say of twenty-two pixels
and for now all of this length 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.
Okay?
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 our 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 the value without a unit.
So in this case this one point five simply
means that the line height will be
one point five times the font size.
All right? So by default
the line height is simply one
but, now if we set it to one point five
then you should see the space between the
lines here increase.
So between here and here and here.
So look closely at that as I now
click here to reload
the page.
And you see that really changed.
Right? And we could set it even higher of course
and then we would get even more space
but that looks already a bit too much,
So lets go back to uh, one point five
like this.
Now, by the way
something quite interesting happened here
that maybe you noticed.
So, uh, 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 DEM element
or here in this paragraph we have the strong element
right?
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 a strong text
or not for strong elements and also not for the
EM element.
Right? But, still they got these styles applied to them
somehow. Right?
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 show you this effect
in action here at this point.
But, anyway lets now keep styling
or reminding elements
so starting with H3 and lets put that here
after the page two
to group our roles here in a logical way.
So the font size in this one
lets make it like thirty 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 this one here,
So lets again
set the font size
and the font family
So twenty pixels,
and here sans serif.
And actually lets also turn the text uppercase here.
So, and remember how we use the text
transform property for that.
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 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,
so,
one interesting one 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 lets just finish this video by styling
these LI elements.
All right,
lets 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.
Okay?
So remember, that the list itself is an OL
or it is a UL.
But, we do actually style the LI elements.
Okay?
And so again lets 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 sixteen pixels by default.
Okay?
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
twenty-two pixels,
so lets actually make this a little bit smaller,
so lets say, at twenty 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 lets move on to the next lecture,
where we will learn a little bit more about
selectors.