New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

CSS: Core Concepts
Illustration by

Basic text formatting: Lab


From:

CSS: Core Concepts

with James Williamson

Video: Basic text formatting: Lab

Controlling the text formatting of a simple page doesn't require a tremendous amount of planning or execution. However, when controlling a site, especially a complex site, even the simplest text formatting requires thinking about how to apply the formatting efficiently, and in a way that doesn't change the formatting that you need for other elements. In this lab, you are going to return to the desolve.org site and focus on controlling the site's typography. You'll need to utilize many of the properties that you've learned in this chapter as well as put some thought into writing the most efficient selectors possible to achieve the desired formatting.
Expand all | Collapse all
  1. 4m 57s
    1. Welcome
      55s
    2. Using the exercise files
      4m 2s
  2. 1h 7m
    1. Exploring default styling
      4m 56s
    2. CSS authoring tools
      2m 29s
    3. CSS syntax
      4m 45s
    4. Writing a selector
      4m 10s
    5. Setting properties
      8m 40s
    6. Common units of measurement
      7m 47s
    7. Inline styles
      5m 1s
    8. Embedded styles
      5m 19s
    9. Using external style sheets
      10m 34s
    10. Checking for browser support
      8m 48s
    11. Dealing with browser inconsistencies
      5m 30s
  3. 2h 15m
    1. Structuring HTML correctly
      2m 51s
    2. Element selectors
      4m 52s
    3. Class selectors
      6m 4s
    4. ID selectors
      3m 27s
    5. Using classes and IDs
      10m 7s
    6. Element-specific selectors
      4m 35s
    7. The universal selector
      5m 42s
    8. Grouping selectors
      4m 49s
    9. Descendent selectors
      7m 32s
    10. Child selectors
      5m 7s
    11. Adjacent selectors
      5m 30s
    12. Attribute selectors
      12m 43s
    13. Pseudo-class selectors
      3m 54s
    14. Dynamic pseudo-class selectors
      8m 29s
    15. Structural pseudo-class selectors
      6m 45s
    16. Nth-child selectors
      13m 10s
    17. Pseudo-element selectors
      12m 40s
    18. Targeting page content: Lab
      8m 56s
    19. Targeting page content: Solution
      7m 59s
  4. 42m 39s
    1. What happens when styles conflict?
      4m 0s
    2. Understanding the cascade
      5m 47s
    3. Using inheritance
      6m 11s
    4. Selector specificity
      6m 55s
    5. The !important declaration
      4m 5s
    6. Reducing conflicts through planning
      3m 33s
    7. Resolving conflicts: Lab
      6m 45s
    8. Resolving conflicts: Solution
      5m 23s
  5. 1h 47m
    1. Setting a font family
      7m 10s
    2. Using @font-face
      9m 18s
    3. Setting font size
      7m 35s
    4. Font style and font weight
      6m 52s
    5. Transforming text
      3m 58s
    6. Using text variants
      2m 49s
    7. Text decoration options
      4m 26s
    8. Setting text color
      3m 2s
    9. Writing font shorthand notation
      8m 49s
    10. Controlling text alignment
      6m 33s
    11. Letter and word spacing
      9m 11s
    12. Indenting text
      4m 30s
    13. Adjusting paragraph line height
      10m 30s
    14. Controlling the space between elements
      6m 41s
    15. Basic text formatting: Lab
      8m 45s
    16. Basic text formatting: Solution
      7m 14s
  6. 2h 1m
    1. Understanding the box model
      16m 53s
    2. Controlling element spacing
      14m 29s
    3. Controlling interior spacing
      10m 49s
    4. Margin and padding shorthand notation
      6m 27s
    5. Adding borders
      8m 57s
    6. Defining element size
      10m 7s
    7. Creating rounded corners
      6m 58s
    8. Background properties
      2m 51s
    9. Using background images
      5m 10s
    10. Controlling image positioning
      10m 25s
    11. Using multiple backgrounds
      7m 5s
    12. Background shorthand notation
      5m 25s
    13. Styling container elements: Lab
      7m 55s
    14. Styling container elements: Solution
      8m 17s
  7. 47m 51s
    1. Color keyword definitions
      5m 4s
    2. Understanding hexadecimal notation
      6m 5s
    3. Using RGB values
      4m 58s
    4. Using HSL values
      5m 17s
    5. Working with opacity
      2m 23s
    6. Using RGBa and HSLa
      3m 8s
    7. Styling drop shadows
      5m 38s
    8. CSS gradients
      6m 32s
    9. Working with color: Lab
      4m 26s
    10. Working with color: Solution
      4m 20s
  8. 1m 58s
    1. Additional resources
      1m 58s

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 ...
CSS: Core Concepts
8h 49m Beginner Nov 22, 2011

