Learn how to use Style Selectors in this Adobe Dreamweaver CS3 Essentials training video series.
Tags:adobe,adobe dreamweaver cs3,essentials,selectors,style,total training
Grab video code:
So let's do a final preview of this page. Of course Dreamweaver will always ask you to save your page before you preview it. Then we'll just take a quick look here and see Order, Contact, Biography, all of our rollovers working. We could also now set these to link to each of their sections. I won't do that now, but if you're looking at the completed site you'll notice that these are links and they use rollovers. In this case, because this text is an image, I use Dreamweaver's behavior to create the rollover. We'll explore that at the very beginning of Part 2, but for now, let's just end with a quick review of what we've learned so far about styles.
Remember, when you create a new style, the first choice you have to make is what type of selector you use. If you choose a Class selector, you're going to create a style that starts with a dot or a period and can be applied to any element on the page. That's why we use Class styles for this frame an for the border around the image, because it enabled us to use the same style for a time.
You want to use a Tag selector if you want to redefine an existing tag. You may remember at the very beginning of this lesson when we redefined the h1 tag, that allowed us to change the look of the header style. The Advanced selector is for IDs like the divs that we created to position the elements on this page and also for advanced styles like the ul and li tags that we created within the divs. If you're redefining a tag and you want that new style only to apply when that tag is contained by another element, like a div with an ID, then you would use an advanced selector for that as well.
Also remember that you can create internal styles. Throughout this lesson, we've been creating styles that are in this document only. In the next lesson, we'll create styles in an external style sheet because that enables us to use the same styles on multiple pages throughout the site. That also sets it up to be able to make global changes on many pages at once in the future.
I hope this exercise has helped you starting to get the hang of CSS. If you're still a little confused, don't worry. It is confusing at first. There is a lot to learn when it comes to CSS, but I promise, overtime it gets easier. With the little practice, a little experimentation, and a lot of testing, you can create amazing designs and robust sites for CSS.