1
00:00:02,380 --> 00:00:09,140
In this course module, we set some important foundations about the way CSS works and we worked with selectors,

2
00:00:09,140 --> 00:00:10,830
properties and values.

3
00:00:10,850 --> 00:00:18,770
Now just to bring this back into memory, selectors are things like div, class blog post, ID main title,

4
00:00:18,950 --> 00:00:24,140
the disabled attribute or the universal selector. Properties are things like background color, we haven't

5
00:00:24,140 --> 00:00:24,490
seen that,

6
00:00:24,500 --> 00:00:26,140
we used background,

7
00:00:26,330 --> 00:00:31,880
it's connected to that of course though, width, color, margin, display. Here are also a couple of properties

8
00:00:31,880 --> 00:00:33,260
we haven't used before,

9
00:00:33,260 --> 00:00:40,310
we will use them throughout the course. Values then are things like red, percentages, colors and hex codes,

10
00:00:40,760 --> 00:00:46,070
pixels or clearly defined values like block, again

11
00:00:46,100 --> 00:00:50,090
these are things we will also see throughout this course.

12
00:00:50,090 --> 00:00:55,420
Now if you're wondering how do you know which properties and which values exist,

13
00:00:55,430 --> 00:00:58,220
let me start with the properties.

14
00:00:58,400 --> 00:01:04,400
If you google for MDN CSS reference or you use the link you find in the last lecture of this module,

15
00:01:04,820 --> 00:01:09,410
you will find this page where you got a basic explanation of the CSS syntax and where you

16
00:01:09,410 --> 00:01:11,650
then got this keyword index.

17
00:01:11,750 --> 00:01:17,710
Here you see not, just the properties CSS knows but all the things like all pseudo classes and elements,

18
00:01:17,720 --> 00:01:19,850
something we hadn't had a look at yet

19
00:01:20,300 --> 00:01:26,300
and this is a great way to finding that specific property you're looking for or finding more information

20
00:01:26,300 --> 00:01:30,310
about that property you found in the solution on stack overflow

21
00:01:30,370 --> 00:01:35,430
but which you don't fully understand. Now please here's one thing you should not do,

22
00:01:35,690 --> 00:01:38,680
don't learn this list by heart.

23
00:01:38,720 --> 00:01:40,550
It's way too long,

24
00:01:40,550 --> 00:01:46,430
there are properties you don't use at all and in the end, once you made it through that course and once you

25
00:01:46,430 --> 00:01:54,620
start working on project with CSS, you will see that you use the same set of maybe 20 properties all

26
00:01:54,620 --> 00:01:57,430
the time and it's really hard to memorize these.

27
00:01:57,710 --> 00:02:02,600
So this is a great reference but not something you should start learning right now,

28
00:02:02,600 --> 00:02:07,660
just want to point you to it so that you always know where you can look things up.

29
00:02:07,670 --> 00:02:09,530
Now what about the values though?

30
00:02:09,650 --> 00:02:15,710
For one, in the reference I just showed you, if you click on a specific property, you also see how you

31
00:02:15,710 --> 00:02:22,910
can configure it and which values it will accept because values are tightly coupled to specific properties.

32
00:02:22,910 --> 00:02:29,900
You can roughly categorize the types of values into four categories, though there are a bit more in some

33
00:02:29,900 --> 00:02:30,760
special cases

34
00:02:30,770 --> 00:02:33,970
but here are the four categories I came up with.

35
00:02:34,010 --> 00:02:39,050
You get properties that simply use predefined options, something like display block,

36
00:02:39,050 --> 00:02:44,180
we didn't learn about this property yet but this simply is a property, it doesn't use a hex code, it doesn't

37
00:02:44,180 --> 00:02:48,300
use a number, it just accepts a couple of predefined values,

38
00:02:48,380 --> 00:02:48,950
overflow

39
00:02:48,950 --> 00:02:51,520
auto would be another example.

40
00:02:51,740 --> 00:02:53,040
Then you have colors,

41
00:02:53,150 --> 00:02:56,100
they work with red hex code

42
00:02:56,240 --> 00:03:03,080
or a shorter version of the hex code and also some special color functions, something we'll also dive

43
00:03:03,080 --> 00:03:04,420
in later.

44
00:03:04,490 --> 00:03:12,930
Then we got length, sizes and numbers, something like pixels or percentages or just integers,

45
00:03:12,980 --> 00:03:19,340
again all these properties, we'll see them a couple of times throughout the entire course. And last but

46
00:03:19,340 --> 00:03:26,450
not least, we got functions, something like a URL where we seem to be using something different than

47
00:03:26,450 --> 00:03:32,930
just a color as a background or transformation functions where we can scale or rotate elements, something

48
00:03:32,930 --> 00:03:35,390
we'll cover in the transformation module.

49
00:03:35,390 --> 00:03:37,220
And of course there are more values,

50
00:03:37,220 --> 00:03:38,880
again the reference holds them all

51
00:03:38,960 --> 00:03:41,290
and you will see way more in this course,

52
00:03:41,330 --> 00:03:47,120
just wanted to round this up by letting you know where you can find more information and how this generally

53
00:03:47,120 --> 00:03:47,820
works.