Viewers: in countries Watching now:

In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.

Topics include:
  • Exploring default styling
  • Writing a selector
  • Setting properties
  • Working with common units of measurement, including ems and pixels
  • Structuring HTML correctly
  • Understanding the cascade and inheritance
  • Setting a font family, font size, text color, and more
  • Understanding the box model
  • Styling container elements
  • Working with RGB vs. HSL values
  • Styling drop shadows
Subject:
Web
Software:
CSS
Author:
James Williamson

Basic text formatting: Lab

Controlling the text formatting of a simple page doesn't require a tremendous amount of planning or execution. However, when controlling a site, especially a complex site, even the simplest text formatting requires thinking about how to apply the formatting efficiently, and in a way that doesn't change the formatting that you need for other elements. In this lab, you are going to return to the desolve.org site and focus on controlling the site's typography. You'll need to utilize many of the properties that you've learned in this chapter as well as put some thought into writing the most efficient selectors possible to achieve the desired formatting.

Let's take a look at the goals that we have for our text formatting lab. I'm in the 04_15 folder and I've opened up the index.htm along with the main.css file which can be found in the same directory in the _css file. Now if I preview this page in a browser just to kind of show you what's going on here, a lot of the formatting doesn't look very good at all. So typographically, we've got our work cut out for us here, so a lot of what happens in this particular page is very dependent upon the typography.

So I am going to jump back into our page. Now, from the previous two labs, you should be fairly familiar with the structure of the page and you should be fairly familiar with how the CSS is structured. So I am just going to jump into what our goals are for this particular lab and to find out what those goals are, I am going to switch over to the main.css file. And at the very top of the code, I've got our Lab instructions posted here. Once again, just like we did in the previous lab, you're going to have to figure out exactly kind of where to put these selectors.

This time I've given you some hints, I've got comments scattered throughout the CSS that say hey, put the link styling here, place the @ font-face rules here, that sort of thing. So you'll get some feedback as far as that goes. I'm more concerned at this point that you're focusing on the overall typographic strategy of the page. Now the very first thing that we are going to do for this particular file, we are going to be using web fonts for our site. So one of the things I would like you to do is go over to the assets folder, inside that you're going to find a text file that says fonts.txt and that has all of the font syntax that we are going to be using for this.

So I am not going to make you write this syntax from scratch. That wouldn't be exactly fair right now, would it? And then you are going to place that at the very top of our Global styles. Okay, so that's kind of a softball pitch, just to get you started. But you're also going to have to go through to make sure that you are using those new fonts as well and we'll talk more about that in just a moment. Now, our second goal that we need you to do is in the Global styles region, so remember, our styles are separated by sections, but in the Global styles region or section of our styles, I need you to write rules that are going to take the em element and the strong element and reset them so that they're once again displaying as italic and bold.

So why aren't they? Well, at the top of our styles, we have a very limited reset. This is one of my favorite resets to use because it's not overpowering and it's pretty easy to overwrite. But essentially, we're stripping all the margins, padding and border off of these elements, so if there is any default of those values, they are gone. We're using vertical line baseline to make sure that everything is aligned to its baseline property, even within things like tables and things like that. And then we have a font: inherit, and this is what's getting rid of our default styling for some of those elements like strong and em.

So it's not quite a scorched earth, CSS reset, but it does reset a lot of properties that you then have to go back through and toggle back on if you want them and that's one of the dangers of using a CSS reset. So again, the goal is in those Global styles regions that we were just in, I want you to follow that with a couple of rules that are going to reset em as displaying as italic and reset strong as bold. Then in the same section, I want you to find the body selector and I want you to modify that selector, modify the existing properties or add to the properties, so that the font family being used is Cantarell, the new font that we've added along with its proper font stack.

