Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In XHTML and HTML Essential Training, Bill Weinman helps designers and coders understand XHTML and HTML. In the process, Bill covers document structure, block and inline-level tags, floating images, controlling white space, phrase and font markup, and tables and frames. He even provides a good introduction to CSS. Bill offers step-by-step guidance for building a complete working web site. Exercise files accompany the course.
CSS stands for Cascading Style Sheets and this is the technology that's used for formatting web pages. This chapter is about CSS. It's not intended to be a complete reference on CSS. It's intended simply to expose you to it and show you what it looks like and roughly how to use it so that you can apply it to some extent in your own documents. For a complete reference, there is another CSS course here on lynda.com in addition to some other more task-oriented courses that cover CSS and many references available at other places as well.
So this is not intended to be a complete reference. It's simply intended to be an overview and to give you enough information so that you can start to use CSS in your own documents. This is an example of a document which is rendered without CSS, and this is the same document with CSS. You can see we have accomplished the same formatting in both of them, so we can look at how that's done. Here is the no CSS version. You will see it has got the background color and the text color specified here in the body tag, and here in the CSS version, it has the same thing specified, but they are using a Style attribute instead and this is CSS inside the quotes, inside the Style tag that's written in the format of CSS.
So let's just take a look at how this works. We'll go ahead and we'll change something here. We'll change the font of the document. We'll choose the Font Family attribute, Font-Family, and we'll say that that's going to be Tahoma. Choose that Sans-Serif one. It will look very different from what we have here now. I will Save that, and go ahead and Reload in the browser, in the CSS Body Style version, and go ahead and hit Reload and there we have the same document and it's simply changed. It's using the Tahoma font family now. So that's it.
That will change everything in this body container. So the body container, it comprises the entire document beginning to end, the content portion of the document. So all of that is changed to the Tahoma font. Now, let's say we just wanted to change the h1 tags. Well, we can create a little style sheet inside this document and we can use the Style tag for that. This is different than the Style attribute. The Style attribute applies to one element in one place in a document, the Style tag applies to the entire document.
So up here, we can say h1, and that will select all of the h1 elements in the entire document. We can put a style inside these brackets here and just say color: #006 and that will make a blue color. So I'll save that and now all of the h1 elements, which are these headings here, will change to blue. Go ahead and Reload, and there you see that they are now these dark blue that I specified as 006. So that's how you can change just one element.
That's just little bit of a sneak peak of the power of CSS that allows you to change one tag throughout the document. So every place that tag shows up in the document, it will be changed. This is what CSS does, this is how it works, and so through the rest of this chapter, we'll be looking at how this all works.
Find answers to the most frequently asked questions about XHTML and HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.