So let's continue working on our base CSS file
and the base CSS code that we wanna have for this project,
some base styles.
And I wanna to continue by setting up the
theme for this project.
Now, you might recall that earlier in the course,
we had a section where we introduced you a little bit to,
to web design,
but also to certain CSS features
that help with creating themes,
and with reducing work.
Specifically, we did introduce you to CSS variables
and whilst we haven't used them too much
throughout the course,
since most parts of the course, then weren't about CSS.
I do want to use them here.
I do want to set up a general color palette and a couple of
general margin and padding settings.
So to say, which we can then use throughout
this entire website here,
so that indifferent CSS files and different CSS rules,
we don't have to remember and repeat our color definitions,
but we can instead simply refer
to our clearly defined CSS variables
and CSS variables basically work like JavaScript variables.
You can use them to define a value once
and then use it repeatedly in different parts of your code.
And that is what I want to do here in this HTML element.
I wanted to define some CSS variables here,
some global CSS variables,
which I then can use anywhere
in any ever see us as rule and file.
And that's why I'm using base CSS
and the HTML selector here.
Base CSS, because I will include
this file in all my views
and HTML,
because if I then define CSS variables in this tag selector,
these variables thanks to inheritance will be available in
all other selectors for all other elements as well.
That's why I'm doing it here.
We could also use the star selector to define our variables,
but the difference is that this selector will actually visit
every single element on the page and apply certain styles,
which means it would apply our CSS variables to a lot of
elements repeatedly. Whereas if we rely on inheritance,
the styles only get applied once
and the browser then just inherits them.
And from a performance perspective that is more efficient
than using this star selector.
You want to use that star selector
in cases like for box sizing here,
where you want to apply a certain style
to all elements on the page.
But the style you do want to apply
is not inheritable as box sizing is.
You can't inherit that,
and therefore we wanted to find it like this.
So that was a lot of talking,
but I wanna to ensure that we're all on the same page and
that we all understand why certain decisions are made.
And therefore now here in HTML,
we can define a couple of CSS variables.
And you might remember that you define a CSS variable,
not as in JavaScript with a keyword like let or a const,
but that instead you use two dashes
and then any name of your choice.
So you add a custom property.
That's the official name of CSS variables,
custom properties,
and those custom CSS properties start with two dashes.
And then we could, for example, define a gray background,
color So I'll choose color gray as a name here.
And I wanted to find different shades of gray here
so that we can use these different shades
for different parts of the page.
And a common technique here is
to then use a relatively big numbers,
like 500 to express darker shades with higher numbers and
lighter, brighter shades with lower numbers.
And I'll use 500 as a relatively dark gray.
And here I already picked a gray in advance,
which has this RGB code,
but of course you can use any gray you want.
And I definitely want to emphasize that you should take
this project to really all's experiment,
experiment with the code,
pause to videos,
and try implementing certain solutions on your own,
and also play around with the colors
and feel free to pick different colors.
Now, this is my dark gray,
which I'll use in various parts of this page,
but I will also use other shades of gray.
And now to ensure that I don't bore you,
I will quickly fast forward and add all the color variables
I plan on using,
of course you attached find a file,
which contains all these variables
so that you can simply copy
and paste them into your base CSS file.
If you don't want to type them out on your own.
Now here are the colors I picked in advance,
a nice little schema with a primary color,
some gray colors and some extra colors which we'll need for
all the this course section.
And these are the colors I will work with.
But as mentioned,
definitely feel free to add your own colors.
Now colors aren't everything I want to add.
Instead, I also want to ensure
that whenever I work with spacing,
specifically with padding and margin,
I don't have to always guess which margin or padding to use,
but I want to have some clearly defined values,
which I use over and over again.
And the offer.
I will always add a couple of special variables,
which I don't use for colors,
but for sizes instead.
And I'll name the first one,
space one,
and that will hold a value of 0.25rem
Now rem is that special unit you learned about
in this course,
which is relative to the font size in the end.
And it's a great unit to use to ensure
that whenever your users set a different
font size than the default of 16 pixels,
your overall layout will scale with that font size
and your spaces, margins, paddings, which you're using
fit the bigger fonts.
That's why rem is a great unit to use.
And why it's often preferable to pixels or other units.
Of course, you could also build this app with pixels though,
if you prefer that, but rem are quite commonly used.
Now all the find a couple of rem values here,
so that I got different spaces,
different space variables to choose from when I want to set
up some spacing later.
And what I'll do here basically is I'll pick
incrementing numbers
and they are multiples of the smallest possible space.
So space four there is four times 0.25rem,
which is 1rem.
And of course you can as always add
as many variables here as you will need for your project.
In my case here,
the variables I'm defining here, show to do the trick,
and we can always add more if we need more.
Now last but not least,
I will also work with a couple of border radius
and shadows for all to this section.
And I want to ensure that I have a
standardized border radius
and shadow definition for this as well.
And hence, I'll always add a border radius,
small variable here,
where I store a --border-radius-small of 4px
and --border-radius-medium which is 6px for me.
And here I am using pixels because
unlike with distances between boxes and so on.
The border radius could scale with font size,
but they don't necessarily have to,
it is something you can discuss,
and you can come up with different solutions,
but I prefer pixels here.
The last but not least I'll add a
-shadow-medium-variable here where I want to define my
definition for a medium-sized drop shadow.
And for such a shadow, you define find a couple of values,
like the offset on the X and the Y axis,
and then the blur radius of the shadow.
So the size of the shadows, so to say,
and then RGB a color to have an alpha channel,
which adds transparency of 0,0,0,0.2 here,
and the distance to shadow I will use,
which gives us a nice of drop shadow
with some offset to the bottom,
um,
a relatively big radius and then distance parent color.
But again, of course you can pick your favorite shadow.
And with that, I set up my main theme-ing variables,
which I'll use for this project.
And these variables should help us write consistent CSS code
in the other files as well.