Lecturer: Time to now use some of the guidelines
we just learned about colors and practice.
And this is gonna be a lot of fun so let's get started.
And let's start by quickly choosing
a base color for our design.
Now of course in the real world
a lot of thought needs to go into this decision
but we will just very quickly choose a color here
just to see how it works.
So there is a lot of like green colors here in the pictures
like here.
Here also this nice green in the plants, as well as here.
And this entire chair or couch is actually green as well.
Also, this small shop focuses a lot on health,
like here or here.
And so if you remember
the color green stands for nature, growth and health.
And so therefore let's go with a green color.
So something like this.
So I will use one of the tools
that I mentioned in the last lecture,
and that is Open color.
So the URL is this, which once again,
you'll be able to find at my resources page.
So here we have a lot of colors
with the corresponding hex code.
So gray, which we will come to a bit later.
So we're looking for green.
And so here we have like teal, green and lime.
So I'm not looking for this one.
And actually I think the one that I like is this teal.
So this is, if you look at this here at these pictures
then you see that teal is the one
that more closely resembles the color that we already have.
So we could now choose any of these
but this dark one here looks pretty nice to me.
So I will just color this hexadecimal code.
And then here in the comments
let's just write our color system here.
So main color
is this
and then it gets, even in the comments, nicely highlighted
because of that VS code extension that we installed.
And remember that for our real world color palette
we would now go ahead
and generate shades and tints for this color.
Now in this case, actually the tints are already here,
so like the lighter versions.
So if we need one
we can simply go ahead and take one of these.
All right, let's just choose the gray now.
And there's only one gray, so let's go with that.
So this gray should be used for the text
and so I'm going to choose this one.
I could also choose this one,
but yeah, let's go with this one here.
That one might be a little bit too light.
And that's it.
And from the hex code,
you can actually see that these are not real grays
because if they were
then the first pair would need to be the same as the second
and the third pair.
Remember that?
All right, but anyway, let's now actually use these colors.
And the first thing that I'm going to do
is to make all the text on the page gray.
So using this gray here, copying it again,
and remember that the color property
is one that gets inherited.
And so we can simply put that here on the body.
So color, well, I had caps lock turned on,
so color
giving it a save and there we go.
So that looks a lot more like it was actually designed,
right?
So that's really nice.
So we are definitely going somewhere here with our design.
And now it's time to take this color here
and actually use it here on this link.
So this link, we actually want to style it as a button.
So, where is that?
Yeah, so here it is in button
and it also has this button big class here.
But let's just start with button.
And this should be reusable.
So let's put it up here.
And now remember how we should always
use the pseudo classes of link and visited
since this is actually a link and not a button element.
And it is not a button element
because this is supposed to be a link
that actually leads somewhere.
So Shop chairs will probably lead us to another page
which is then their online shop.
So it's not a button
because it doesn't do anything,
like for example, opening a model window.
And so if it leads somewhere, it should be a link.
And if it does something, then it should be a button.
But also more about that a bit later in our main project.
Now let's use our background color here.
Well, that's not it.
Now we need to grab it again here.
Okay, and now let's give it the actual styles.
So first of all, the color should now be white.
So color fff.
We don't want the text underline.
So that is text declaration, remember?
And right now, by default it is underlined
but we want it to be none.
So that looks better already.
And now let's actually also turn it uppercase.
So that's something common in buttons.
And remember that is text transform set to uppercase, right?
And now finally, let's give it some padding.
So on the top and bottom let's give it 16 pixels
and left and right, 32.
And these values are coming from my spacing system up here
but I will not yet go into that system, okay?
So some space was actually created here
but this element didn't move down.
So basically the distance here
between this text and this one didn't change.
And do you know why that is?
Well, it is because this anchor element is an inline element
and on inline elements the box model
does not work as expected.
Remember that?
So basically vertical spacing
does not actually create new space.
But that is what we want
and so we can set it to an inline block, right?
It would not be block
because then it would occupy all the space that it can,
like this, right?
So this is not what we want, but we want inline block.
And now there is some more space there, right?
Now finally, let's just make this bold.
And for that we have our font weight of 500, I think.
So here in the URL we can actually nicely see it.
So we have 400, 500 and 700 selected.
And actually if we now decided we also want 600,
we don't need to go back to Google Fonts.
Instead, we could simply add a 600 here,
then a semicolon and then it would also load that one.
All right?
But we just want the 500
to make this text here just a little bit bolder.
So font weight of 500, and yeah, that looks a bit nicer.
And later we will also make this round
but for now we don't yet know how that works.
Nice.
Now just about the font size
but then I also wanted to talk about the hover state.
So usually when we hover a button like this
it might change its color.
So it might turn lighter or darker.
So in this case, let's just make it lighter
because that's one of the colors
that we actually can just take from Open color here,
but first let's make the text a bit bigger.
Let's keep these properties a bit together with the font.
So font size of 18 pixel.
Beautiful.
And now let's get that lighter color here from Open color.
And so this is our usual color.
And then as we hover the button
we might want to change the color to this one.
So just a subtle effect, but let's copy it here.
And then let's say button hover
and button active.
So always in this order, okay?
So background color.
And then there we go.
Let's check that out.
And that looks beautiful.
Really, really nice.
Now there is just one thing that we should do here
which is to check the contrast
between the background color and the text color.
So remember that this is extremely important
to make text accessible for everyone.
So I will copy this hex code here,
and then I will come to this tool that I mentioned,
which is called Coolers.
And one more time, by the time you're watching this,
this tool might look different,
but somewhere there must be this contrast checker here,
okay?
And if for some reason that doesn't work
then just Google contrast checker
and you will for sure find one of the countless tools
that does this.
So contrast checker, let's make the text color white.
So that's fff.
Then here, let's paste that.
And you see that we have a contrast of five.
Now that's not perfect but it is good enough for us.
Now, right,
and we could try the same of course with our text color.
So there we have a white background,
and by the way,
you see that white on white is what a contrast of one means.
So the worst possible.
And yeah, so our contrast here is actually quite good, 11.5.
All right, but anyway,
this was just to show you how this tool works.
Alright, but let's go down
because here we have some more buttons
and these don't look all too well.
And so let's change that.
So maybe you remember that here we have the button class,
but also the button big.
And so this is basically like a variation of this button
that we can now style differently.
So we have button big, let's see.
And then down there, here we have the button small.
Okay, so this is a very common technique
that we use when we write CSS
which is basically put all the common styles
into one element
or into one class which is button in this case.
And then the styles that are different
we put into one of these like variations.
So let's create those.
So that's button small
and
button, I think it was big,
and I like to use two dashes here
but of course that's not really a hard rule.
So what's going to change here
between the big and the small button is the font size
and also the sizing.
And the sizing is defined by the padding here.
And so let's grab these two
because these two are actually for the big button.
And then for the small one, let's do something else.
So let's save this for now.
And so you see that our big button here still looks the same
and our small now looks like this.
And so let's also give it some other font size.
And remember by default it is 16
but this actually looks too big.
So let's put it down a bit to 14.
Nice.
And now give it some padding as well
but a little bit less than the big one.
So eight top and bottom, and 12 left and right.
Nice.
That actually looks quite nice.
So here we are done with the color,
but since we are here
let's actually also change the color of this footer here.
So remember how we made this text smaller
because it is a lot less important
than the rest of the text.
And so let's continue that
by also making the text lighter than the rest.
So let's come again to Open colors
and remember how the one we chose was this one?
So let's now try maybe this one.
So I'm copying it.
And now the first thing
I will do is actually to check the color contrast.
So this one, oh, and here we only have 3.3, which is poor.
So that we cannot use.
Let's try to click here,
just text color, but that's way too dark.
So let's just then choose the next one.
So that's maybe not as light as we want it.
And sometimes we might also be able to
break these rules just a little bit.
But here, let's just very strictly stick to the rules.
And so there you go.
It actually looks almost the same,
but, well anyway let's just keep it like this
so that we don't break the accessibility rules.
Great.
Now remember that another thing we could do with colors
was to accent one entire section, right?
So that is something very common that we do with colors.
And so that's what I'm gonna do now
with this testimonial section here.
So I'm pretty sure that's going to look amazing.
So let's try that out.
So first I want to know what this entire element is called.
So it's the testimonial section.
So,
so it's this one.
So background color.
And now VS code is actually really nice to us
because it already gives us here
the most common used colors.
So in this current CSS file, we have used these four colors.
And so here it helps us choosing the same colors again.
So this is our green color.
All right, nice.
Well, at least it's a start
but now we need to make the text white.
So how should we do that?
Should we select all of these three?
Well, I don't think so.
And instead, we should simply make the color
on this parent element white,
and then all the other elements
should be able to inherit it.
So let's do that
color to white, so fff.
And so that is a lot more readable, right?
Now it looks a bit weird
that the background color is not here around this image.
And so let's just give it some padding here.
So padding to the entire section
which will move everything a bit inward basically.
And so with that, it looks a lot nicer.
And again, we will add some roundness to it later
once we learn how that actually works.
Okay, and now finally, as yet another accent,
what I can do now is to go like add a final touch
which will be to add a green line here
to the end of the entire page.
So going from left to right all across the page.
And so if I want that, I need to set it on the body.
So right here.
So border bottom.
I think we actually did this in our other project.
So the web magazine.
Solid and then again, our main color.
And yeah, that looks nice.
That's a nice final accent for the page.
And also a final accent for this lecture
because with this we are actually done, at least for now.
And so therefore, we can now move on to our next lecture
which is gonna be on images.