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

Additional resources

From: CSS: Styling Navigation

Video: Additional resources

Well, we've come to the end of another title in my CSS series. I want to thank you for watching CSS: Styling Navigation, and I hope you become inspired to look for meaningful ways that you can improve your site's navigation through CSS. Before you go, I want to leave you with a few tools and resources that I think will help you learn more about how CSS can enhance site navigation. So I'm in this additional resources.htm file, and if you have access to the exercise files, if you look in the 07_01 directory, you'll find this page. So you can just open it up and have quick access to these links.

Additional resources

Well, we've come to the end of another title in my CSS series. I want to thank you for watching CSS: Styling Navigation, and I hope you become inspired to look for meaningful ways that you can improve your site's navigation through CSS. Before you go, I want to leave you with a few tools and resources that I think will help you learn more about how CSS can enhance site navigation. So I'm in this additional resources.htm file, and if you have access to the exercise files, if you look in the 07_01 directory, you'll find this page. So you can just open it up and have quick access to these links.

If not, if you're just watching this, you should see an overlay show up that's going to give you a link to the page as well. Well, if you've taken any of my CSS courses, you've probably already seen this page, the CSS Current Work Page. This is one of my favorite pages, it's bookmarked, I read it all the time, but what this is is it's a quick snapshot of what's going on with all of the different CSS specifications. It tells you kind of where they are, what's been added to them, how they've changed, how far along the process of being supportive they are. So this is a fantastic place to learn more about what's currently being worked on, on CSS and really stay ahead of the game in terms of what's coming.

The next resource I want to take you to is the WebAIM's guide to link accessibility. This is WebAIM, an organization dedicated to accessibility, and if you go to their page and browser articles you're going to find this article on Links and Hypertext. And what's awesome about this article, this page has a lot of great information about how to make sure that all of your site navigation remains accessible to anybody that uses your site. This is definitely a page you want to go through and study all the different ways that you can make your links accessible. Next, I want to take you to an article in Smashing Magazine by Lee Munroe called The Definitive Guide to Styling Web Links.

The thing that I really like about this article is it gives a nice overview of a lot of the best practices around styling links. It's going to give you some examples, it's going to go over different aspects of designing site navigation, and it's going to have links to external resources. So definitely check this article out, it's got a lot of really super-useful information in it. Next, I want to take you back to the WebAIM's site and show you their Color Contrast Checker. So what's really cool about this is let's say you come up with a color scheme for your site, you can come to this page, plug in the colors, especially when you're going to have two colors that are right on top of each other like foreground or background, and you can check their contrast to make sure that people with color blindness or other vision disabilities can still tell the difference between those two items.

That's incredibly important, because if you have two colors that are too low in terms of contrast, people with certain types of colorblindness are going to have a really hard time discerning between the background and the link. So, in order to make sure that your site is usable by everybody that visits it, you want to check your color schemes against this type of a Color Contrast Checker. So this is definitely something you want to bookmark and use often. Next up, I have a tool that we just got done using up too long ago, and that would be the Ultimate CSS Gradient Generator. We used this a little bit earlier when we were creating our buttons, and I got to tell you I use this all the time.

So definitely you want to bookmark this and use it just to save yourself a lot of time when you're creating gradients and to make sure that the syntax is going to be correct. Next, I have a tool that I pointed you to in the lab but we didn't actually use, and I wanted to show you this. This is the CSS3 Generator by Randy Jensen, and I love this tool. Now what's great about this is you choose whatever property you want to be able to kind of experiment with, let's say box shadow because we were using that earlier. So now I can choose whether or not I want it to be inset, I could play around with different values like the Horizontal Length and the Vertical Length, I'll go ahead and enter a color in here so we can sort of preview this.

I'll go ahead and give it Blur Radius, let's say you do a blur radius of 10, and then we'll do a spread of say 5. And as soon as you start plugging those values in, you're going to get a preview of here, and you can start changing those values, so you can really get a good field for what these values are going to do and how it's going to integrate into the element that you're trying to style. And what's really cool about it is you're going to get some code right down here that you can just click, copy, and then paste into your own CSS, and it's going to tell you which versions of browsers support this so that makes it really handy to make sure that you're going to be as cross- browser compliant as possible.

Another one of my favorite tools is Adobe Kuler. One of the things that I find kind of difficult is coming up with a color scheme for my site, especially for navigation. So what's great about Kuler is they have a lot of preset colors that people have saved, but you can just go ahead and start your own. You can click right here to go to the editor, and you can click a color, and you can certainly change it if you want, set that as your Base Color, and then you can use all of these different rules like Monochromatic, Complimentary Compound, you can use shades of the color, you can change the brightness and the darkness of it, and it's going to give you different values for this.

