Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Styling an application

From: JavaScript and AJAX

Video: 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.

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.

Show transcript

This video is part of

Image for JavaScript and AJAX
JavaScript and AJAX

21 video lessons · 19528 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed JavaScript and AJAX.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.