1
00:00:02,009 --> 00:00:04,620
To increase the font size and make it bold,

2
00:00:04,620 --> 00:00:07,510
we need to add more CSS properties

3
00:00:07,510 --> 00:00:09,390
which we haven't used before.

4
00:00:09,390 --> 00:00:12,230
And I'll start with making it bold.

5
00:00:12,230 --> 00:00:15,970
For that, we got the font-weight property,

6
00:00:15,970 --> 00:00:17,440
and the font-weight property

7
00:00:17,440 --> 00:00:19,682
takes different font weights as values.

8
00:00:19,682 --> 00:00:22,610
It also has some shortcuts like normal,

9
00:00:22,610 --> 00:00:24,810
which would set the normal font weight,

10
00:00:24,810 --> 00:00:28,120
which is the font weight we have as a default anyways.

11
00:00:28,120 --> 00:00:32,570
But then you can also set it to bold here, like this.

12
00:00:32,570 --> 00:00:34,950
And if you set it to bold like this,

13
00:00:34,950 --> 00:00:36,570
if you save that and reload,

14
00:00:36,570 --> 00:00:39,678
now you see we have some bold text.

15
00:00:39,678 --> 00:00:42,650
So that's how we can make text bold.

16
00:00:42,650 --> 00:00:45,300
Now for increasing the size,

17
00:00:45,300 --> 00:00:50,300
we got the font-size CSS property which we can target.

18
00:00:50,820 --> 00:00:55,460
And now the font-size property wants a size value.

19
00:00:55,460 --> 00:00:59,470
And that's a new kind of value which we haven't used before.

20
00:00:59,470 --> 00:01:02,130
We did learn about a lot of different kinds

21
00:01:02,130 --> 00:01:05,790
of CSS values already, for example, colors

22
00:01:05,790 --> 00:01:09,510
but also something like center or left for text-alignment.

23
00:01:09,510 --> 00:01:11,175
But now we want a size.

24
00:01:11,175 --> 00:01:15,680
When it comes to that, we need to provide a numeric value.

25
00:01:15,680 --> 00:01:18,820
And there, we got different units which we could use,

26
00:01:18,820 --> 00:01:22,440
because we can define sizes with different units,

27
00:01:22,440 --> 00:01:26,590
just like in real life, where you can also measure a size

28
00:01:26,590 --> 00:01:30,600
in centimeters, in meters, kilometers, inches.

29
00:01:30,600 --> 00:01:32,010
There are different units

30
00:01:32,010 --> 00:01:34,430
for measuring one and the same thing.

31
00:01:34,430 --> 00:01:36,200
And it's the same in CSS,

32
00:01:36,200 --> 00:01:37,470
there are different units

33
00:01:37,470 --> 00:01:40,170
with which you can express your dimensions,

34
00:01:40,170 --> 00:01:42,053
your size in this case.

35
00:01:42,910 --> 00:01:46,606
And there is, for example, the pixels unit.

36
00:01:46,606 --> 00:01:51,606
With the pixels unit, you can set a size or dimension in CSS

37
00:01:53,170 --> 00:01:57,850
by targeting device-independent screen pixels.

38
00:01:57,850 --> 00:02:00,840
Now what do I mean with device-independent?

39
00:02:00,840 --> 00:02:03,460
It simply means that if you are viewing a page

40
00:02:03,460 --> 00:02:06,200
on a high-resolution device,

41
00:02:06,200 --> 00:02:09,139
then if we would always allocate

42
00:02:09,139 --> 00:02:12,320
the same amount of screen pixels,

43
00:02:12,320 --> 00:02:14,360
since a high-resolution device

44
00:02:14,360 --> 00:02:17,410
has way more screen pixels available,

45
00:02:17,410 --> 00:02:19,400
items would be smaller.

46
00:02:19,400 --> 00:02:23,020
If we made something, let's say, 10 pixels wide,

47
00:02:23,020 --> 00:02:26,726
then 10 pixels on a high-resolution device

48
00:02:26,726 --> 00:02:31,370
would be way smaller than on a low-resolution device

49
00:02:31,370 --> 00:02:35,270
which has less pixels on the screen to begin with.

50
00:02:35,270 --> 00:02:37,900
And that's why it's device independent,

51
00:02:37,900 --> 00:02:40,520
it will automatically be scaled.

52
00:02:40,520 --> 00:02:45,040
So if you set something to, let's say, 10 pixels in CSS,

