Selector Basics / About Selectors
Subtitles of the Movie
There are many ways to apply styles across a document however often you'll want to use a style on some tags in a document but not on all instances of the tag or you may want to create a style that you can apply across several tags in a document without repeating the style rule. To do this you'll need to use selectors, I've introduced you to the concept of selectors and we've seen them in DreamWeaver's new CSS Rule Dialog Box here. As you can see in the dialog CSS contains three types of selectors, classes, base selectors which Dreamweaver labels tags and IDs which Dreamweaver labels Advanced, IDs and Pseudo Class Selectors. Now many designers confuse IDs with Classes and often use only one to the exclusion of the other an fail to utilize the strengths of each. For example, when I first learned HTML and Dreamweaver I used mostly Classes and I still start my students off with Classes because I think their easier to use. But later I encourage them to start using tags when appropriate. So before we go any further let me review these various selectors with examples and more descriptions starting with the Base Selector, the Tag Selector here in DreamWeaver's new CSS Rule Dialog. The Base Selector takes an existing HTML tag and redefines some or all of its default properties to style the whole element. For example I have a P Tag that I've redefined so that all the text color will be Red right here. Notice that in my CSS Rule Definitions Dialog for the P Tag, it says Red there, likewise I could change the size here to 18. So notice that down here in this document I have a variety of paragraphs, let me go ahead and hit the Enter Key and add yet another paragraph and notice that all the paragraphs in this page, no matter where they are, because their using the P Tag will be styled according to my definition here. Notice for example if I change this to a dark green and make the size 36 bold, notice that all the paragraphs change according to the style definition. So that's an example of a Base Selector or a Tag Selector. More often then not however you'll probably want to use your own Custom Selectors, you'll want to define your own Custom Selectors, these are known as IDs or Class Selectors, these both are applied to HTML elements and simple attributes that provide much greater control. So without further ado let me now move on to the next movie and review in more detail the Dreamweaver Class Selector.
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
- 98,729 Video Tutorials (23,265 free)
- Video Available as Flash or QuickTime
- Over 1026 Courses
- $30 for One Month Access
- Multi-User Discounts Available
United States 