narrator: One of the most important messages
that I want to get across in this course is that
you do not have to memorize every single CSS property
that there is or that you learn in this course.
And also that you can actually start writing
your own CSS even when you don't know everything yet.
So, for beginners like you it's really important
to be aware of the fact that it is okay
not to know everything and that you can always Google
when you don't know anything or read the documentation.
And so, in this lecture I want
to quickly show you some techniques that I use
to Google stuff that I don't know
and also how to read documentation in order
to learn something about a property that
you don't know yet or that you don't remember
how exactly to use.
And let's start with a hypothetical
but real world scenario.
So, let's imagine that you built a form
on your webpage and that form has a button
but now you don't remember
how you can actually add like
that mouse cursor to the button.
So when your user's hover the button
you want it to look something like this.
So this cursor here happening
but again you don't remember how to do that.
But again, you might not remember
how to actually do that
and this is really no problem at all.
So, you can always Google something
if you don't know how to do it
and read the documentation as well.
So, in this case, this is what I would do.
So, I would Google CSS
and so the first word that I always use when
I'm searching something related to CSS is CSS.
And then let's say CSS property
to add a mouse cursor to button.
So, this is basically what you want
to achieve, right?
And then in the search results
usually you want to look for stackoverflow.com
So, Stack Overflow is basically a website where millions
of users have posted tens or maybe hundreds
of millions of questions about all kinds
of programming and that includes CSS.
So this W3schools is usually not a good reference
so don't use that.
Then there's also CSS-Tricks which is also very good.
And down here there is developer.mozilla.org
which is actually the MDN documentation
which we will check out also in a minute.
But for now I'm interested in here is Tech Overflow
which again is like a Q & A site where people
can ask questions and then other users help them.
So, here we have a question
how to change the cursor into a hand
when a user hovers over a list item?
Now you are not really interested in the list item
but the rest of the question is kind of
what you're looking for, right?
So let's try to take a look at our responses here.
And here is the most popular one
and which was also voted as correct
by the original poster.
So, here what to do is to basically
add cursor set to pointer to the element
which should get that hand, right?
And in fact that is actually the solution.
So, now we can just copy the solution
or if you think that is a bad practice
well then you can just go to your button
and write it manually.
But what matters is that now you solve
your problem simply by Googling it now, right?
So again, don't feel bad for having
to Google when you don't know anything.
I do that every single day.
So really, developers never know everything.
We just know that something exists
and we also know how to then look it up.
So, of course you need to know the fundamentals
about how CSS actually works, but again
you don't need to memorize every single property.
You just need to know that it is possible
to add a mouse cursor to a button
but you don't have to always know
how exactly to do that, okay?
And now let's try another example.
And returning actually here to our page.
Let's imagine that we wanted to center all
of these links inside of the navigation.
So, here we have the navigation
and here we have these links
and so we want to center them.
So, let's try to do that on our own.
And the first approach might be to select
these anchor elements and set
the text align to center, right?
So, I'm pretty sure we selected them somewhere
and here they are actually.
And so let's do what I just explained.
So, let's try text align and set to center.
Let's give it a save.
Maybe I have to reload manually.
Okay, but now you see that nothing changed.
So, let's inspect this
and omit some more space here, all right
and so selecting them of course we can see
that text align center is indeed set
but still nothing happens, all right?
However, if we think about this,
this actually makes sense because
what text Align does is to basically center
some text inside of an element.
Now, these elements here are inline elements
and therefore the only space that they occupy is
exactly the space that the content needs, right?
And so the width of these elements
is exactly as wide as it needs
to be to fit the content.
Therefore, it is not possible
to center anything inside of them
because there is simply no empty space
inside of which the element could be centered.
Okay? So having arrived at that conclusion
maybe now you don't know how to actually solve
the problem because you still want
all these links centered here.
So, let's try to Google that once again
let's say CSS how to center anchor elements.
Now, okay? And now again
you want to be looking for stackoverflow.com
and this one looks exactly what we are looking for.
So, how do I center an anchor element in CSS?
And many times you actually need
to open up various questions because not always
their question is exactly the same as yours.
Now, in this case we actually have
the correct solution right here.
So, what they say is add the text aligned CSS property
to its parent style attribute.
Well, this part of the style attribute
is not really relevant because remember
I told you not to use style like this, right?
But instead using a class
and that is also not really important.
What matters is that what we need is this.
So, we need text align center set
to the parent, all right?
So, let's then put that into our code
and so we want this not here
but we want it in the NEF
So, let's go look for the NEF.
Should be somewhere at the top.
Here it is and now text align set to center.
And here we go.
So, now these elements are actually centered
inside of the parent container, okay?
And in this case, this works
because these elements are inline elements
or actually in this case inline blocks
but what matters is they do not occupy
the entire width of the parent.
And so when we want to center a bunch
of elements like this no matter if inline
or inline block elements then all we need to do
is to add the text aligned center property
on the parent element, okay?
Now may be you wanted to learn a little bit more
about this property.
And so let's now use the MDN documentation.
Now, this is not an official documentation
but it's still what most developers use
to look up CSS properties.
So, we write MDN then CSS because on MDN
there are many different languages.
And then let's say text align and then here
the first result is already what we're looking for
So developer.mozilla.org.
And so here there is basically a description
and also some demos about different values
for this property.
So the text align CSS property sets
the horizontal alignment of the content
inside a block element or table cell box, okay?
And so that's exactly what we did.
So, we set it here text align center
on a block element, right?
And previously we tried to set it
on an inline block element and there it didn't do anything.
And so we could also have gotten that here
from the documentation.
Then here we can click on some different demos.
So of course, left, right, center,
and there is even justify.
Then here are all the different values that exist.
And then here's a bunch of even more stuff
that you probably don't even need.
So, a lot of more examples
and this one is also important
while not in this case
but in some more modern properties.
Here we can see the browser compatibility
of this specific CSS property.
So in this case it's not that relevant
but sometimes you might want to check that out as well.
Now, another one for example we can check
for border because this one is a little bit complex.
And so let's say you want to set a border
for example a dotted one or a wavy border
but you don't remember exactly the syntax.
All right, so here you have a couple
of examples once again and you can click them
and check them out.
And here you can also learn, as I mentioned before
that border is actually a shorthand property
for to border with style and color.
And then here again, you have a bunch of examples.
And yeah, for all the properties that you want
you can check out the documentation
to learn exactly what values you can give them
and how they work.
Okay, and I think with this
I showed you enough so that you can
on your own now try to google some questions
that you might have and also read documentation
about some properties that
you might not know exactly how they work.
And this is a really important developer skill
that you need to learn as you start
becoming a CSS and also HTML developer.