53
00:02:45,040 --> 00:02:47,930
the browser will make sure that it looks good.

54
00:02:47,930 --> 00:02:50,550
It has the same physical size,

55
00:02:50,550 --> 00:02:54,170
no matter on which device you are viewing the website.

56
00:02:54,170 --> 00:02:57,550
So you can safely set something to 10 pixels

57
00:02:57,550 --> 00:03:00,390
without risking that it will be super small

58
00:03:00,390 --> 00:03:02,340
on a high-resolution device

59
00:03:02,340 --> 00:03:05,650
and super big on a low-resolution device.

60
00:03:05,650 --> 00:03:06,880
That will not happen,

61
00:03:06,880 --> 00:03:09,740
because it will be scaled automatically.

62
00:03:09,740 --> 00:03:14,050
And therefore, pixels is a great absolute unit

63
00:03:14,050 --> 00:03:16,660
for setting dimensions,

64
00:03:16,660 --> 00:03:20,910
absolute because it's not relative to something

65
00:03:20,910 --> 00:03:23,430
besides the device resolution maybe,

66
00:03:23,430 --> 00:03:26,490
but it doesn't dynamically grow or shrink

67
00:03:26,490 --> 00:03:28,030
inside of the website.

68
00:03:28,030 --> 00:03:30,150
It only depends on the device,

69
00:03:30,150 --> 00:03:33,810
but not, for example, on the screen width

70
00:03:33,810 --> 00:03:35,930
or anything like this.

71
00:03:35,930 --> 00:03:39,210
For that, we would also have relative units

72
00:03:39,210 --> 00:03:42,110
which we can use, rem and percentage.

73
00:03:42,110 --> 00:03:45,480
And we're going to come back to that later in the course

74
00:03:45,480 --> 00:03:46,920
when we need them,

75
00:03:46,920 --> 00:03:48,210
but for the font-size here,

76
00:03:48,210 --> 00:03:49,993
using pixels sounds good.

77
00:03:50,940 --> 00:03:53,850
And I'll set this todays-challenge font-size

78
00:03:53,850 --> 00:03:56,513
to, let's say, 52 pixels now.

79
00:03:57,800 --> 00:04:01,910
If you do that and you then save this and reload,

80
00:04:01,910 --> 00:04:05,580
now we have this very large text here,

81
00:04:05,580 --> 00:04:08,890
which makes our daily challenge very obvious.

82
00:04:08,890 --> 00:04:11,400
And now, it's the first thing which we see

83
00:04:11,400 --> 00:04:16,399
when we look at this page, our actual challenge for today.

84
00:04:16,519 --> 00:04:18,560
And here, I also wanna come back

85
00:04:18,560 --> 00:04:21,110
to something I mentioned way earlier.

86
00:04:21,110 --> 00:04:24,120
You can change everything with CSS,

87
00:04:24,120 --> 00:04:27,378
and therefore you don't use HTML elements

88
00:04:27,378 --> 00:04:29,220
for the styling.

89
00:04:29,220 --> 00:04:30,680
You get some default styling,

90
00:04:30,680 --> 00:04:33,970
but that's not why you use HTML elements.

91
00:04:33,970 --> 00:04:36,290
You use them to describe your content

92
00:04:36,290 --> 00:04:39,980
and to provide the correct semantic around your content.

93
00:04:39,980 --> 00:04:42,080
That's what I mentioned earlier.

94
00:04:42,080 --> 00:04:44,490
And here, it should now be super clear.

95
00:04:44,490 --> 00:04:46,190
This is still a paragraph.

96
00:04:46,190 --> 00:04:48,040
It's not a h1 element.

97
00:04:48,040 --> 00:04:50,226
But it's now bigger than the h1 element,

98
00:04:50,226 --> 00:04:53,010
because we styled it such.

99
00:04:53,010 --> 00:04:55,190
And that's something you'll do all the time

100
00:04:55,190 --> 00:04:56,340
in web development.

101
00:04:56,340 --> 00:04:58,620
You will adjust the styles

102
00:04:58,620 --> 00:05:01,620
so that the things look the way they should look,

103
00:05:01,620 --> 00:05:03,950
and then you use HTML elements

104
00:05:03,950 --> 00:05:06,180
to describe your content correctly,

105
00:05:06,180 --> 00:05:07,730
but you don't use elements

106
00:05:07,730 --> 00:05:10,250
because you want to achieve a certain style.

107
00:05:10,250 --> 00:05:12,993
You do that with CSS only.