Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding Specificity

From: Dreamweaver CS3 Beyond the Basics

Video: Understanding Specificity

The third and final CSS concept we want to explore is specificity. Specificity, besides being really fun to say, is one of the least understood and most important concepts when discussing style rendering. Essentially, specificity states that when two rules conflict with each other, the more specific rule is going to win. Specificity is determined looking at the makeup of the selector. On the screen here we have a slide that has a few selectors on it and what you do is you calculate by looking at whether it has an inline value, whether it's an ID, whether it has or contains any class elements or any element selectors and then they are all added up and added to the specificity.

Understanding Specificity

The third and final CSS concept we want to explore is specificity. Specificity, besides being really fun to say, is one of the least understood and most important concepts when discussing style rendering. Essentially, specificity states that when two rules conflict with each other, the more specific rule is going to win. Specificity is determined looking at the makeup of the selector. On the screen here we have a slide that has a few selectors on it and what you do is you calculate by looking at whether it has an inline value, whether it's an ID, whether it has or contains any class elements or any element selectors and then they are all added up and added to the specificity.

So take a look at the rule

, one that's an inline style. So it has one inline, zero IDs, zero classes and zero elements. So it has a specificity of 1000. h1, h2 is a group selector, but there are only elements inside of it so it has a specificity of 2. Further down you get, now let's examine the #main h2. That's a descendant selector. That's styling any heading 2 that's found inside of an ID, an element with an ID of main. So it has one ID selector and one element selector and using our table we can see that that gives us a specificity of a 101. So understanding the weight that's given to the different parts of a selector allows you to calculate what the specificity of a rule is going to be and if you have two rules that are applying to the same element on the page you know which one is going to determine the final rendering. So back in our rendering. htm file we will explore specificity. Now I'm going to switch back to Design View from Split Screen View and let's talk a little bit about what it is that we want to accomplish. Looking at my sidebar, and I'll scroll up just a little bit, we've got two headings in our sidebar and they're both heading 2s. So they're both being driven right now, primarily by the rule #sidebar h2, the descendant selector, just targeting any heading 2s inside of our sidebar. We want our second sidebar to have a different visual appearance. So structurally, importance wise, they'll be exactly the same, but visually we want our second sidebar to look a little bit different. And normally people will try to accomplish that by creating a class style. So we're going to create a class style to try to help us with that and I'm going to go down and Create a New CSS Rule and I'm just going to select Class and I'll do the class .secondary. So always remember the period on the front of that.

Again, we'll do it in this document only. We'll just keep the styles local to this page. So I'll click OK and we'll do a little bit more in this one. For a Color we'll just choose kind of a nice green color. So choose whatever green you'd like. For Size, let's go ahead and do 0.9 ems and for Case, I'm going to go ahead and choose uppercase. That's actually the text transform property. So this dialog box is not always going to show you the exact name of the property.

So sometimes if you're looking for text transform you have to kind of hung around and find exactly what it's going to be. I'm also going to switch to my Background. Now I do have a background color already being applied to my heading 2s and I don't want that. So I'm actually going to go ahead and just say transparent, which will pass along a value of, I don't want a background color. I also could have said background None to achieve the same effect. We'll finally go to the Border category and I'm going to go ahead and turn off Same for All, for both Style Width and Color, and we'll do a Bottom style of solid.

We'll give it a 1-pixel width and I'm just going to use the same green color that I used for the rule itself. So that's really all we're going to do to this rule. Now I'm going to go ahead and click OK. Now we've defined it, if I look back in my CSS Styles panel and I go to my All styles, I can scroll up and I can see that now I've a class selector in my embedded styles called secondary. So let's go ahead and apply it. I'm going to click inside my secondary heading here and I'll go down to my Properties inspector and I'll choose secondary.

I didn't get what I expected. I got a Change; you can see it's all uppercase now, but I didn't get everything and this is a very common problem for people when they're writing their CSS they create a class rule and they apply it and not everything applies. So Dreamweaver is about to help us out to understand why this isn't applying. So I'm going to click back on Current and I'm actually going to use the cascading order to figure out why that's not applying. Now remember, and I'm just going to expand this down a little bit so I can see all my rules here. Now the rules are showing up any order that they're applying. So the body of rules applying first, then that's followed by the wrapper, the sidebar, the secondary class style and then finally sidebar h2. So we can see that the class style that we want to drive the primary rendering of this element is actually applying before sidebar h2 and is being overwritten by it.

If I hover over it, it actually tells me, this rule is defined in the file rendering with a specificity of 10. But if I hover over sidebar h2, it tells me now even though it's in an external style sheet, it has a specificity of 101. So the sidebar h2 rule is much higher in degrees of specificity, and that's why it's overwriting secondary. So what I need to do, I'm going to go back to my All styles and I'm going to show you a nice, little, new feature inside of Dreamweaver that I just love and I'm really happy that they added this.

I occasionally need to edit my styles and I'm kind of a hand cutter, so I usually go in Code View and change it that way, but what's really nice is now, right here inside this panel, I can double- click very slowly on my rules and rename them right here. So I can just say #sidebar h2.secondary. So I'm rewriting that selector so that I have a descendant selector that has a class-specific element to it. And when I hit Enter, look what happens. Our secondary sidebar now renders properly. If I go back to current, so that I can see what's happening here. I'm going to hover over this rule now. I can see that it has a specificity of 111. So it has a higher degree of specificity and it's going to take precedence over the sidebar h2 and when we click on sidebar h2, we can see that both color and font size are being overwritten, although padding is not.

So, if you don't specify a property it will continue to display the property from the previous rule. So most of the time when people are having trouble getting their styles to render properly, it's due to either specificity, inheritance or the cascade being deployed incorrectly. Understanding these concepts and then how Dreamweaver can assist you in finding the problem is crucial to writing and deploying efficient CSS. In our next movie, we'll take a detailed look at Dreamweaver's CSS management tools.

Show transcript

This video is part of

Image for Dreamweaver CS3 Beyond the Basics
Dreamweaver CS3 Beyond the Basics

102 video lessons · 38851 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS3 Beyond the Basics.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

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:

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:

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

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.