Username:
Password:
Adobe Dreamweaver: Creating CSS Layouts Tutorials

Core Concepts of CSS / CSS Styles Panel – Current Mode

Subtitles of the Movie

Let me now review the Current View or Current Mode of the CSS Styles Panel. Here in this mode, the Styles Panel is divided into three panes. At the top you have a summary, the Selection Pane that displays the CSS Properties for the current selection in the document. Notice that I have this AP DIV Tag selected and applied to that AP DIV Tag is this style text file Ð Align. So here's a summary of the CSS Properties for that style. In the middle here the second pane I have a display of a location of the Selected Properties or a Cascade of Rules for the Selected Tag depending on my selection. On the bottom you have a Properties Pane that let's you edit CSS Properties for the rule applied to that selection over here. I can resize any of these panes by moving my mouse to the edge clicking and dragging up or down. The summary for Selection Pane here at the top displays a summary of the CSS Properties and their values for the item currently selected in the Active Document, the document over here. The summary shows the Properties for all rules that directly apply to the selection and only Set Properties are shown, so that's kind of nice. You only have properties that are actually set for that style. The Rules Pane here is the middle one and it has two views, the About or the Rules View depending on your selection. In the About View which I have here, that's the default one, the pane displays the name of the rule that define the selected CSS Property and the name of the file containing the rule. In this case the rule is pound section links and its defined here in this external style document. In the Rules View which you can move into by clicking on that Button to the right, let's go ahead and extend that down so you can see all the rules. This pane displays a cascade or hierarchy of all the rules that are applied directly or indirectly to the current selection. Now notice that when you select over here in the summary for Selection Pane, a property, all the properties for the defining rule appear down here in the Properties Pane. With this you can then use the Properties Pane to quickly modify your CSS, whether it's embedded in the current document or linked by means of an attached Style Sheet. By default, the Properties Pane shows only those properties that have already been set and then arranges them in alphabetical order. In conclusion any changes that you make here in the properties pane will be applied immediately to your document, letting you preview your work as you go just as you can here in the All View of the CSS Styles Panel. Dreamweaver organizes CSS into three Selector Types so let me now move onto the next movie and discuss each of these Selector Types in more detail.

Tutorial Information

Course: Adobe Dreamweaver: Creating CSS Layouts
Author: James Gonzalez
SKU: 33914
ISBN: 1-934743-99-2
Release Date: 2008-09-21
Duration: 8 hrs / 92 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 81,350 Video Tutorials (20,800 free)
  • Video Available as Flash or QuickTime
  • Over 782 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available