Question 

<html>
  <head>
    <style type="text/css">
    #sidebar p {
        font-family: Verdana;
        font-size: .9em; }

        #sidebar .intro {
            font-family: Georgia;
            font-size: 1.25em;
            color:red;
            }

    </style>

  </head>
  <body>
    <div id=”sidebar”>
       <p class=”intro”>
           As you can see, the more CSS styles you create, the greater the potential for formatting
          snafus. For example, you may create a class style specifying a particular
         font and font size, but when you apply the style to a paragraph, nothing happens!
          This kind of problem is usually related to the cascade. Even though you may think
         that directly applying a class to a tag should apply the class’s formatting properties,
          it may not if there’s a style with greater specificity.

        You have a couple of options for dealing with this kind of problem. First, you can
        use !important (as described in the box above) to make sure a property always
        applies. The !important approach is a bit heavy handed, though, since it’s hard to
        predict that you’ll never, ever, want to overrule an !important property someday.
        Read on for two other cascade-tweaking solutions.
    </p>    
</div>

  </body>
</html>

the #sidebar p style has a specificity of 101 (100 for the ID, and 1 for the tag selector), while the .intro style has a specificity of 10 (10 points for a class selector). Since 101 is greater than 10, #sidebar p takes precedence. Changing .intro to #sidebar .intro changes its specificity to 110.

Even though I have change this my result is not coming

Can anyone explain me.

output: should be in red color, font-size-1.25em and font-family -Georgia

Was it helpful?

Solution

The quotes around the ID sidebar and classname intro are invalid. ”sidebar” should be "sidebar".

The browser interprets the ID as ”sidebar” and not sidebar, therefore, none of your rules even match.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top