Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Now it's time to get a little bit more complicated with selectors, which is what we're going to do in this movie. But what we need to do first is take a moment and consider the structure of the document, which you can see here is markup from our Javaco example and an XHTML document of course has a number of elements, some of which contain others. The HTML element, for example contains all the other elements. The head element, as we can see here, contains the title link and style elements. The body has everything else really, the divs and the a, and the lists and the list items, and the paragraphs and all that other stuff.
All of these are connected in parent, child relationships. Most elements have either a child or a parent or both. The HTML element, to pick an example, has two children, the head and the body and the head element has three children, title, link and style. The body has four children, those are the divs, like the masthead div, the content div, the sidebar div, the footer div and each of those divs have children as well. Basically one element is the child of another if you can go down one step here, so from head to title or from body to div masthead. The image inside the masthead div is not a child of the body. It's the descendent of the body. Conversely, the body is not the parent of the IMG, is an ancestor of the IMG element.
The div, that's the masthead div, that is a child of the body and the body is its parent. So, as you can tell from that, an element can have many ancestors, but it can have only one parent, and most elements can have many children. There are few elements like IMG, that can't have children. There's no such thing as a child element for an IMG element, an image can have a parent and it can have ancestors but it can't have any children or descendents, but the body as, for example has just a whole tone of descendents and children are also descendents.
The masthead div here is a descendent of the body but it is also a more specific kind of descendent called a child of the body. The relationships between these connections should be drawn as a tree. It's kind of an upside down tree, with the HTML element at the top and then all of the descendent elements coming down from it. So, visually we might think of it more like a root system, but it's still a tree. This can help us visualize how we could write descendent selectors, where we can select elements that are descended from other elements. So, considering an example where we want a style, all of the links that are inside of ordered lists so in that case we would write the selector ol space a, and that space between the two element names, indicates a descendent relationship not a child relationship but a descendent relationship and what this does, we can read it backwards and say that this selects all a elements that are descended from ol elements. Any other a elements, those a elements that are not descendent from ol elements, are excluded form the selector, they're not matched by this particular selector. So we can use this tree to find the various relationships the parent-child and ancestor descendent relationships and it's one way of visualizing how to create your descendent relationships.
So for example let's say that we want to select paragraphs inside the masthead and make them italicized. So we go to our code, we can say masthead space p, font-style italic and if we hit Reload the July 16, 2006 is now italicized but since it's the only p element that descends from masthead ID div, it's the only one that's italicized. All the other paragraphs throughout this document are not going to be selected here. We might want to do the same thing with the sidebar, so let's say sidebar p style italic, and now paragraphs that are descending from the element with an ID of sidebar will be italicized. So if you look over to the sidebar there and hit Reload we have italicized text. Now, of course, we can group these together so that instead of saying masthead p, font- style italic, sidebar p font-style italic, just put a comma between the two descendent selectors and so we have two descendent selectors that are grouped together and any paragraph that descends from the masthead or any paragraph that descends from the sidebar, italicize them, and then we might do some other treatment for paragraphs descending from the content div of something like font-weight bold and hit Reload and there we go. This is why, this is why, you have to be careful when you write element ID combinations like div with an ID of content.
You'll notice I put a space here, and that would by mistake, in effect, this would be any paragraph element that descends from an element with an ID of content, and that element descends from a div, make them bold and if we go back and hit Reload, we'll discover that that's not working because there is no div element that's an ancestor to the content div, and the space between div and the content ID descriptor creates that descendent relationship.
If I get rid of it, now I'm saying any development that has an ID of content. So, in this case any paragraph that descends from a div element, where that div element has an ID of content make the font-weight bold and there it works. So that's why you have to be careful both with IDs and classes, that you don't accidentally put a space between an element descriptor and the ID or class descriptor, unless you really do mean something like I want a paragraph that descends from an element with an ID of content, where that element itself descends from a div, which as we saw won't work here, all we want is this one instead.
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.