Tip:
Highlight text to annotate it
X
I've gone and I've fetched some art.
In this case, you can probably guess what it's going to be.
Title Batman--let's paste him in here.
And when I click submit, we see our Batman.
Pretty neat, huh?
Now we have this nice art channel.
So this is our html.
I've been including these classes, and I keep referring to,
oh, these are good for styling things and this area is good for styling things.
I'm going to go ahead and show you a few styles here
that just make this app a little bit better.
So you can add a style tag.
This has type text/css.
We are not going to quiz you at all on this.
In a lot of our homeworks and stuff going forward,
I'll provide the styles,
but I'm going to pop in a few here that I wrote.
Okay, I just pasted in a bunch of styles,
and I'll just walk you through them real quick, because it's fairly easy to read.
Basically, the syntax is body.
So this means our body tag is going to have a font family--sans serif
so we'll get rid of the serifs.
It's going to be with 800 pixels.
This is a trick for centering it and giving some padding.
Our error style that we added for our error message--
that's going to have red text.
Our label, instead of being displayed inline,
I'm going to make it display block, which is going to cause it
to use its own line.
And I'm going to make the font bigger.
Our input for our title--I'm going to make that wider with 400.
I'm going to make the font size bigger.
I'm going to add some padding.
That padding is kind of spaced between the outside of the element and the contents.
I'm going to make our text area wider and taller
and give it a bigger font
and also make it a monospace font, which is good for ASCII art.
I'm going to make the text of our submit button bigger.
I'm going to add some margins between these elements
that our HR--our rule--is going to have
20 pixels on either side.
Our artwork is going to have 20 pixels between each of them.
And our art titles are going to be bold,
and they're going to be 20 pixels tall--the font.
And our art body is not going to have any margin on it,
and its font size is going to be 17 pixels.
So I know that was a lot.
You don't have to know this, or really even have to understand it.
I just want you to know what it does or what it is.
And let's go to our browser and see how this looks.
So here's our old page.
I'm going to reload this with our new styles.
Oh, yeah, look at that.
Now we've got this big form, nicer fonts,
and a big, big, much nicer Batman
and a much nicer camel. 25
Just a few little styles can go a long way to making
a web app look a lot nicer, actually.
Okay, so I hope you enjoyed that.
I hope you learned something.
That's the end of this unit.
Your next homework is going to be basically using these skills I just demonstrated.
So I hope you had fun with that.
Thanks for participating so far.