p {width: 100 px; height: 50 px; padding: 20 px; border: 1 px solid;}. The content ends up 142px wide, instead of the 100px you specified, and it breaks out of your element. Why is that? The box model is a core foundation of CSS.

In this CSS rule, the selector is .my-css-rule which finds all elements with a class of my-css-rule on the page. There are three declarations within the curly brackets. A declaration is a property and value pair which applies styles to the elements matched by the selectors. A CSS rule can have as many declarations and selectors as you like.

Importance. Not all CSS rules are calculated the same as each other, or given the same specificity as each other. The order of importance, from least important, to most important is as follows:. normal rule type, such as font-size, background or color; animation rule type!important rule type (following the same order as origin); transition rule type ...

Now, the button will have a blue background, because the new selector gets a specificity score of 20 points (0-2-0).. Caution: If you find that you are needing to boost specificity like this frequently, it may indicate that you are writing overly specific selectors. Consider whether you can refactor your CSS to reduce the specificity of other selectors to avoid this problem.