This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

So, I promised to explore the CSS styles panel a little more, so, let us just make sure we are all clear on this. You have two options here in the CSS styles panel, "all and current". When you choose all, you see all of the styles available to your page. If you choose current, you will see the styles applied to the currently selected element. We will get into this more in the next lesson when we go to advanced CSS. This is a great diagnostic tool when you are trying to figure out how multiple styles apply to the same element. But for now, let us look at the all section, we see all of the styles options under style and you have a little plus and minus you can click to open and close that.

This by the way is an external style sheet. Let us just have one little style in here because I wanted you to see what internal and external style sheets look like in comparison to one another. So, if I close that up, this .CSS, that is what tells me it is an external style sheet. It is saved as a separate file and linked to this page or Dreamweaver says attached to this page. You can have internal styles and styles from an external style sheet and you can even have multiple style sheet attached to the same page.

If you open up the style option and you click on one of the formatting options, you see the properties for that. Now, we used that a little bit already to edit and change properties for a particular CSS rule. Notice that if you right click on a file name, you get some familiar options like rename and delete. Sometimes you will create a style and then decide. I do not want to really call it sidebar head, I want to call it sidebar subhead, so you can change the name as well as the definition of a style and you will notice this is also where you will find shortcuts to things like attached style sheet and export styles.

At the bottom of this panel, you will find a couple of little icons that are also very handy. We talk already about attached style, new rule, edit and this is a delete button. If you have a style selected and you click on this little trashcan, no surprise it will go away. This over here is a little lesson intuitive. If you click on the icon on the far left of the bottom of this properties panel, you display all of the options first style, not just the ones that are applied. If you click A to Z, you will change the order of them. And this where it says show "only set properties" is the icon I recommend.

When you have this selected, you only show the properties that are actually associated with a style. So, rather than sing the full list and having to scroll through and find where are the things that actually apply to the style, if you click the show only set properties button, then you will only see what is applied to that style and I think the properties, inspectors much more useful that way.

Now, if you want to add a property, you might want to use one of these options. But if you click add property, you will get that list anyway. Okay, we made quick work of cleaning up that page, so, we have got all of the headlines formatted now, the underlining taken away from the links. Let us close this out of the way. So, let us open the file called CSS not formatted. You can see right away this page needs some help. But again we are going to practice some of the basics to make sure that you do not miss anything along the way before we get more advanced.

So, I promised to explore the CSS styles panel a little more, so, let us just make sure we are all clear on this. You have two options here in the CSS styles panel, "all and current". When you choose all, you see all of the styles available to your... click to read more