What does the word specificity mean in CSS?

/* Specificity: 1 */
p { color: black; }
 
/* Specificity: 10 */
.text { color: blue; }
 
/* Specificity: 100 */
#title { color: red; }
 
/* Specificity: 1000 */
<p style="color: green;">Text</p>

/* Format: [inline, id, class, element] */
 
/* [0, 0, 0, 1] = 1 */
p { color: black; }
 
/* [0, 0, 1, 0] = 10 */
.text { color: blue; }
 
/* [0, 1, 0, 0] = 100 */
#title { color: red; }
 
/* [1, 0, 0, 0] = 1000 */
style="color: green;"

<!-- Highest priority -->
<p style="color: red;">Red text</p>

/* Specificity: 100 */
#header { background: blue; }
#nav { color: white; }

/* Specificity: 10 each */
.button { padding: 10px; }
[type="text"] { border: 1px solid; }
:hover { opacity: 0.8; }
:first-child { margin-top: 0; }

/* Specificity: 1 each */
div { display: block; }
p { margin: 16px; }
::before { content: ""; }
::after { display: block; }

/* [0, 0, 0, 1] = 1 */
h1 { color: black; }
 
/* [0, 0, 1, 1] = 11 */
h1.title { color: blue; }
 
/* [0, 1, 0, 1] = 101 */
#main h1 { color: red; }
 
/* [0, 1, 2, 1] = 121 */
#main .content h1.title { color: green; }
 
/* [0, 2, 1, 0] = 210 */
#header #nav .menu { color: purple; }

/* Style battle! */
 
/* Specificity: 1 */
p { color: black; }
 
/* Specificity: 10 - WINS first */
.text { color: blue; }
 
/* Specificity: 11 - WINS second */
p.text { color: red; }
 
/* Specificity: 100 - WINS third */
#content { color: green; }
 
/* Specificity: 101 - WINS fourth */
#content p { color: yellow; }

/* !important beats everything (except another !important) */
p { color: red !important; } /* Beats everything */
 
/* Even inline styles! */
<p style="color: blue;">Still red!</p>

/* Specificity: 0 */
* { margin: 0; }
 
/* Specificity: 0 + 10 = 10 */
*.class { padding: 0; }

/* Specificity: 1 + 1 = 2 (combinator > doesn't count) */
div > p { color: blue; }
 
/* Specificity: 10 + 1 = 11 */
.container p { color: red; }

/* Doesn't work - specificity: 10 */
.button { background: blue; }
 
/* Works - specificity: 100 */
#sidebar .button { background: blue; }
 
/* Or use !important */
.button { background: blue !important; }

/* ✅ Good: low specificity */
.card { padding: 20px; }
.card-title { font-size: 24px; }
.card-content { color: #666; }
 
/* ❌ Bad: high specificity */
#main .sidebar .card .card-header .card-title { font-size: 24px; }

/* Use online calculators */
/* https://specificity.keegan.st/ */
/* https://polypane.app/css-specificity-calculator/ */

/* In DevTools you can see which styles are overridden */
/* Crossed-out styles = low specificity */

/* Low and predictable specificity */
.block { }
.block__element { }
.block__element--modifier { }

/* ❌ Bad: too high specificity */
#header #nav .menu-item { }
 
/* ✅ Better: use classes */
.header .nav .menu-item { }

/* Base styles */
.button { padding: 10px; background: gray; }
 
/* Modifications */
.button--primary { background: blue; }
.button--large { padding: 15px; }

/* ❌ Bad: !important everywhere */
.text { color: red !important; }
.title { font-size: 24px !important; }
 
/* ✅ Better: proper specificity */
.content .text { color: red; }
.content .title { font-size: 24px; }

/* ❌ Bad: hard to override */
.page .content .sidebar .widget .title { }
 
/* ✅ Better: simple selectors */
.widget-title { }