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.
In this chapter we're going to look at ways to associate CSS with XHTML, basically to bring a style sheet together with a document. In order to do that, it would be useful to spend a little bit of time at first discussing XHTML terminology, just so that everyone is on the same page in terms of what we're going to be talking about. You might wonder why we're wasting your time talking about the nitty-gritty of XHTML, when this is supposed to be about the CSS and the truth is that you really do need to have at least some familiarity with XHTML in order to be a good CSS author. So, what we just want to do is review a few terms. The first one is Element, and elements is basically an atomic piece of the document. It's one of the basic structures of a given XHTML document. So div, the p element for paragraph, the h1, h2, h3, all these, you know, IMG, these are all elements and every element is begun and end with a start tag and end tag, respectively.
So div is the element. The first of the div tags is the start tag and then the /div is how you indicate an end tag for that particular element. Now, elements, at least most elements in XHTML can contain content such as this div, which has a little bit of text in it called This is content. Elements like this are called non- replaced elements, because they're not replaced by anything else, they contain the content that they're going to display. An image element, IMG which you can see on there, is what's known as a replaced element.
In other words, this is an element that points to some other resource that will replace it when the document is rendered. The image will be brought in and placed inside the document and this, so IMG is a replaced element and div, p, h1, h2, and so on, these are non-replaced elements. Now, elements can have what are known as attributes and they can have multiple attributes, this div has an attribute of class and has a class attribute, and attribute simply describes some aspect of the element, and every attribute has a value. In this case we have a class of lead.
So the value for the class attribute is lead, and as you can see, in the case of the image, there's actually not only the element, but we have two attributes, each of which has its own value. If you have an attribute, it must have a value even if it's an empty value as is the case with this alt attribute. Its value is basically empty, so alt equals quote, quote, means okay, we have the attribute of alt, but its value is just simply nothing.
But you can't just say alt and leave off the equals quote, quote, that it's not valid XHTML. So the value of the SRC attribute is, is pic.jpg, which in this case means that that's the image that the browser is going to go grab and put into the document. So that's the basics of XHTML terminology. I'll refer to elements quite a bit throughout the rest of the videos and not just in this chapter, but throughout the chapters because a styling element is one of the most common things that you do in CSS. But attributes come into play to particularly the class attributes so I'll also probably mention attributes from time to time, and now you know where they come from. If you're unfamiliar with XHTML, then you might want to check out the learning XHTML tutorial, found also on Lynda.com, that will help get you up to speed if you don't feel that you're quite there with XHTML.
In the next video we're going to talk about CSS terminology.
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.