Start learning with our library of video tutorials taught by experts. Get started

Exploring CSS Positioning

Formatting the menu with CSS


From:

Exploring CSS Positioning

with Candyce Mairs

Video: Formatting the menu with CSS

What I want to do now for my web page is take a look at the design and the hyperlinks within the original design, and you can see they're fairly spread out. They're all capital letters. They're in a particular font, and what I like to do is get that type of formatting in CSS done before I start adding the positioning piece. And I do that, because, once I get these more spread out on the line and the text is in upper case, so it can take a little more space. Sometimes, if you've already added the positioning, when you do the formatting, you have to go back and modify the positioning again because the content fills out a bigger area than it originally started. So, I'm going to add the formatting to make it look like this. Now, in my original design, I'm using Marriott Pro and Minion Pro as fonts and these are not installed on most people's systems.
Expand all | Collapse all
  1. 1m 13s
    1. Welcome
      1m 13s
  2. 33m 20s
    1. Why CSS positioning?
      5m 50s
    2. HTML editors
      3m 18s
    3. Getting set up
      3m 39s
    4. Previewing pages in browsers
      3m 51s
    5. Customizing the HTML editor
      5m 32s
    6. Exploring browser variances
      5m 16s
    7. Browser extensions
      5m 54s
  3. 30m 33s
    1. HTML vs. CSS: Which does what?
      9m 55s
    2. HTML div tags
      4m 57s
    3. CSS properties
      6m 21s
    4. The CSS box model
      9m 20s
  4. 28m 46s
    1. Planning the page layout
      3m 47s
    2. Building the header box
      6m 23s
    3. Positioning with HTML
      3m 36s
    4. Positioning with CSS
      8m 21s
    5. Foreground vs. background content
      6m 39s
  5. 25m 44s
    1. Building the menu box
      5m 7s
    2. Adding the menu links
      4m 58s
    3. Formatting the menu with CSS
      6m 43s
    4. Positioning the menu with CSS
      8m 56s
  6. 21m 42s
    1. Adding the middle column
      6m 29s
    2. Creating a CSS rule for the column
      6m 20s
    3. Adding CSS rules for the column
      8m 53s
  7. 19m 49s
    1. Adding the right column and inserting images
      7m 33s
    2. Completing the right-column content
      4m 18s
    3. Formatting the right column using CSS
      7m 58s
  8. 26m 14s
    1. Understanding the float property
      6m 5s
    2. Applying the floats
      6m 1s
    3. Finishing the floats
      6m 24s
    4. Adding CSS properties to the right column
      7m 44s
  9. 30m 59s
    1. Setting up for background colors
      5m 49s
    2. Adding a footer
      8m 50s
    3. Adding the background colors
      7m 20s
    4. Positioning the footer
      9m 0s
  10. 16m 38s
    1. Comparing the web page to the graphic design
      6m 50s
    2. Adjusting the web page as needed
      4m 25s
    3. Adding the final touches
      5m 23s
  11. 2m 43s
    1. Closing thoughts
      2m 43s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Exploring CSS Positioning
3h 57m Beginner May 24, 2012

Viewers: in countries Watching now:

CSS enables you to control the look and layout of a web page much more precisely than you could with HTML alone, but it can be time-consuming to learn. In this workshop, expert developer Candyce Mairs makes styling a quick and easy process, walking you through the process of adding content to a web page and using CSS to position that content. Candyce explains CSS positioning concepts like the CSS box model, floats, and clears and demonstrates how HTML and CSS work together to create the look of your web page. By speaking the same language as the browser, you can learn to work with the browser to place content accurately and easily.

Topics include:
  • Previewing pages in browsers
  • Customizing the HTML editor
  • HTML vs. CSS: which does what?
  • Building the header area
  • Adding the navigation menu
  • Positioning using a float
  • Adding background colors and images
  • Comparing the web page to the graphic design
Subjects:
Web Web Design video2brain
Software:
CSS
Author:
Candyce Mairs

Formatting the menu with CSS

