redfern314/olinjs-4

lecture #4: style and grace

olinjs-4

lecture #4: style and grace

Notes from the last homework

Recapping what we've done

CSS

CSS is what makes websites look pretty. It's the difference between this:

and this:

For these two websites the html is the same, the Javascript running on the browser is the same, everything which went on on the server side to render this page is the same. The only difference is that one is completely lacking css styling.

So far we've been making webpages without styling, so they look alot like ugly twitter shown above. Now we're gonna start learning how to pretty them up. Take the site which you made for HW3.

Lets add some style to it!

So open up the new_ingredient.html file in this repo, and we'll just change some css attibrutes, for a few elements. To do this we'll use the chrome inspector.

1. font-size: 32px
2. text-align: center
3. font-family: Lucida Sans Unicode, Lucida Grande, sans-serif
4. border: 4px solid black
5. border-radius: 10px
6. border: 2px solid green
7. border: 2px solid red
8. border: none
9. padding-bottom: 12px
10. background-image: url(http://maxim061156.files.wordpress.com/2012/09/santaclaus15.jpg)

And voila! look at our beatiful website!

So this is all great and all, but refresh the page, and what happens? All of our hard work is gone. So how do we make permanent css styles? Using a stylesheet. Fork this repo, pull it, the open up a text editor and lets make one.