I want you to set the initial font size to the default size of the browser. So again, you have to remember how to do that. Set the line-height property so that all of the elements on the page have a line height that's 1.5 times the size of their font size. Now, when you do that you're going to have to remember you know do you use set that's using a relative unit of measurement or a multiple, you know how is this value going to inherit, those are the things that you need to think about. You're going to set the font-weight and the font-style to Normal and you are going to set the foreground color to ASH. Now every time I ask you to set a color, whether it would be a foreground or a background color and I use a color name, you can go right up here to the Color Guide and you can copy and paste these values, either the hexadecimal value or the RGB value.

Don't copy and paste the color name, because these are not reserved keywords. So copy and paste one of these; either the hexadecimal value or the RGB value, one of those two, either one of them will work just fine. The fourth objective for our lab is I want you in the Global styles to find the comment that indicates the location of the link style. So if you scroll down into our Global styles, this is kind of what you are looking for, a comment like that and that actually is the comments. So anytime I tell you, hey, go in the styles and look for a comment that says this, it's going to look something like that.

So I am going to go back up here again, let's read through this. So once you've found where you need to write those styles, what you need to do is write a couple of selectors that's going to strip out all of the text decoration for all our links. Set the color, the default color of our links to Burnt Orange, once again see the color guide up there, and set all of the color of the links when they are hovered over to the Pewter Blue and again, you can get that value from the color guide. So remember, this is supposed to be a very generic, very basic default styling for our links. So, keep that in mind as you write the selector for it.

In the header section of the styles and again, all of our styles are separated by sections so here is banner styles, you'd be looking for the header styles. So as you go through, you're going to look for that header section. All right, so let me go back up. But in the header section of styles, you want to modify the header h1 and h2 styles, so that the h1 has a font size that is 3.2 times its parent element's font, set the font-weight to bold, display the entire text in all caps, set the line height to an exact value of 165px and set the color to white.

That's going to give you some really dramatic formatting for that. For the h2 in the header, find that rule, set its font-style to italic. Set the font-weight to normal, set the font-size to 1.4 times its parent element, the color to white, all the letters to lowercase and increase the space between the letters by 0.1em. You also want to set the line height there to exactly 165 pixels as well. Now I know this might sound kind of confusing, you know the font size to 1.4 times its parent element, but trust me, if you were paying attention in the font-size movie, you kind of already know what I'm going for there.

Remember, it's calculating this based on its parent element, so we are using a relative unit of measurement there, okay. So let's go down to our last two objectives and the seventh one is Find the #mainNav a selector that's going to target every link inside the main navigation. Modify the rule so that the text displays an all caps and the text is aligned to the center. You then need to find the #mainNav a em selector which is just below that and modify it, so that the text appears in all lowercase.

Finally, go down in your styles and find the #footer a selector, you want to modify that selector so that the link text is aligned vertically with the background image (the bird). So you want it centered vertically with that bird. Now if you want a hint on this one, examine the height of that element for a clue on how to accomplish that. So okay, I know there's a lot going on there. So I am just going to leave it right at that, I am not going to make you do anything else. But I want to encourage you. The reason I'm giving you all these tasks is I want you to really pay attention to how the remaining formatting of the rest of your document is set as well.

Look into each section, you know like the article and the side regions and see how the text in each of the elements there is formatted. By setting that base formatting on the body tag, we can then treat every single region as an individual area and go ahead and tweak the formatting as needed. Now for the most part, styling is defining the relationship between the various element types. Care has been taken when I initially designed this to make sure that the formatting between the regions is consistent and it works together harmoniously. So really take a look at the styling and see if you can pick up on that. All right.

There you go. Have fun working on the lab and if you want to compare your solutions to mine, be sure to go ahead and watch the solutions movie as soon as you're done working on your lab.

There are currently no FAQs about CSS: Core Concepts.

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

join now 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 CSS: Core Concepts.

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

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.