What I want to do now for my web page is take a look at the design and the hyperlinks within the original design, and you can see they're fairly spread out. They're all capital letters. They're in a particular font, and what I like to do is get that type of formatting in CSS done before I start adding the positioning piece. And I do that, because, once I get these more spread out on the line and the text is in upper case, so it can take a little more space. Sometimes, if you've already added the positioning, when you do the formatting, you have to go back and modify the positioning again because the content fills out a bigger area than it originally started. So, I'm going to add the formatting to make it look like this. Now, in my original design, I'm using Marriott Pro and Minion Pro as fonts and these are not installed on most people's systems.

So I'm going to accommodate for that by adding a font that is on most people's systems. And I'm going to fine-tune the features of it to make it look very similar to that graphic design font, but let's get the styles going. The first thing I need to do is figure out what I'm going to style, and what I want to style is the actual text within the hyperlink. So the next closest tag to style is the a tag. So that's what I'm going to do. So I put the a as the selector in front of the curly bracket, then within this area it's a matter of, okay, what are the styles that I want to add? And what properties and values created those styles? So the first one I want to add is font-family.

And within the font-family, what I'm going to add is Lucida Sans Unicode. And this is a font that I can manipulate just a little bit using CSS. And when I do that, and let me put the font-family here. You usually want to put a default family, in case something else is not there. And quite often, you'll do this. This is known as a font stack.

You'll put a sequence of fonts and the system looks at the first one. If it doesn't exist, it goes to the second, and just continues. To save us some time within the course, I'm just using two. I'm also going to use font size. Now, as I start typing, you'll see these properties pop-up. So I'll go ahead and use those to save some time. And the size I'm going to use is 0.75 ems.

And an em represents the width of the letter m for the default font within that area. So since Times is the default font on the system, what it will do is measure the width of the letter m in Times New Roman, at whatever size it is in the browser, and that will be considered one point all. So I can go above and below that. So this is three-quarters of the default size on the operating system. And if you aren't sure, just use 1.0.

And then, you can see if you need to go higher or lower than that. Now, the other thing I'm going to do is use a text-transform feature. We're going to let CSS capitalize everything, every letter. If you choose Capitalize, it capitalizes words, not letters. So what I want to choose is uppercase. And the last property I'm going to add, actually, there are two more I'm going to set up.

I'm going to add letter-spacing, and my letter-spacing is going to be point 0.02em. And we'll take a look at what that does. Also, the last piece I want to add is display block. And what that is going to do, is take every a tag and put it on its own line. So, let's Save the page, and put it in the browser. You can see I do have them on their own line.

They're all uppercase letters. They're not quite spaced far enough apart. I don't have a bold on these, which I may or may not want to do, but I definitely need to add a line height to spread these out. So, I'm going to add a line height of 3 ems and we'll see how that works. So, line height of 3 em. That would be three times the standard size of that particular letter, and let's take a look at what happened.

It definitely spread it out much nicer. Now, the other thing I need to get rid of is the underline here and I'll add that. That is text-decoration. And that would be text-decoration of None. That should get rid of my underlines. So, my formatting will be all set. This time, I think I'll look at this in Safari. It's good to test in multiple browsers. And my underline is gone. Notice my colors are default colors still.

I think I could use a little more space in between these letters, but I can fine-tune once I've completed the positioning piece. At least I have the formatting in place enough, so that, these are all uppercase, which makes them take up a little more width. And my line height has been spread out, which allows them to take up more height within the browser window. So there we are with our menu and the basic formatting is set up for our text. I can fine-tune it once I set up the positioning piece. So that is setting up our CSS formatting for hyperlinks. Because, every one of these, has that a tag attached to it. Every link adopts all of the properties within this area. So that is some basic link formatting in CSS.

There are currently no FAQs about Exploring CSS Positioning.

Share a link to this course
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.
Upgrade now


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.

Upgrade now

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 Exploring CSS Positioning.

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


OK

Course retiring soon

Exploring CSS Positioning will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion. For updated training, check out CSS: Page Layouts in the lynda.com Online Training Library.


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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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