Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
So what we've seen for the last 2 videos is was ways of placing an image into the background of an element and changing how its positioned, how it's repeated. All that has left us with, if you look at the CSS, is something, it's honestly a little reverse and kind of repetitive, it's background color, background image, background repeat, background position. It would be really nice if this were all expressible in a single property and fortunately it is.
So we'll join all this stuff up and get rid of the color part and just leave myself with background, RGB 85%, 85%, 85% URL of the image I want to use, here's the repeat, here's the position and if I save that, and reload, there's a difference because that's exactly equivalent to what I just had, with all the individual values listed out one by one and the individual properties listed out one by one. This is background as a shorthand, it's a shorthand for that other thing that we saw before. Now, the thing about background as a shorthand is that the order that these things go in, mostly doesn't matter with one exception. So if I decided that I didn't want my color, if I think it makes more sense to have the color at the end, so that I say, here's the image, here is the image repetition, here's where the origin image gets placed and then here's the background color, is sort of fall back if my image doesn't show up. You can write it that way, that's fine.
The in which these are it doesn't matter except for the background position. So, if you have 00, or if we had a 50% 75%, those have to stay together and they have to be in the order horizontal and then vertical just like they do with background position, because basically what you do is you are taking the value from each of those background image, background position, background color and you're putting them all into this background shorthand property, and you can put them in whatever order you want, but you can't like split them up and I can't take the background position values and just split them up and put them wherever you want and expect the browser to know what you want to do.
So we could at this point, change the way this is setup, so that we have the image but it's not repeated and it's placed halfway across the element and three quarters of the way down and we're going to actually drop out the blue in our background color so that we get sort of a yellow. There you go, that's what we got by doing that. If I take these and move them around and I try to improve the color a bit, because wow, that ever hurt, then, there you have that.
There's background, is basically a way of shortening things up so you don't have to write out every single one of the properties and values. There's one thing that you do want to watch out for though and that is, that if you leave out any of these, if I were to say background, URL blah, 50% 75% RGB 85%, 85%, 60%, I didn't say anything about background repeat so it's set to its default, which in fact is repeat, so having done that, even though know I didn't say anything about repetition, it's going to be fully repeated throughout the background of the element.
Similarly, if I don't say anything about the background position, then it's going to default to the top left. If I leave off a color, then it will default to transparent, which is, there won't be a color and if I don't include the URL for background image than there just won't be an image, because it will default to none. That is just something to watch out for with background and with shorthand properties in general. If you leave out a piece of the shorthand value, like in this case, background position or background repeat, the browser will just automatically fill in whatever the default is for the corresponding property.
So the default for backup position is 00, which is the top left corner. So if you don't say anything for the background positioning, in your background value, then 00, the default is what's going to be filled in. So that's background with the shorthand for you.
There are currently no FAQs about CSS Web Site Design.
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.