So let's now add some styling
to our main content
and to the different elements in there.
And I'll start with the main element itself
because this overall main content
should sit in a little box with rounded corners,
with a nice background color,
which is centered on the screen.
And therefore in my CSS code,
I want to target the main element here
and then actually do a couple of things to it,
for example, give it a background color of RGB,
and then I'll use 122, 74, 218,
and that's just the color I picked here,
of course you can use a different one.
If I saved as we have this background color,
but like this, it doesn't look that good,
instead, the width should be restricted,
the element then should be centered,
the corners should be rounded,
and I always want to have some internal spacing in that box
between the border and the content.
Now for that internal spacing,
we learned that we can use padding to set that.
And here I'll set this to 32 pixels,
though of course you can experiment with different values.
I also want to restrict the width
which I can do with the width CSS property
that sets the width of an element.
And here I'll set this to 700 pixels.
If I do that, we see that internal spacing
and we see that the width is restricted,
but it's not centered.
Now here we can't center this with text align center
because the main element,
which is the element which I want to center
is not a inline element.
So if we would add text align center
here on this main element,
then we would center the text or the inline content
as you learned inside of that main element,
but that's not what I want to do.
Here I don't want to center the text inside of main,
I instead want to position that main element as a whole
centered on the screen.
The content in main should be left aligned,
it should not be centered.
So therefore we need to center main overall,
and since main is not a inline,
but a block element,
we can't go to a higher level,
to body and add text align center there
to center body's content,
so to main element inside of body,
because texts align as you learned
only affects inline elements and main is no such element.
That's why we need a different way
of centering this element as a whole.
So to center that non-inline element,
we can use a little trick.
We can set a margin which controls the outside spacing.
And here we can set 32 pixels
as a top and bottom margin
and then set auto as a left and right margin.
This year is a slightly alternative margin syntax
where I don't just set one value,
but I set one value for top and bottom
and one value for left and right margin,
that's one of to support that margin syntaxes.
As similar syntax exists for padding,
there're also are other alternative margin syntaxes,
you can, for example,
target every single direction
and set its own margin value,
but very often you have just one value
for all directions or one value for the vertical
and one value for the horizontal margin.
And auto is a special value,
which when used on the horizontal axis
will actually center the element on which you apply it,
if it is a block element,
and therefore I'm using it here
on this block element on the horizontal axis
to center this element.
If I save this now, it is centered.
Now to give this box rounded corners,
we can set the border radius property
and set that to let's say, eight pixels
to round off those corners slightly.
If we do that, we see those rounded corners.
Now black on purple alls is a bit hard to read
and therefore as a lost value here,
or as a lost property here on the main element,
I also want to target the text color
with the color CSS property.
And here I'll set that color to rgb,
and then maybe, 248, 241, 255,
but of course you can also set your own color here.
Now color,
unlike background color will be inherited
by child elements and by descendants.
And therefore, if I set the color on main,
all the HTML elements inside of main
will inherit that color and use that color,
and hence we see that color applied.
The only exception is the link,
and the reason for that simply is that this link here,
if we inspect it, this anchor element
has a browser default style,
even though that looks very cryptic,
this webKit link color, which is applied,
that's just some browser built in color,
you could say.
But that is a color which is applied as a browser default,
but that turns out to have higher specificity
than the inherited color.
That's why this inherited color
has the strike through effect here,
meaning that it's not applied
because this default color
has the higher specificity
and overwrites the inherited color.
And therefore for the link,
we'll have to set our own color again
with yet a higher specificity
and anything will be higher than the default styles
except for inheritance,
which is actually lower as you see here.
But we'll come back to the link in a couple of minutes,
for the moment this indeed looks okay,
we got that white color.
Now I want to work on the list styling
before I then also style the links.