Start learning with our library of video tutorials taught by experts. Get started
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.
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!
There are currently no FAQs about CSS: Core Concepts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.