CSS

===Specificity===
''Specificity'' refers to the relative weights of various rules.<ref name="Cascading">{{Cite book | edition = 3rd | publisher = O'Reilly Media, Inc. | isbn = 0-596-52733-0 | last = Meyer | first = Eric A. | title = Cascading Style Sheets: The Definitive Guide | url = https://shop.oreilly.com/product/9781565926226.do | year = 2006 | access-date = 2014-02-16 | archive-url = https://web.archive.org/web/20140215041138/https://shop.oreilly.com/product/9781565926226.do | archive-date = 2014-02-15 | url-status = live }}</ref> It determines which styles apply to an element when more than one rule could apply.  Based on the specification, a simple selector (e.g. H1) has a specificity of 1, class selectors have a specificity of 1,0, and ID selectors have a specificity of 1,0,0. Because the specificity values do not carry over as in the decimal system, commas are used to separate the "digits"<ref>{{cite web|url=https://www.w3.org/TR/CSS21/cascade.html#specificity|title=Assigning property values, Cascading, and Inheritance|access-date=2014-06-10|archive-url=https://web.archive.org/web/20140611010536/https://www.w3.org/TR/CSS21/cascade.html#specificity|archive-date=2014-06-11|url-status=live}}</ref> (a CSS rule having 11 elements and 11 classes would have a specificity of 11,11, not 121).

Thus the selectors of the following rule result in the indicated specificity:
{| class="wikitable"
|-
! Selectors !! Specificity
|-
| <syntaxhighlight lang="css" inline>h1 {color: white;}</syntaxhighlight> || 0, 0, 0, 1
|-
| <syntaxhighlight lang="css" inline>p em {color: green;}</syntaxhighlight> || 0, 0, 0, 2
|-
| <syntaxhighlight lang="css" inline>.grape {color: red;}</syntaxhighlight> || 0, 0, 1, 0
|-
| <syntaxhighlight lang="css" inline>p.bright {color: blue;}</syntaxhighlight> || 0, 0, 1, 1
|-
| <syntaxhighlight lang="css" inline>p.bright em.dark {color: yellow;}</syntaxhighlight> || 0, 0, 2, 2
|-
| <syntaxhighlight lang="css" inline>#id218 {color: brown;}</syntaxhighlight> || 0, 1, 0, 0
|-
| <syntaxhighlight lang="css" inline>style=" "</syntaxhighlight> || 1, 0, 0, 0
|}

====Examples====

Consider this HTML fragment:
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #xyz { color: blue; }
        </style>
    </head>
    <body>
        <p id="xyz" style="color: green;">To demonstrate specificity</p>
    </body>
</html>
</syntaxhighlight>
In the above example, the declaration in the <code>style</code> attribute overrides the one in the <code><style></code> element because it has a higher specificity, and thus, the paragraph appears green:

<div class="html-box" style="min-width: 160pt; height: 80pt; background-color: white; border: 2pt solid #303030; padding: 5px; user-select: none;>
     <p id="xyz" style="color: green;">To demonstrate specificity</p>

</div>