To increase the font size and make it bold,
we need to add more CSS properties
which we haven't used before.
And I'll start with making it bold.
For that, we got the font-weight property,
and the font-weight property
takes different font weights as values.
It also has some shortcuts like normal,
which would set the normal font weight,
which is the font weight we have as a default anyways.
But then you can also set it to bold here, like this.
And if you set it to bold like this,
if you save that and reload,
now you see we have some bold text.
So that's how we can make text bold.
Now for increasing the size,
we got the font-size CSS property which we can target.
And now the font-size property wants a size value.
And that's a new kind of value which we haven't used before.
We did learn about a lot of different kinds
of CSS values already, for example, colors
but also something like center or left for text-alignment.
But now we want a size.
When it comes to that, we need to provide a numeric value.
And there, we got different units which we could use,
because we can define sizes with different units,
just like in real life, where you can also measure a size
in centimeters, in meters, kilometers, inches.
There are different units
for measuring one and the same thing.
And it's the same in CSS,
there are different units
with which you can express your dimensions,
your size in this case.
And there is, for example, the pixels unit.
With the pixels unit, you can set a size or dimension in CSS
by targeting device-independent screen pixels.
Now what do I mean with device-independent?
It simply means that if you are viewing a page
on a high-resolution device,
then if we would always allocate
the same amount of screen pixels,
since a high-resolution device
has way more screen pixels available,
items would be smaller.
If we made something, let's say, 10 pixels wide,
then 10 pixels on a high-resolution device
would be way smaller than on a low-resolution device
which has less pixels on the screen to begin with.
And that's why it's device independent,
it will automatically be scaled.
So if you set something to, let's say, 10 pixels in CSS,
the browser will make sure that it looks good.
It has the same physical size,
no matter on which device you are viewing the website.
So you can safely set something to 10 pixels
without risking that it will be super small
on a high-resolution device
and super big on a low-resolution device.
That will not happen,
because it will be scaled automatically.
And therefore, pixels is a great absolute unit
for setting dimensions,
absolute because it's not relative to something
besides the device resolution maybe,
but it doesn't dynamically grow or shrink
inside of the website.
It only depends on the device,
but not, for example, on the screen width
or anything like this.
For that, we would also have relative units
which we can use, rem and percentage.
And we're going to come back to that later in the course
when we need them,
but for the font-size here,
using pixels sounds good.
And I'll set this todays-challenge font-size
to, let's say, 52 pixels now.
If you do that and you then save this and reload,
now we have this very large text here,
which makes our daily challenge very obvious.
And now, it's the first thing which we see
when we look at this page, our actual challenge for today.
And here, I also wanna come back
to something I mentioned way earlier.
You can change everything with CSS,
and therefore you don't use HTML elements
for the styling.
You get some default styling,
but that's not why you use HTML elements.
You use them to describe your content
and to provide the correct semantic around your content.
That's what I mentioned earlier.
And here, it should now be super clear.
This is still a paragraph.
It's not a h1 element.
But it's now bigger than the h1 element,
because we styled it such.
And that's something you'll do all the time
in web development.
You will adjust the styles
so that the things look the way they should look,
and then you use HTML elements
to describe your content correctly,
but you don't use elements
because you want to achieve a certain style.
You do that with CSS only.