Tip:
Highlight text to annotate it
X
Those are the main templates I used.
We'll give you all this code so you can reference it in future stuff.
Then here is the CSS I used to actually style the whole page.
We don't cover much CSS in this class, but you can learn from what I've done here.
On the body tag, I basically set the font to be Helvetica, font size 14.
I set the width to be 800, this margin--basically, this is the trick for centering content--
added a little padding, make the color slightly off black--333 instead of 000.
We define when we use h2 we set it at font size 24, bold, some space on the bottom.
That's what margin bottom does. Errors are red.
Labels--we can make it a block element with font size 20.
This says if a label follows another label, put some space in between them--20 pixels.
This input type text formats our text box.
We make it width 500 pixels, font size 20, a little padding inside the box
that just kind of spaces things out a little bit.
I used a monospace font.
It makes it look like you're writing on typewriter or something.
Text area--again, I make it 500 pixels so it matches the input.
I make it 400 pixels tall so we get a nice actual box, 17 pixel font.
I make our submit button a little bigger.
This is the main title of the page where it says CS253.
That's size 40 text. It's bold. It's centered. It's got some space below it.
And it's actually a link to the front of the blog, but I don't want an underline there,
which is what HTML does by default when you have links,
so we can say text decoration None, which turns off that underline.
This says 15 pixels between two blog posts.
Post heading--now, this is the actual title of a particular blog post.
We've got that name. This adds that border, that line on the bottom.
Position relative is used for something else, which I'll show you in a sec.
Title--bold, 24 pixels tall.
The date the blog was submitted--this is position absolute.
What position absolute lets you say is we want to position this 0 pixels from the right edge
of our parent, if that parent is position relative, which is why we have position relative here,
and 0 pixels from the bottom of that parent.
In this case we're making it color 999, which is kind of grey.
If we were to go back into our browser, this whole thing is the blog heading.
This is the title, and this is that created data, which is position absolute,
which is position 0 pixels from the right and 0 pixels from the bottom.
That's how we position that over here nicely on the right.
It's color 999, which is grey.
That's just some basic CSS. I think there's just a little bit more.
The post content has 5 pixels on the top. That separates it from its heading a little bit.
You can see we've got that big text here.
When I mouse over it you can see my curser turns into a little hand, which means it's a link,
but I got rid of that underline.
Then you can see all the fonts we used here and the border bottom
we added here to make this line, and then the text in each of these posts.
You know, you don't have to understand that.
You don't need to do it in any of our homeworks, because we can't grade easily
the appearance of your things, but I like to do it so it looks slightly nicer.
So I figured I would show you how I did that.
That is it for homework 3. That was actually quite a bit.
If you made it this far, good job. You are writing some serious web applications now.