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.
Backgrounds probably have as many individual properties as anything else in CSS. You can set color, images, positioning, attachment, repeat, and a host of other properties all as separate values. As you can imagine that's not very efficient. It makes writing them a bit of a chore. Well, thankfully we have shorthand notation for background properties that makes all of that a little bit easier, we just have to know the rules behind it. And to do that we're going to open up the background-shorthand.htm which is found in the 05_12 folder.
Very similar to what we had in our last exercise here, three div tags, one is banner1, one is banner2, and then we have a new one banner3 which just says Thank you and that is definitely the sentiment that I want to send out to all of you folks. Thank you for watching this title. And I've got some CSS up here just basically describing the backgrounds for banners 1 and 2, and we're going to do 1 for 3. The first thing I want to do is I want to combine a lot of the different things that we can do with background notation. So I'm going to go up to our div tag up here, and I'm going to remove this background color that we've got, save that, and then I want to start working with the shorthand notation for each of these guys.
Now the first thing I am going to do is I'm going to get rid of the background-image and just have background so this is the background shorthand notation. So no dash just the word background. When we do this we can pass in whatever properties we want for it so that color that I was working with I can type in (#666) for that if I wanted, and then I can pass in the URL. So you can mix colors and images together. There's nothing wrong with that. The only thing is you don't use commas to separate these properties, you just use a whitespace. After the URL I can type in (no-repeat left top;) Go ahead and delete background position and background repeat.
Save that and I'm left with one very efficient and very easy to write background shorthand notation. Now if I save this and test it, it would look exactly the same. So I'm going to go ahead and do that. But there is something that I need to be aware of. You will notice it looks like the text went away here. It didn't go away, I just took off the color. The position of the color in terms of where you place it in the syntax doesn't really matter if you're just using a single background image. But if you're using multiple background images it really does matter. The common practice over the years has evolved into placing the color first and then the image second.
That's actually backwards in terms of the way they're positioned because images are always positioned on top of colors for the most part. It's interesting, because here there's almost something that we need to unlearn if we are going to do multiple backgrounds, and let me show you what I mean. So I'm going to go down to the banner here which is using multiple backgrounds and I'm going to go ahead and get rid of that background-image, and I'm just going to leave the URL here. I'm still going to use a comma separated list, but I'm going to come in and after this one I'm going to say (no-repeat, 0 25px) So I'm essentially getting rid of this and I'm using that.
Then I have a (,) and I can pass the second background into it. In this case the small philly background. Again, here I need to tell it (no-repeat left top;) Now what would happen if I leave off no-repeat? Well, it would apply the default which is repeat. So I'm going to get rid both of those. Now what if I want to apply a color with this as well? Common background shorthand notation says that I should just put it right here #666. But if I save that and preview this, nothing.
So that is not a good thing. So I'm going to go ahead and get a rid of that color and where you're going to place the color is right here at the end and just like any other background in terms of using mobile backgrounds you need a comma. So I'm going to type in (,#666) save that, test it. Now everything's displaying the way that it's supposed to. So if you're going to use a color to combine colors with multiple backgrounds, remember that whenever you're multiple backgrounds they layer one on top of each other, and the first background is at the very top of the stacking order, the last one is at the very bottom.
In those terms color must be placed last. So keep that in mind. Now both of these feature relatively robust background property syntax. Sometimes you just need to do something a lot more simple. So if I go down to banner3 I can come right down here and just type in (background:), and then I can do the color. So (#600). So you don't have to say background color. You don't have to say background image. I could just say background and then give it a URL here if I'd like. So you can use this shorthand notation no matter how many properties you're passing along.
It can be a single property, or it can be multiple. So if I save this, preview this in my browser again, now there's our Thank you. So the background shorthand notation it can make your life a lot easier for you when writing your styles, because it's going to save you a tremendous amount of time. Now keep in mind that any properties you leave out, like the no-repeat for example, those are going to be set at their default values. So you should really think about this. For the most part that's rarely if ever going to cause you any type of problem but it is a good thing to keep in mind as you're working with your styles.
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.