All right, my dear students, welcome back.
Welcome back.
We've done our HTML.
Very simple.
But now I want us to open up the styles.css file.
And let's start, you know, adding some pizzazz and some really cool styling to our form to finish
it off. Remember we discussed fonts.
What did we have to do in order to download and use our own fonts?
That's right.
We had to use the @font-face block.
So why don't we do that.
Let's define our own custom font using the @font-face rule.
That's what I want to do ... @font-face,
it's really this simple.
It's really, really is this simple.
The first thing is let's custom name our font.
We do that by using the font-family property.
And here let's just define it as handwriting.
This is not our headings, this is the handwriting or the text the user puts into the input box.
The next thing is I want to grab our font
and provide the browser with a hint as to what format a font resource is
so that the browser can select a suitable one.
It is possible to include a format type inside a format function.
I know,
sounds strange, right?
But let me show you exactly what I mean.
So all I'm going to do now is I'm going to define a src attribute here, and I want the src kind
of to come from two different formats of sources, right?
So we define a src property by this url() method.
Here we can just reference our local file.
We know it's in the folder of fonts and here we can define our journal-webfont
woff2. This is our preference. And like I mentioned in the comment above, we're going to give a hint
to the browser now that this is the format, right,
if the browser has woff2 available to it. It just helps speed things up. And we can do exactly the
same thing,
what about if the browser doesn't support woff2?
Well, in that case, let's grab our fonts and in here let's don't use woff2 format.
Let's just give it the woff format.
And of course in this instance the format is woff.
There we go
my dear students, it really is that simple.
So that's our handwriting font.
We can do exactly the same thing.
And because it's the same kind of concept, I'm not going to be putting all the, you know, all the
comments here.
We'll just say custom name our font - same as last time. We use the font-family property and here we want
to call it, let's just call it headings because we're using these fonts for the headings.
And of course the next step is to grab our font.
Very, very simple.
Let me start scrolling down.
We need the src attribute. Here, the url(), and
we can do the same thing.
Access our fonts folder. Within here,
let's access our typewriter-webfont woff2, and let's give it a format of woff2.
Let's do exactly the same here.
url(),
fonts
woff,
specify or tell the browser that its format is woff.
You know what,
I think I might have put a semicolon here instead of a comma.
I did too.
Luckily I picked that up now.
So there we go.
Right now, nothing,
you know,
nothing would have changed. If we got to our browser,
we are still on the default system fonts, which makes sense because we haven't used these fonts anywhere
yet.
We've just defined them and we've grabbed them.
Okay, but let's continue.
Okay, what do I want to do?
Well, let's affect the body of our entire page now.
Let's define its font-size as 1.3em, and for fun, let's just go sans-serif.
Let's go to the browser.
There we go.
Just a bit bigger.
And all our fonts now are at least standardized, even though we're going to override them.
I know, I know.
So we, strictly speaking, don't even have to do this.
Why don't we put in some padding of 0.5em, and let's give this page a nice background color of 49,49,49.
Let's go to our browser.
Pretty hideous, but we are getting there.
Don't worry.
Okay.
What is the next thing I want to do?
Well, let me put the browser side by side so you can see as we go on what CSS properties we are affecting.
Why don't we work on our form
now?
If we look at our index file, we've wrapped everything within this form tag. And therefore we want to
apply certain widths and heights to that form itself.
So let's grab our form and start applying some styling to it.
The first thing I want to do is define its width
as what? Well, my dear students, remember
we want our entire form wrapped within this post card.
So if we go to our root directory here, and we look at the post card, we know that its size is 679 pixels
wide and 434 pixels high.
So in that case, let's go back to our styles.css, and let's define it or let's give it the same
width and height.
The width of 679 pixels.
And the width
want to be 434 pixels.
And then what we can do is why don't we incorporate our postcard image into here?
So let's grab our background property and let's specify its URL. And its URL is literally in the same
directory
as the postcard_background.png.
If we save this, there we go.
How awesome is that?
Right, but it's still not quite fitting properly.
And in order to make it fit properly, there's just a few more things we have to do.
Firstly, let's set its position to relative.
The next thing I want to do is I want to remove well, I want to center it.
So let's center it to the screen.
That's fine.
Let's give it some padding.
Starting to get there.
It's starting to get there.
I want the box-sizing property.
and we've discussed this before in previous lectures, to border-box.
It just gives us more intuitive control around the sizing of all our widgets.
And now
right, because we're on this form, remember we spoke about the grid system.
So right now I want to create our grid.
This is where really the exciting things happen.
How do we create a grid?
Well, remember, we've got to set its display property to grid.
That's the first thing we have to do.
How do we deal with evenly spacing our grid?
Well, what's quite cool is that the CSS, and I'll put a comment here, the CSS grid has a new unit that
solves spacing our grid evenly.
It's quite cool.
The fractional unit, it's known as fr, that solves the problem of automatically distributing space.
Let me show you how we use it.
It's very, very simple.
Let's access our grid-template-columns and here we're using the keyword repeat, and it takes two arguments.
The first argument is how many columns do we want?
We want 2 columns.
And each column is going to take one fractional width.
Okay.
I know it sounds confusing.
Let me actually put the columns here or another comment just so you understand what this repeat was.
So, using repeat says we want 2 columns with equal width, each taking up one fractional unit.
That's all we saying here.
If we go to the browser, we open this up in our console,
we'll start seeing our grid, right?
The make-up of our grid.
Let's grab the form.
And here it is.
We've defined 2 columns and then we've got rows and we haven't worked on rows yet.
They're not the correct placement actually, so we need to sort that out.
Okay.
So let's sort that out
now, quickly. We've got our columns.
Now I want to sort out our rows.
Let's access our grid-template-rows.
We want the first row to be really large.
The second row and third row are for each of the form headings -
I'll show you now. And then the last row we can just set to auto.
Let's save this, and go back here.
It's starting to look nice, but I actually want gaps between each grid item.
I don't want just a dotted line.
And in order to add gaps, it's very, very easy.
All we need to do is define a grid-gap and you'll see how this works
now. Let's define it as 18 pixels.
Let's go back to our form and here we can see that we've got gaps, which is just nice because it's going
to separate all of our form controls quite nicely.
It's going to make a lot of sense shortly, I promise.
Okay.
What is the next thing we should style?
I want to style our heading, right, the "to: King Kong".
So why don't we grab our h1 tag, font-family,
this is the first time we're using this, so it's exciting.
The font-family is headings.
If we save that, and there is our own custom font.
How awesome.
Font size is just too big, right?
So let's just reduce it a bit.
There you go.
Much, much better.
I don't want it bold, so let's just go lighter.
There we go.
Much, much better.
Now I want to access the align-self property and the align-self property overrides a grid-align value.
The end value aligns the item at the bottom of the grid.
So like I mentioned, I want to access the align-self property, self, and I want to set that to end. And
look what happens when I do that.
How awesome.
If we go to the browser, you'll see exactly how this is working.
If we inspect our grid.
We know that King Kong was pushed to the top originally, but now we've set it to be at the end of this
grid or the cell grid, which is why it's been pushed down now.
How awesome.
But you'll notice, my dear students, can you see our message div? It's kind of shoved to the top right
in the second cell?
We don't want that.
We want to specify that our message should start in row one and span across all rows.
So this is the huge benefit with working with the grid system.
And I'll show you exactly what I mean.
So let's access that div by accessing its ID of message.
We gave it an ID of message.
We can access this grid-row-property and this is what's really cool.
We can say that we want it to start on row 1 and we want it to span all 4 rows.
And if we save this, go back to the browser.
How cool.
Basically its saying here my students that we want this message div to take up the entire first column.
We want it to start on row one and take up the entire four rows of our entire grid.
This is the beauty,
this is the beauty with working with the grid system.
We have a lot of flexibility and control.
Don't worry, we're going to style their textarea input shortly.
Okay, so what should we target next?
Well, you can see all our labels like "Your message", "from", "reply" ...
all of those are in the wrong text format.
So let's go here.
Let's grab our label.
Our label.
We can use the font property in CSS, give it a size of 1em, and then define its font-family as headings.
And if we save this, go to the browser,
there we go.
It's already starting to kind of fit in.
It's starting to look really, really cool.
But let's keep going.
Let's don't stop here, right?
Let's keep going.
You know what,
let me actually,
I quite like having the grid here, though.
Let's keep it.
All right.
So we've done the label.
What I want to do now is I want to access our input and our textarea.
Textarea.
So let's start styling this.
Let's define it as having no border.
It's already starting to look better.
Let's give it a background of none.
We don't like that white border.
We want the background of none, which is coming on.
It's coming on. The font,
remember, we want our own custom font.
We can define it as 1.5em in size,
and then the font word we gave it - the font-family is handwriting
font.
What is going on here?
Oh, you know what?
This whole post card isn't fitting properly.
I've done something wrong.
Let's scroll to a form background width, heigh .... oh, height.
We had two widths.
That was silly ðŸ™ˆ.
That was really silly ðŸ™ˆ.
How's that looking?
All right.
So I think that solved our issue.
That's right.
Okay.
So at least the full post card is showing.
The next issue we're having is you can see this textarea is just way too wide, which is why it's pushing
this grid, you know, so far.
So what we need to do is go back to our input and textarea here.
Let's give it some padding, 0 10px, and let's define its width as being 60%, which would
solve our problem.
There we go.
It's starting to look good.
It's starting to look very good,
I might say,
I might add.
Okay, let's continue.
Why is this background not changing here?
Uh, what have I done?
There's an "s" here.
Much better.
Okay.
Much, much better.
We're getting there.
Okay.
That's all I want to do now with the input and textarea. Why don't now we target the input where its state
is in focus?
And we can do textarea as well.
Textarea
when it's state is in focus. All we want to do here is change the background color
but we just want to make it very, very light gray.
This should work.
Let's see.
It's in focus.
Yep.
How nice is that?
It's a nice gray color.
I love it.
We can also define its border-radius
and make it a bit round.
Let's see now.
Yeah, it looks really nice.
Okay, what can we do next?
Let's keep going.
We're almost done.
We can target an input where its ID is name.
And why don't we do two,
why don't we do two in one. Input and its ID is mail,
and here we can affect font-size,
1.5em, and let's give it no outline.
Much, much better.
There's still an outline in the textarea, but at least these two don't have any outline.
And now I'm just going to get very picky.
Let's just start styling this up like this.
Then you can see what's happening.
I want to start getting very, very detailed now.
I want to grab our div with the id of from, and let's style this.
All I want to do now is I want our from and reply right above those lines on the card.
So, align-self we can just say center and it needs to be pushed up slightly.
So let's just give this padding bottom of 10 pixels.
Much better.
You can see it's just above the line now.
It's looking quite good.
And what about the div of reply?
Let's just target that,
reply, and we can align-self to the center as well.
Looking good.
And then we can see our message heading is too high.
Your message ... way, way too high.
So let's bring that down.
How do we do that?
Well, we can just target our message div.
And target its child of label, because we know that's the label we're dealing with.
Here we can set its position property to absolute.
We can push it to the right. Better. And then we can push it down.
Let's try 100 pixels.
Much, much better.
And now I explicitly want to target our textarea element.
So we grab our textarea.
Here I want to define its height as 70%.
So if the user clicks in here, yeah, that looks very, very good.
Let's define its width as being, I don't know, 90%.
How's that?
Remember, it's relative to its parent, which is the div.
So we're saying it should be 90% of the width of the div.
I think that looks really good.
And then of course let's push it down.
It's too high. And we used top of 100 pixels
so let's give this margin as well of 100 pixels at the top.
And then right, bottom and left can just all be 0.
Now, if the user clicks in here, it is perfect, it is perfect.
And then of course, we don't want an outline.
Same as the from and reply.
No outline.
How awesome.
And then my dear students, I just want to style our button.
Our "Send your message" button.
We are literally almost at the end.
Stick with me.
Let's give it some padding.
You'll see how quick this is.
5 pixels ... it's starting to look
nice. Font,
we can give it bold
0.6em in sans-serif.
How does that look?
It looks nice.
Border, 2 pixels solid
and we can give it a gray border.
Yeah, that looks really nice.
Border radius
let's just give it a slight rounded border-radius.
It's coming on.
Cursor can be pointer. And then transform,
remember, we had it at a slight angle so we can just rotate this element.
I don't know,
1.5 degrees should work.
Yeah.
Just adds a bit of pizzazz.
It's really, really cool.
Now what we could do just to show you something different,
I mean, we could go to our index file, to our message and put these greater than signs, right?
We could do this.
But I want to show you something else we can do.
We can actually access the buttons ::after pseudo element, and we can just set its content to those
greater signs.
Same thing, I'm just showing you different things, different ways to to do the same thing.
And then here, I just want to finish it off by creating a cool hover effect
and a focus effect.
I don't want an outline, so we can say none.
Background
we can say black.
And the color can be white.
How does this look?
How awesome is that!
From, reply ...
you know what,
this font is too big.
Right.
So let's scroll up here, and just refresh this page.
Okay, let's just type in here
"asdf".
I want that... the font is too big. Input ...
no, no, I want the actual input itself.
I'm sure we defined ...
yeah,
here we go.
Let's define 1em.
Um.
I think that's a bit better.
Oh, why is that so large?
Okay, let's try and capture that.
Here, this is the issue.
Better.
You know what,
I don't even think we need that font-size.
We should just specify it here, and it should apply automatically, which it is doing.
And my dear students, we are done.
How awesome is this?
Woo hoo! ðŸ¥³
Well done for sticking with me.
Well done.
How awesome is this, my dear students!
So the user can type their message in here.
They can say, Hey, this is from Wally, and you can send your response to wally.
If he does not or she does not type a valid email address, we should get a validation error, which
is exactly what's happened.
If it's wally@gmail.com, the user should be able to now submit their form and it happens successfully.
So there you go.
A very fun example of creating your own postcard using the grid system, applying some simple CSS to
create a very fun form.
I hope you had a lot of fun.
I hope you're following along.
And in the next section I want to discuss now a bit more detail around submitting a form to a server.
We are almost finished this course.
Please stick with me.
Although ... I am a bit sad we are coming to the end because I've had so much fun.
But anyway, stick with me.
See you in the next lecture.