In this course module, we set some important foundations about the way CSS works and we worked with selectors,
properties and values.
Now just to bring this back into memory, selectors are things like div, class blog post, ID main title,
the disabled attribute or the universal selector. Properties are things like background color, we haven't
seen that,
we used background,
it's connected to that of course though, width, color, margin, display. Here are also a couple of properties
we haven't used before,
we will use them throughout the course. Values then are things like red, percentages, colors and hex codes,
pixels or clearly defined values like block, again
these are things we will also see throughout this course.
Now if you're wondering how do you know which properties and which values exist,
let me start with the properties.
If you google for MDN CSS reference or you use the link you find in the last lecture of this module,
you will find this page where you got a basic explanation of the CSS syntax and where you
then got this keyword index.
Here you see not, just the properties CSS knows but all the things like all pseudo classes and elements,
something we hadn't had a look at yet
and this is a great way to finding that specific property you're looking for or finding more information
about that property you found in the solution on stack overflow
but which you don't fully understand. Now please here's one thing you should not do,
don't learn this list by heart.
It's way too long,
there are properties you don't use at all and in the end, once you made it through that course and once you
start working on project with CSS, you will see that you use the same set of maybe 20 properties all
the time and it's really hard to memorize these.
So this is a great reference but not something you should start learning right now,
just want to point you to it so that you always know where you can look things up.
Now what about the values though?
For one, in the reference I just showed you, if you click on a specific property, you also see how you
can configure it and which values it will accept because values are tightly coupled to specific properties.
You can roughly categorize the types of values into four categories, though there are a bit more in some
special cases
but here are the four categories I came up with.
You get properties that simply use predefined options, something like display block,
we didn't learn about this property yet but this simply is a property, it doesn't use a hex code, it doesn't
use a number, it just accepts a couple of predefined values,
overflow
auto would be another example.
Then you have colors,
they work with red hex code
or a shorter version of the hex code and also some special color functions, something we'll also dive
in later.
Then we got length, sizes and numbers, something like pixels or percentages or just integers,
again all these properties, we'll see them a couple of times throughout the entire course. And last but
not least, we got functions, something like a URL where we seem to be using something different than
just a color as a background or transformation functions where we can scale or rotate elements, something
we'll cover in the transformation module.
And of course there are more values,
again the reference holds them all
and you will see way more in this course,
just wanted to round this up by letting you know where you can find more information and how this generally
works.