How are two element selectors in a css file for the same element handled?

Part A:

Given this example, what would I expect the result to be for each of the major browsers? Assume the following css is contained in one file.

p {
      border:1px solid black
  }

.... further down the same css .....

p { /* repeated element selector */
    font-size:20px
  }

Part B:

Will any of the results change if this is <style> vs an external stylesheet

I've found over the years it is common for a developer to create a style sheet that is so开发者_运维技巧 long with so many selectors, that selectors are often repeated over and over with varying styles

part A: p will have both border and font-size set. If you apply rules in that way it's like doing this way:

p{
    border:1px solid black;
    font-size:20px;
}

the problem regards css snippets like these:

p{
    border:1px solid black;
}
...
p{
    border:10px solid black;
}

here, border will be overridden! If you'd like to maintain the "original" 1px border you should use "!important" CSS2 rule applied to the first border rule (i.e. border:1px solid black !important;

part B: absolutely no!

The result will be:

p {
 border:1px solid black;
 font-size:20px;
}

If you define the same css property for the same selector later, then it gonna be overridden, for example:

p {
      border:1px solid black
      font-size: 12px;
  }

.... further down the same css .....

p { /* repeated element selector */
    font-size:20px
  }

Will be:

p {
 border:1px solid black;
 font-size:20px;
}

Edit: B: There is no difference.

It's quite common to specify the same element more than once in your stylesheets. It's very common to do it if you've got separate stylesheets to deal with different aspects of your design, or if you've got a CMS where you have default styles in one stylesheet and themed styles in another.

And it's also quite common for sites to merge all their stylesheets into a single file for download to save server load.

Given both the above, it is therefore quite common for a single stylesheet to have multiple references to the same tag, class or even ID.

The good news is that it really doesn't matter. If you specify the same thing more than once, CSS will treat it as if they were merged. If you have exactly the same style in both declarations, the latter one will override the former one. This is what allows the styles for a theme to override the default styles of the CMS.

The only exception to this is if you use the !important marker. This will force the one labelled important to override anything else.

For part B of your question: No, they will be the same. There is no difference between styles loaded via an external CSS file and those loaded inline in the main HTML page.

It is generally preferable most of the time to load them via external CSS files though, because they can then be cached by the browser separately to the HTML page, meaning less work for your server when the user visits several pages in your site.