Now let's work on the styling
and for that we can go back to the daily challenge,
CSS file and add a new CSS rule here.
In this case, I'll add
the image type selector,
because I want to style all images on the screen
in the same way.
This might not necessarily be the case,
but here we only have one image.
So it is fine to use this selector.
And then, well,
how we do we want to style this.
I want to make it a bit smaller.
I want to shrink it a bit.
So I want to reduce the width and height.
I also want to actually round it
so that it's a circle instead of a square.
And I also want to center it.
Now, centering will be a bit trickier than you might think.
And therefore I'll start with
giving it a width and a height
and turning it into a circle.
Now for setting the width and the height,
we indeed have the
well, width
and height
CSS properties.
And that sets the width and the height
of an HTML element.
And you can not just set the width and the height
of an image.
You could apply this on pretty much any HTML element.
But here now, we need to provide the values.
And just as for the font size,
here we need a dimension.
We need a size value.
And just as with the font size, we can set this in pixels.
We could give this a width of 200 pixels
and a height of 200 pixels.
And if you do this
and save this,
it's now a bit smaller.
I'm also zoomed-in quite a bit here
to make this more readable.
If I would view this page in a non zoomed-in mode,
it would look like this at the moment.
I'm just zooming-in here so that you
have an easier time reading what's on my screen.
So now we shrunk that image.
How do we turn it into a circle?
For this we can target a new CSS property,
the border-radius
CSS property.
This sets the radius of the, well,
border of an element.
And with that, I'm not talking about a visual border.
We have no black or blue or anything like that
border around the image,
but it of course still has a natural border.
It ends somewhere and that's the border.
So here between red and white, that's the border.
And we can shape this border and around this border
by giving it a border radius.
And here we can now give this a border radius
of let's say 100 pixels.
And if I do that
and I save this,
and reload,
now it's rounded.
Now why 100 pixels and not 50 let's say?
Well, if I use 50, then it's not a perfect circle.
You could, of course also use this look if you prefer it,
but it's not a circle.
But if I use 100,
it's a circle because that's half my width and height.
So for now save this,
I'm back to my circle.
Now the only thing that's missing
is that I want to center this image.
And that will be a bit trickier.
You could think that we maybe use text align again
and set this to center.
But if you add text align center on the image,
and you reload,
you see it's not centered.
Now you might think it's not centered because it's no text,
but that's actually not even the reason
because I can already tell you that the image
will be treated like texts when it comes to this.
So that's not the reason.
Instead, text align actually does not align the element
on which you apply it,
but the content of that element.
So when we added text align center on a paragraph,
it's not the paragraph element that was centered,
but the content of that element.
So the text.
Which is of course what we wanted to center.
So that was fine.
But now in the case of the image,
it's a white element
so there is no content to center,
and the element itself isn't centered.
If we inspect this element in the browser dev tools,
if I hover over image, we see,
highlighted on the left,
the boundaries of this image,
and we see,
this is just a part of the row in which it sits,
but it is not centered here.
And if I temporarily add text align center here,
in the dev tools, we see this has no effect.
As we saw before,
the elements still sits in the top left corner.
And I'll reload to get rid of that
texts align center style here.
So how can we center this then?
Well,
since
text align does not affect the element on which you add it,
but the nested content inside of the element,
one way of centering it,
would be to go to the body element,
target the body element in CSS,
and add text align there.
Because image is content of body.
It's inside of the body tags here.
And that's what I'll do.
We can now also target body
and add text aligned center here on body.
And if we save this and reload,
now it is centered,
because the image is treated as text when it comes to that.
But since it's content of the body,
it is now also affected by text align.
And that's a tricky thing about CSS,
which I hopefully could make clear now,
why it works like this
and how we can work around that limitation,
if you want to call it like this,
by simply targeting a higher level element.
In this case, the parent,
as it's called of image,
the element surrounding image,
which is the body.
Now one little adjustment I quickly want to make here,
is I'll take that body's CSS rule,
remove it at the bottom and actually move it
to the top of this CSS file.
You don't have to do that,
as you saw, it worked the other way as well.
But I like to structure my CSS code such that
it kind of fits my HTML code
and here body is the first element.
So I also want to select it first here.
And for the same reason,
I'll also take my image
and bring that further up here as well.
But you can structure this in different ways.
Here it doesn't really matter which order you use.
I'll keep my ID selector down there
because I also like to group my type selectors first.
And then if I have upper selectors, like the ID selectors,
I put them all after all the type selectors.
But again, that's all just personal preference
and you can use a different way of structuring
your CSS code here as well.
Now, in addition,
I also want to get rid of text align center
on the age one element
and on the paragraph element,
because since we already have it on the body,
we already do a center,
all the content in body,
all the text content in body.
And hence if I reload that's still centered
and we now don't have that duplicate text align code.
It wouldn't hurt if we have it,
but having code that doesn't do anything
is never a great idea.
And that's why I removed it now in h1 and P.