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

Styling container elements: Lab

From: CSS: Core Concepts

Video: Styling container elements: Lab

In this lab, I want to focus on the box model properties and background properties that we've learned in this chapter, as a means of visually styling page regions. Let's open up our exercise files and check out our objective. So here, in the 05_13 folder, I've opened up all of our pages, Philadelphia, index, galleries and contact. And I have also opened up from the _CSS directory the main.css. All right, I want to preview the index page in a browser really quickly to show you some of our problems, Wow.

Styling container elements: Lab

In this lab, I want to focus on the box model properties and background properties that we've learned in this chapter, as a means of visually styling page regions. Let's open up our exercise files and check out our objective. So here, in the 05_13 folder, I've opened up all of our pages, Philadelphia, index, galleries and contact. And I have also opened up from the _CSS directory the main.css. All right, I want to preview the index page in a browser really quickly to show you some of our problems, Wow.

Nothing really looks the way that it should, so all of our content regions lack their default styling. We are not seeing any background colors, any background images, the positioning and typography of some of these things looks a little off, not very good at all. Let me show you what it should look like. So this is what it should look like and I am going to expand this a little bit out, so we can see the entire page. You will notice that we have well- defined regions, we have got some background colors, we have some background images. We've got these two regions down here that we are going to need to style, and we have got footer region defined as well, so, what I want you to think about is, how these regions are being defined, because that's what we are going to need to go in and style.

All right, so we are going to close the browser. All right, so I am going to go back into our code, and I want to focus on the main.css file. Obviously this is where we are going to be working for this particular lab. I am going to scroll down at the very top of it, and I've got this little series of Lab Objectives here for you, so that as you're working on the file, you can sort of go up and just sort of check these off when you're done with them. The first objective is to Find the header selector in the layout styles, and set it's height to 165 pixels. So a lot of these are going to be really straightforward. You know, you need to define a specific value for a specific region.

So to find like the header selector in the layout styles, keep in mind that these styles are grouped together. So as I scroll through, notice I can find my global styles, I can find things like the basic layout styles, that's where those are. Your content region styles and within your content region styles, you are going to have things like header styles, navigation styles, banner styles and you can just go through those and find all these different interior sections as well. So going back up to our objectives.

In the content region styles, so in those individual areas, you are going to find the header selector and set it's background color to dull gray. So notice that we have got two separate header selectors that you're modifying, one is in the layout styles, I like to keep them separate, so that if I need to adjust a layout, I don't need to go hunting and pecking for them. And then in the content region styles where I am selling the interior of those regions, I have different selectors there as well. You need to find the header selector inside its background color, to Dull Gray. Now if you are looking for color values, you can go right up here to the color palette and you can use these hexadecimal values, or you can use the RGB values, it's up to you.

Remember, don't use these values, because that's just the name of the color those are not reserved keywords and they won't work, so either use the RGB values or the hexadecimal values. The third objective is to go down the layout styles, find the pageFooter selector and set its height to 150 pixels. Then you need to go to all the way down towards the bottom to the footer style section and the region styles, and set the footer's background color to Dark tan. So again, you can get all those colors from right up here.

Now those are pretty easy so far. But now we are going to get into some objectives that are a little bit more complex. Next, I want you to find the banner styles. In the banner selector set, that means the whole set of selectors that are driving the banner, I want you to find the proper selector and set it's height to 350 pixels, that's for the banner. I want you to use padding to move the text 50 pixels away from the left edge of the element and set the background to the gallery_banner jpg in the images directory.

So you are going to have to remember how to set a background image, you are going to have to the remember the syntax in order to point it towards the proper file, gallery_banner .jpg in the images directory. You also want to keep in mind when you are setting that path that it's relative to this file, not any of the other pages. So I'll make sure it's relative based on the CSS folder. Next, you are going to move the text in the banner h1 element down by 290 pixels in a way that allows us to see the full height of the background image.

Now I am being purposely vague there, because I want you to remember a technique that we did earlier in this chapter. You're going to push the text down, so that you can still see the image and the text. And the text is going to overlapping the image, it's not going to be all by itself down there. But I want you to push the text down by 290px. But I want you do it in a way that still allows us to see the full height of the background image, so you are going to have to think about how you're going to do that. Go find the article's section of styles. And then you want to apply a solid bottom border of 2px that uses the color ash, again, grab the color values from up top to the article h2.

That means the heading2 inside of the article. So find that. Finally, we are going to concentrate on these 2 news regions and I want to show you those because they are on index page. I am going to scroll down and right up here in the main article, we have a couple of sections. We have this section with a class of news; and we have this section with a class of news. So those are the sections that we are going to need to style. So we are going to, in addition to finding you know where you want to place these styles within the articles, you are going to need to write all the selectors for this, or at least most of selectors, so if I go back to our styles, let's take a look at our objectives.

These rules as a cumulative factor should set the news section elements to a TOTAL width of 400px. So each of those section elements need to have a total width of 400 pixels wide. You need to create 50 pixels worth of space between them, so that instead of butting right up against each other, they are held 50 pixels apart. You need to set the background color of the new sections to light tan, again, using the colors up top. You need to hold the edge of the content text that's inside the section, away from the edge of the section by 20px.

You need to remove any border from the element, so if there is border at the bottom or the top of the new sections, you need to strip it out. And then, we want to use rounded corners. We are going to round the top-left and bottom-right corners by 15px without changing the other corners, so we just want the top- left and bottom-right corners. We want to reduce the text size in the sections by 90%, as opposed to the rest of the page. We are going to eliminate any right margin from the 2nd new section. So if you apply a margin on the left one in order to push it over, you want to make sure that the second one does not have a margin applied to it, because that could cause a column break.

And then finally, you want to remove the top margin from the heading2 inside the new section. Now as you read through these goals, you might say to yourself, I have no idea how to do any of that. But I promise you, you do. We did every single one of these things in our previous exercises. So if you need to review, go back through those previous exercises, look through them again, look through the finished files and kind of figure out where I'm going with these. I know that this particular exercise is a little bit more vague than some of the other labs that we've previously had up to this point.

But I really want to see how much of this you're retaining, and not only that, but I want you to see how you can take what you're learning and apply it critically. Now some of these objectives are very straight forward as I mentioned. Some of the other ones that I just talked about or going to require you to put in a good deal of thought, in terms of how to best execute the styles, needed for the adjective, but as always, think about what the best possible selector and rules are, in terms of style efficiency and maintainability, okay. Have fun!

Show transcript

This video is part of

Image for CSS: Core Concepts
CSS: Core Concepts

81 video lessons · 40219 viewers

James Williamson
Author

 
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

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

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.