Video: The CSS Styles panel

Let's pause for a moment and take a look at the CSS Styles panel, which we've taken a look at briefly over here on the right-hand side. Now, let's take a closer look, because we're going to be spending a lot of time in here over the next several movies, and it will be important for you to be able to find your way around this panel. Without the CSS panel, you won't be able to create, edit, or manage your Cascading Style Sheets. So, it's essential for you to know how to use it. Now, we have already dabbled a little bit in here, but now let's take a tour, and see what all these buttons, and options are about. First of all, there are two main modes for the CSS Styles panel. We have All, and Current. The Current view shows you just rules that apply to whatever element you currently have selected on the page you're working on. For instance, if I click in this heading area here, I see the styles that we set up for each h1 tag, or if I click somewhere inside my links, I see the properties that we've created for our links. The All mode shows you all the style sheets are linked to or embedded in the current document. It groups the rules by the style sheet they're defined in, so you see a folder like structure, showing you all of your CSS rules. At the top here we see the name of the style sheet.

In Dreamweaver CS3 Essential Training, instructor Garrick Chow delves into the many powerful features of the latest version of this powerful web design application. He covers everything from the simplest basics of using Dreamweaver CS3 to applying it to develop a fully interactive, accessible site. Garrick explains the new interface features, and demonstrates how to create, edit, manage, design, and publish a professional website with Dreamweaver CS3 and complementary applications. Exercise files accompany the training.

The CSS Styles panel

Let's pause for a moment and take a look at the CSS Styles panel, which we've taken a look at brieflyover here on the right-hand side. Now, let's take a closer look, because we're going to be spending a lot of timein here over the next several movies, and it will be important for you to be able to find your way around this panel.Without the CSS panel, you won't be able to create, edit, or manage your Cascading Style Sheets.So, it's essential for you to know how to use it. Now, we have already dabbled a little bit in here, but now let's take a tour,and see what all these buttons, and options are about. First of all, there are two main modes for theCSS Styles panel. We have All, and Current. The Current view shows you just rules that apply to whatever elementyou currently have selected on the page you're working on. For instance, if I click in this heading area here,I see the styles that we set up for each h1 tag, or if I click somewhere inside my links,I see the properties that we've created for our links. The All mode shows you all the style sheets are linked toor embedded in the current document. It groups the rules by the style sheet they're defined in, so you see a folder likestructure, showing you all of your CSS rules. At the top here we see the name of the style sheet.

In his case, it's styles. CSS, which we created previously, and with it toggled open, we see all the rules containedin that style sheet. If we had more style sheet attached to this page, each sheet would appear with its own toggle arrowthat you could use to open, or collapse to see, or hide its styles. When you click to select any of your rules,the properties of that particular rule show up down here in the lower portion of the panel so, you can see exactlywhat values each property has, and from here you can directly edit properties, or you can click Add property,to add properties to your rule. Now, you'll only see the list of properties this way if you have this button down here selected, which displays only the properties that have been set for that particular rule. The button to its leftis for List View, which lists every single possible property that you could edit for this particular rule in alphabetical order.

You can see that there are a lot of them, but as I scroll through here, I'll eventually see some of the propertiesthat I set up for this particular rule. You can see most they're colors here. Select link, here. You can see the rulesthat I setup for the link. There's color, text decoration, and the rest of these are pretty much blank.I don't consider this the most efficient way to work so, I don't spend a lot of time in List View.The third view is Category View, which also lists every possible property for your selected rule,but in this case they're grouped by, you guessed it, category. Let me collapse font for minute so, you can see we have,Font category, Background, Block, Border, and so on. This can sometimes be a convenient way to find the propertiesyou want to alter, despite browsing through the categories. It's definitely more convenient than thatalphabetical List View. You may find yourself working in this view sometimes. Personally, I prefer to keepjust the set properties visible, and if I needed an additional property, I like to use the Edit button down here.

That opens up the main CSS editing window, and we'll be spending the majority of our time in here.If you're not very familiar with CSS rules, and capabilities, this is the best place to do your style creation, and editing,because everything is broken down into meaningful categories. I'll cancel out of there for the moment.As far as the other three buttons found on here, we've already scene that you use the link buttonto link to an external style sheet. The next button with the little plus symbol (+) on a use for creating new styles,either internal, or external, and we'll be getting to that, and clicking the trash icon, deletes your currently selected rule,which is useful if you no longer need a rule you created, or if you just created a rule by accident.

You just need to select that rule, and then click on the trash icon to delete it. So, that's a brief tourof the CSS style panel. Again, it's essential for you to keep this panel open when you're workingwith Cascading Style Sheets in {italic}Dreamweaver.{plain} That is, unless you code everything by hand, but if not,definitely keep it open. We're going to be working a lot with this panel in the upcoming movies.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.