HTML5 Web Storage API (Part 2)

I realized that the previous part didn't have a lot of new and exiting stuff and so to increase the value of this day I decided to add another post, which again probably wont contain some exiting stuff, but hey! For reaching the exiting stuff we have to go over the boring stuff!

Styling up our interface

Well, there's not much of styling that we need to do here and this tutorial is completely optional, because I realize that all of you have different tastes and you'd style your app differently, however if you want to follow me along and want to build the exact same application as me and learn from it, then in this tutorial I'll explain the styles that I added to my application that make it look that cool...

Left box: The left box doesn't have to be that fancy but it has to adhere to its naming, i.e. stay on the left of the screen! So, we shall float the section to the left using float:left; CSS property. And, it doesn't cost us a penny to add a nice little 3 pixel solid red border... Also, we definitely don't want our form sticking to the border of the box so we'll add a padding of 20 pixels...

Right box: We'll style the right box with the same properties as the left box except that the right one will have some of its own properties. We can just add some custom width to our box like 250 pixels, and we don't want this box to be bumped up against the other box so we'll add a left margin of 20 pixels.

So, here's what we're talking about:

#left{
    float:left;
    border:3px solid red;
    padding:20px;
}

#right{
    float:left;
    border:3px solid blue;
    padding:20px;
    width:250px;
    margin-left:20px;
}

What's next?

This post again, didn't have much to learn, however, in the next post, we'll actually start learning about the API itself and trust me, you're going to love it!