Join Eric Meyer for an in-depth discussion in this video XHTML essentials, part of CSS Web Site Design.
- View Offline
- Exercise Files
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.
Skill Level Intermediate
Layouts with CSS in Dreamweaverwith Joseph Lowery3h 33m Intermediate
Site Navigation with CSS in Dreamweaverwith Joseph Lowery3h 24m Intermediate
2. CSS and XHTML
5. Adding Colors and Backgrounds
6. Setting Typography
7. Using Margins and Borders to Create White Space and Separation
8. Creating Tables
9. Styling for Print
10. Bringing It All Together
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.