HSV, it's going to give you RGB, it's going to give you hex values so you can copy and paste those in, and you can sort of play around with these color schemes to see how they work together before you commit to using them in your site. So I love Kuler, it's a tool that I use all the time. I also wanted to show you guys CSS Sprites, which is a nice little tool for generating sprites. You know, if you have Illustrator, and you have Photoshop, and you feel like creating those on your own, you certainly can, there's nothing wrong with that. But if you'd like you can use a tool like this, and there are a lot of them online, but this is one that I actually really like, but certainly if you go ahead to Google, Google CSS sprites generator, you're going to see a ton of these schools.

And essentially, the way most of these work is you upload multiple graphics, and these will stitch them together in a sprite for you, generate the sprite which you can then download and then generate the CSS code that allows you to access the different graphics within the sprite. So that way there's no guessing as to, what I need to use to position this particular icon, and these tools work really, really well, they are a great way to save a little bit of time. So kind of experiment those tools see if you like them and see if they fit your workflow. And of course, the last resource I am going to point you to is lynda.com.

You know, if you want to continue learning CSS, I recommend checking out all the other CSS related titles in the lynda.com online training library. We have a variety CSS courses structured around both authoring tools, in general concepts and the library continues to grow every single day. Now if you started here in this course, I recommend actually going back and checking out the CSS Fundamentals, CSS Core Concepts and the CSS Page Layout courses. Of course, keep an eye out for all of the courses in our CSS series.

Just look for CSS: and then a course name. We're going to continue to add new courses in the CSS series, so be sure to check back the library often for new releases. Once again, thanks for watching, and I'll see you in my next title.

Show transcript

This video is part of

Image for CSS: Styling Navigation
CSS: Styling Navigation

53 video lessons · 17144 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 3m 8s
    1. Welcome
      42s
    2. What you should know before watching this course
      1m 12s
    3. Using the exercise files
      1m 14s
  2. 35m 25s
    1. Organizing menus with lists
      4m 26s
    2. Ensuring accessibility
      9m 3s
    3. Using the nav element
      7m 30s
    4. Creating block-level links
      3m 8s
    5. Lab: Structuring navigation
      4m 11s
    6. Solution: Structuring navigation
      7m 7s
  3. 48m 42s
    1. Exploring link style considerations
      9m 2s
    2. Using global link styles
      9m 56s
    3. Styling link states
      10m 57s
    4. Indicating external links
      10m 4s
    5. Styling image links
      8m 43s
  4. 52m 5s
    1. Stripping default list styling
      4m 34s
    2. Defining link dimensions
      6m 0s
    3. Setting link styling
      3m 36s
    4. Aligning links vertically
      4m 11s
    5. Controlling link spacing
      2m 30s
    6. Styling menus with borders
      2m 32s
    7. Creating rollovers
      4m 45s
    8. Restricting link styling
      3m 31s
    9. Lab: Creating a vertical menu
      11m 44s
    10. Solution: Creating a vertical menu
      8m 42s
  5. 54m 58s
    1. Stripping list styling
      3m 35s
    2. Displaying links horizontally
      6m 14s
    3. Clearing floats
      6m 12s
    4. Controlling link sizing and spacing
      3m 11s
    5. Styling links
      7m 16s
    6. Creating rollovers
      5m 52s
    7. Indicating current pages
      4m 43s
    8. Controlling cursor states
      2m 46s
    9. Lab: Creating horizontal menus
      6m 45s
    10. Solution: Creating horizontal menus
      8m 24s
  6. 55m 35s
    1. Overview of dropdown menus
      1m 17s
    2. Structuring submenus
      5m 56s
    3. Styling submenus
      6m 4s
    4. Creating submenu rollovers
      3m 28s
    5. Positioning submenus
      5m 43s
    6. Controlling submenu display
      5m 5s
    7. Creating persistent hover states
      5m 53s
    8. Animating menus with CSS transitions
      6m 29s
    9. Lab: Dropdown menus
      6m 51s
    10. Solution: Dropdown menus
      8m 49s
  7. 58m 7s
    1. Creating CSS-only buttons
      8m 39s
    2. Creating special effects for buttons
      4m 2s
    3. Enhancing buttons with gradients
      7m 40s
    4. Overview of CSS sprites
      3m 30s
    5. Using CSS sprites for icons
      14m 30s
    6. Styling block-level links
      8m 38s
    7. Lab: Enhancing navigation with CSS
      5m 26s
    8. Solution: Enhancing navigation with CSS
      5m 42s
  8. 6m 29s
    1. Additional resources
      6m 29s

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 CSS: Styling Navigation.

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 preferences from 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.