Original subtitles

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 forum on your webpage

and that forum has a button,

but now you don't remember how you can actually add

like that mouse cursor to the button.

So when your users hover the button,

you want it to look something like this.

So with 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 stackoverflow 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 stackoverflow,

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 solved 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 we'll need some more space here.

All right.

And so selecting them,

of course we can see the text-align, center is indeed set,

but still nothing happens.

All right.

However, if we think about this,

this actually makes sense

because texts line 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's 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.

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- align 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 NAV.

So let's go look for the NAV.

It 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-align center property

on the parent element.

Okay.

Now maybe 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's 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.

Well, 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 the border width, 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 to 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.