Styling an application
Video: Styling an applicationSo far, we've managed to build a nice live search feature that uses AJAX to search through a JSON data file, but the UI could look a little bit better. So in this video I'm going to show you how to style this application with CSS. Now, I've got the set up in Espresso and this little comment right here essentially ties my live preview with this window. So as I make a change right here, it will update automatically. If you don't have Espresso, you don't really need to type that in, but it's just the way that I have things set up, so that as I type the CSS, you're going to be able to see the changes on the right-hand side. So let's get started with some basic CSS.
- Next steps
Viewers: in countries Watching now:
- What is AJAX?
- Making requests asynchronous
- Updating the DOM with getElementById
- Reading JSON files
- Working with jQuery and AJAX
- Sending and searching JSON data
- Incorporating CSS transitions
Styling an application
So far, we've managed to build a nice live search feature that uses AJAX to search through a JSON data file, but the UI could look a little bit better. So in this video I'm going to show you how to style this application with CSS. Now, I've got the set up in Espresso and this little comment right here essentially ties my live preview with this window. So as I make a change right here, it will update automatically. If you don't have Espresso, you don't really need to type that in, but it's just the way that I have things set up, so that as I type the CSS, you're going to be able to see the changes on the right-hand side. So let's get started with some basic CSS.
So first, I'm going to start working on the searcharea, and I'm going to go ahead and center that by setting the margin equal to 0 and auto. I'll text-align this to the center so that the text inside will also be centered, and I'll set up a background color here, and I'll set up a padding of 10 pixels. Plus I'll set up the width to be 30% of the page. That way this is going to be responsive and kind of grow with this page.
I'm going to add a bit of a border-radius here, and that will just make my edges round, so I'll use -webkit-border- radius and I'll do 10 pixels. That will take care of Safari and Chrome. And then I'll do -moz-border-radius 10 pixels for Firefox, and then I'll just use the regular rule, which is just border-radius of 10 pixels. I want to make the border just be on the top, left, and right of this box, so I'll modify this -webkit-border- radius to have some different values.
So let's style the label. We're giving it some font attributes here. I'll go ahead and make the text- transform be uppercase, so that it displays that text as uppercase always, and I'll add a little bit of padding at the bottom of 5 pixels, just a little bit of breathing room. And I'll set the color to a little bit of a red tint. So now let me do the same thing with the paragraph.
I'll grab this and I'll just copy it here, and instead of label, I'm going to target the paragraph. The margin is going to be nothing. Gets rid of all the spacing on the top and bottom. And then I'll do a line-height of 1 em and a padding at the bottom of 5 pixels. Again, just putting in a little more breathing room this time. This looks probably a little bit better when it's wider. So now, let's modify the input field. Once again, searcharea. And I'm going to set the width to be 80% of the size of the window, again, making it responsive. And I'll text-align this to the center.
So now this little box is actually going to grow as I change the size of the window. Excellent! So now we need to change the style for the content, which is under the update id. So we'll start with some basic code to change that. I'll do a font-family, and I'm going to use Georgia and as a backup, Times new Roman. And I'll set the width of that to be 70% of the browser window, and I'm going to center it horizontally, so margin will be 0 and auto.
And I want to put a border on the top, and I'll make that border dotted. And my border color is going to be CCC. That's just a little gray line at the top of the update div. So let's go ahead and change the unordered list. Right now my lists have bullets in them, so I'll do update unordered list. I'll get rid of the bullets with list-style none, and I'm going to change the margin and the padding to 0.
That gets rid of a little bit of space that happens with unordered lists. So now I'll do update ul li, and I'll set the width of this to be 100% of the container. And I'll do a little bit of padding so that it has a little bit of breathing room to each side. I'll set up a background color here. You can actually see the padding better with the background color. So there's without padding, and there's with padding. I'll do a little bit of padding at the bottom, 10 pixels.
You can't really see it, but that just gives you a little more breathing room between some of the list items. And I'm going to set the height, because they're a little big, to be 110 pixels. And now that looks kind of weird, so I need to make sure that I do the overflow element here and I set it to be hidden. That hides everything that's bigger than 110 pixels. And we'll do also a little border at the bottom, so that we kind of visually tell the user that there is going to be more information underneath this little border that we placed.
All right, so when users hover over the list item elements and when I have a style that kind of expands what I've done, so my background is going to change, the background color. I'll set the height to 250 pixels. That's going to show more of the content behind. So if somebody hovers over one of these elements, it kind of expands this to be bigger right now. It's still sort of funky, but it will work really well when we have the rest of the code in.
Let's do the update h2 tags. And I'll do margin. I'll just clear out the margin and padding and then set up a font-size, a little bit of padding at the top and bottom, and we'll change the font here. Now, we'll change the color, kind of a little bit of a red, sort of maybe a coral color, and we'll add a border and a little bit of the margin to give the border a little bit of room right here.
So now I'm going to do the image. I'll float the image to the left. That way the text will show to the right of the image. And I'm going to set up the width of the image to just be 80 pixels so that it's not so gargantuan. I'll add a little bit of margin to the right, 10 pixels, just to give it a little bit of breathing room from the photo, and I'm going to make the photos have a round edge, so I'm going to type in -webkit-border-radius, 10 pixels, and I'll do the same thing for Mozilla browsers, and for just the regular version CSS.
So let me save that, and that's looking pretty cool, and it's mostly accomplishing what we need here. You can see that this looks really good, especially when it expands. So our application is looking pretty good, and this would probably be good enough for most projects. However, in the next movie, I'm going to show you how to use some CSS3 animations to improve this app.