Now that we defined all those variables,
those CSS variables,
we can of course use them.
And for the moment I'll stay in the base.css file here.
And after defining my HTML styles,
including all those variables,
I'll define some styles for the body specifically.
And here for the body,
I, for example,
wanna set a background color.
So we can use the background-color CSS property for that.
And that allows us to set a background color
for the entire page.
Now, here, I wanna use one of my variables
and we do this with the built-in VAR function,
which we can use in CSS.
And here, we then refer to the name of a variable.
In my case, color-gray-500.
That's the background color I want to use
because I want to build a website that uses this dark look.
Now this VAR function takes an optional second value
separated by a comma,
which would be a fallback value
if that variable isn't found,
but I know that the variable will be found here
so I can omit it.
Now background color isn't everything.
I also want to set a main text color.
And of course, that should be a contrasting color,
which is why I did define
my color-gray-100 shade,
which is a lighter gray shade,
which is more on the white-ish side.
And, last but not least,
I'll set margin to zero because by default many browsers
give body a margin so that there
is some spacing on the edges,
and I don't want to have any spacing here.
The body should not have any surrounding empty space.
That's why I will override the browser defaults
with margin:0.
And since this will have a higher specificity,
my own styles defined in such a tag selector
have a higher specificity than the browser defaults,
this will win over the browser defaults.
In case specificity doesn't tell you anything,
definitely revisit those basic CSS sections
we had in the course where we introduce you
to this concept in depth.
So with that, if we reload this page,
we have this dark look,
and we can still read the text,
and this doesn't look too bad.
Of course we're still not there yet, but it is a first step.
The next step is that I wanna ensure
that my main element,
which I have on a signup page, for example,
and which I will have on every page,
has some nice dimensions that center the content
because every page content for all my to-be-added pages
should be centered.
Therefore, back in base.css,
I will also target the main element by it's a tag type here,
because for all the pages
I wanna set this to a specific size.
That's why I'll do it in the base.css file.
And here I'll then give it a width of 90%,
but on mobile devices that will be great.
And of course,
I do wanna optimize this site for mobile devices
and small screens as well,
but on bigger screens,
a width of 90% quickly will be too wide.
Therefore I'll always add the max-width property
to give this width of the element a limit.
It should generally be 90%,
but no more than let's say 50rem.
And this is just some arbitrary value I came up with.
Of course, you can experiment with different values here.
Now then, I also want to make sure that my main content
doesn't sit on the left edge of the page,
but instead is centered.
And you'll learn that this can be achieved with margin: auto
or margin: 0 auto, doesn't matter,
but the margin left and right has to be auto.
And that is achieved both with this shortest notation,
as well as with this notation
where to 0 is margin top and bottom,
which doesn't matter to us here
and this here auto, this is the margin to left and right.
And if we now save this and reload, the content is centered.
The text is not centered,
but we have this general frame here.
And if he would inspect this in a browser dev tools,
then of course, if I hover over main,
you would see that this has this margin
on the left and the right,
these orange borders here that's the margin
in the dev tools.
And if I actually
give us a bit more room here,
you see this margin gets bigger,
and this box here, this blue box in the middle,
at some point doesn't grow anymore
because we have this max width set up.
And here I'm zoomed in quite a bit,
if I would zoom out,
this would be even clearer to see,
but I'll zoom back into to make this more visible.
So that is the main styling.
Now there are more general styles,
which I wanna set up for this page
and the next general style I'll add
is the unordered list style,
which I simply want to set to some default styling
where I have no list style.
So list-style set to none,
to not have any bullet points or anything like this.
And where the margin is then set to zero
and padding is set to zero so that all these
browser defaults are overwritten.
Again, thanks to specificity,
this rule will win over the browser defaults.
And actually I don't just want to target
the unordered lists,
but also the ordered lists I might add.
And therefore you learned that we can combine
multiple selectors for one of the same rule,
by adding a comma between them.
This can be written in one line
or seen very often split across multiple lines, both works.
And this then ensures that the styles set up here
are applied to all the unordered lists
and all the ordered lists.
So the different selectors
are separated by commas here then.
I also want to set up some general styles
for anchor elements
because there I wanna get rid of the text decoration
and set this to none to remove the underlining.
And I'll give it a default color,
which we will override in a couple of places,
but I wanna set up a general color,
which is my color-primary-400 color,
one of the variables I defined.
And with those changes made,
this link down here for example,
now has this orange color and so does my logo.
Though we'll revisit the logo throughout the discourse.
But these are some general base styles
of which I want to have.
Now last but not least,
before we leave the styling part for the moment,
I also want to change the look of this button,
of the Create Account button.
And for this, it is worth remembering,
if we have a look at signup.ejs,
that this button here actually has a class of BTN.
Now this means that we can set this class here
and to find a styles for the button by targeting this class.
And I'm using a class instead of an ID
or the type selector deliberately
because I want to be able to add this class
to multiple elements on this overall website.
And I also don't just plan to target button elements,
but also some anchor elements throughout this website.
That's why neither the button type selector
would do the trick,
that would leave out all the anchor elements,
nor the ID selector does the trick
because IDs should only be used
if we have one exact element.
IDs should be unique.
That's why I'm opting for a class here.
And that of course then simply means that in base.css,
after defining all these base styles with tag selectors,
I target a class to be precise to BTN class.
And you'll learn in this course
that you do this with dot and then the class name,
that's the CSS selector for targeting a class.
And in here, we can now set up any styles we want.
For example, I'll set cursor to pointer
to ensure that when we hover over the button,
we always got this pointer mouse cursor.
I'll set font to inherit
because by default buttons bring their own fonts.
And I want to force inheritance instead so that
the font family set up in my HTML element is inherited,
the browser defaults targeting buttons do not inherit,
and they have a higher specificity
than the built-in inheritance.
So to force inheritance,
I can set the font to inherit here
with this special inherit value.
This ensures that my buttons or all the elements with the
BTN class get the main font of this page.
Now I also want to set up some padding
so that we have some space to top and bottom
and left and right.
And to top and bottom I'll use space-2, which was .5rem.
And to left and right,
I'll use more space and go for a space-6,
which was 1.5.
And here I'm using these variables so that if I ever would
want to change the overall layout of my page,
I could do it in one place where the variables are defined
instead of visiting all the different CSS rules
where I am using these spaces.
That's the advantage of using such variables.
Now, I also want to add some colors,
for example, a background color.
And the background color here should be the primary color,
so the 500 shade to be precise,
and the text color,
set with the color property as you learned,
that should be color-primary-500-contrast,
which is a specific variable I defined
for this main color here,
which is a good contrast color,
which is white in this case here.
We could also go for primary-100,
which would be a very light shade of the primary color
that will probably also work,
but here I went for a dedicated contrast color
that was defined,
but both approaches would be viable.
Next I also want to add a border
and I'll give it a size or a width of one pixel.
And I'm going for pixels instead of REM here,
because I don't want to ramp up my border size
just because the font size increased.
I don't wanna have super fat borders
just because the font size was changed.
So I'll go for pixels here.
And then a solid color border.
So no dashes or anything like this.
And then for the border color,
I will again use a variable
and I will again use the 500 primary color here.
Then as a last step,
I wanna add a border radius here to have rounded corners.
And there I will use border-radius-small.
This specific variable I predefined.
So these are my BTN styles now.
Of course, I also wanna have specific styles
if we hover over a button
or we are currently clicking or tapping on a button
and that can be achieved with those pseudo-classes,
those pseudo-selectors you learned about.
You can add such a pseudo-selector or class with a colon
and then the name of that pseudo class or selector.
And in this case,
I wanna add the hover pseudo-selector
and then the active pseudo-selector.
And again, here,
I'm grouping two selectors into one of the same CSS rule,
because I want to apply the same styles
for these two different selectors,
for the hover and the active selector.
Active will kick in if the user
is currently pressing the button,
hover already kicks in if you're hovering over the button,
which of course is not possible on mobile devices.
And then here the styles I do want to apply
are background color
var(--color-primary-700).
So a darker, main color.
And I also wanna change the border color
to that same darker color.
And that is it.
Now throughout this course,
I'll define more base styles,
more button alternative styles, and so on,
which we will need from time to time.
But for the moment we got everything we need.
If we now save this
and I fixed this error
where I have an incorrect background color variable name,
but if I now save this and I reload,
now I got this button look here.
And now I would say we're ready to move on to
styling this form before we then finally
also add all the authentication logic
which we want to have for this website.