Username:
Password:
Adobe Dreamweaver: Creating CSS Layouts Tutorials

Selector Basics / Editing Style Rules in Dreamweaver

Subtitles of the Movie

Once you've created your styles in Dreamweaver whichever Selector you use editing them in Dreamweaver is all the same whether you're using Classes, IDs or your Restyling Tags. You can edit your styles in a text editor, being careful to keep the syntax rules that I covered earlier and follow them. But it's probably easier to open up the CSS File right here in Dreamweaver. You can also edit it as a text but perhaps the easiest way of all is to use the CSS Window. Notice that I have this 3ColLeftNav.CSS external style document opened and I have all the styles listed here. If I click on it I get the text equivalent over here but I can also double click on the definition and then CSS Rule Definition for that style rule appears and then I have my category and type properties that I covered earlier. I'll be reviewing each of these in detail for the latest version of Dreamweaver a little bit later in the tutorial. But notice that I can get access to this CSS Rule definition dialog either by opening up the external style document or I can just open up a page that has a style sheet attached or has embedded styles and those will also appear here in the CSS Window. Notice that I can just double click on the style rule and I get all the properties for that rule in a very convenient dialog here. This is probably going to be the dominate dialog that I'll be covering in this course in Dreamweaver. I think probably the easiest way especially when learning how to use Cascading Style Sheets in your Dreamweaver documents is to rely on the CSS window here. Remember that there are two tabs here for all and the current style. Perhaps the current style is the most useful if you're working on specific styles, if you want to work on editing all the styles for your project then you want to use the All Tab. I should also point out that when you do modify one of the Rule Definitions here in the dialog, notice that there is an Apply Button right here and I like to use this one because I can Apply that change, move this out of the way and then notice the changes here in the page without closing the dialog. Often times you'll want to experiment with different style settings here without closing the dialog because you want to continue working in different categories or different properties over here. So this Apply Button is quite useful, I'll be using it a lot during the course of this tutorial as well to demonstrate changing these styles without having to close the dialog and I can move it out of the way and then see those styles then updated immediately in any open files. Naturally if there are documents that reply on this style that are not open the next time you do open them and view them in either Dreamweaver or the browser the changes that you apply here in the dialog will be applied even if you use the Apply Button and don't close the actual dialog. So that will conclude this section of the tutorial on Selector Basics. In this section you've learned about the various Selectors that are available in the HTML specification for CSS as well as how these are implemented in Dreamweaver. You learned about the Class Selector and how that can apply to any tag. Also the Base Selector also referred to in Dreamweaver here as the Tag Selector. The ID Selector which is referred to as Advanced here in the Dreamweaver CSS Rule or more accurately the new CSS Rule here in Dreamweaver. You learned a little bit about when to use IDs and when to use Classes. In this last movie covered how easy it is to edit your styles in Dreamweaver using the CSS Window.

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