Now what I want to do, is I want to effect everything on our page, all the elements, and I want to
start from scratch.
So, let's get rid of margin, and let's get rid of padding.
Save that.
And you can already see the browser on the right is being affected in real time.
How awesome is that?
And that is because of this Live Server.
The one other thing I want to do now, is I want to add a box-sizing property.
You know, box-sizing.
And I want to set that to border-box. If you don't know what it is, this comment is for you,
okay. The box-sizing
property allows us to include the padding and border, in an elements total width and height.
Don't worry if you don't quite know what box-sizing is, we are going to talk about it later in the course,
okay. But for now, that's exactly what I'm doing.
It's just easier for us to define widths and heights.
Whew.
Sorry, I know I'm going very quick, but this isn't a course on CSS, so
I want to go fast 🏃🏼‍♀️.
The body, let's just, I don't know, let's define the body color as, let's use our variable
and remember, we defined it "--color-main".
If we go up, --color-main is that gray color.
So all I'm doing now is I'm setting everything within our body element, that color.
And the cool thing is, later on, if you ever want to change this color, like to red, and save it, it literally
will affect (sound effect: wow), you know, all your elements below that have this variable.
So that's why I do it.
It's very, very simple.
So there we go.
There's our body color. We also have a different background color, don't we?
And let's have that as rgb(182, 219, 255). Oh, isn't that beautiful? Let's just change our font-family
to Arial. Is that fine?
Yeah, that's fine. And let's do line-height of 1.5.
There you go,
just so there's a bit more spacing between all the text. Whew, we are getting there, my dear students.
Now, let me just do a comment here.
I want to now use a flexbox layout.
This is an alternative way to using float's
for defining
the overall appearance
of a web page.
OK, don't worry too much again, what this is. We're going to get into it later. But let's define our body element
as being a flex container.
So how do we do that?
Well, we have this display properly of "flex" on our body element. And now let's render
all items in our form vertically.
And to do that, we just want the flex direction to be ...
column.
And we went to align items to the center.
There we go.
You can already see it's starting to take shape.
Whew, okay, one more thing now to style, that
header, is I want to target that class.
Remember what class we gave it? If we go to our HTML
we gave it a class of profile-header.
So let's start being really specific right now.
And trust me, we're almost almost done.
Stick with me.
So let's target that
profile-header class,
text-align
center. There we go,
it looks better already.
Background-color,
rgb
let's say its
230,
230. And, it doesn't have a border yet, does it? It looks horrible 🤢.
So, let's give it a 1px border, solid border, and let's give it a color.
How does that look? Let's save. Man, its starting to make ... it's starting to come together. Um, --border-radius,
remember we defined that at the top? If I scroll up,
we defined our border-radius as 4px, but we've got a variable, so we don't have to type it
out again, which is really, really cool.
So, of course, we have to use the "var" keyword and then we can get our --border-radius. If we save that,
you can see the borders are slightly rounded on the edges.
And then I just want to add a box-shadow,
just to add a bit of dynamic styling to this whole header.
How does that look? If I save, yeah man, that's looking good 😍.
And now, of course, I just want to add margin because everything's so bunched up together. Um, let's do 25 pixels,
zero. Yep, that's a lot better.
And let's add some padding just to space things out.
And again, let's use our --main-padding variable.
Save that,
and "Bob's your uncle".
We have just completed our header.
(sound effect: yaaay)
How exciting is that?
So, take a step back.
We've done quite a lot right now. We've just defined our CSS, we've defined the body look and feel.
We've completed our header.
But if we go to our HTML, we haven't done any forms yet, have we?
We haven't defined a <form> element.
Well, I think we should take a break now, take a breather
and in the next lecture, let's start adding our <form>. See you now.