Flow Of CSS And How Its Work
Posted By : Pankaj Kumar | 29-May-2018
CSS specifies an urgency scheme to determine which style rules apply if more than one rule contests against a certain element. In this so-called cascade, significances or weights are calculated and allocated to rules, so that the results are liable. From my casual office survey, the general consent is that the most essential thing in CSS is that everything ‘cascades’ properly. That is, that rules and styles defined extra down in a CSS article override styles specified further up in the text (without the ! important operator of course, which you would not be using anyhow). It makes intelligence if you think about it, after all, it ’s not named a Cascading Style Sheet for anything. Now, the test. What would be the result of given situation?
HTML
Hey World.
This is another line of text
CSS
#my-id {
color: red;
}
.my-class {
color: blue;
}
h1 {
color: green;
}
The Answer:
Hey, World is red, the second line of text is blue. Don’t trust me? Try it on your own then you will believe me...
After some google research and analysis blogs, I understand now how styles are calculated and applied but seems to go entirely against the ‘cascading’ flora of style sheets since the cascading flora of style sheets only applies when the ‘specificity’ standards are identical. For example, the following snippet behaves as you would expect:
CSS
p {
color: gray;
font-size: 20px;
}
/* ... later ... */
p {
color: green;
}
As you might suppose the paragraph will be green and have a font size of 20px. The rule that is more detailed selectors takes priority over rules that are less specific heedlessly of where that rule is declared in the markup. You can psychologically calculate how specific a rule by the ‘level’ and number of the selectors used. From low to high, you have Element and pseudo elements such as p, a span, div, first-line Class, attributes, pseudo-classes .my-class Id attributes #myelement #theonething From inline style attributes !important If there’s whatever of a higher level, the higher level dominates the lesser level style, and if
Its somewhat that is tactlessly very delicate sense of the way we write CSS, you're skilled from the begin to start with the most basic general styles and work your way finished the more exact styles. While this is correct, it’s very easy to go for a long time minus running into a condition where more detailed styles.
I had no impression up until around a week ago that CSS drove like this. I always assumed that specificity was only used to select the subgroup of elements the rule applied to, and that if you applied a more universal rule after a more specific rule that the more universal rule would overwrite anything earlier. This is clearly not the situation.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Pankaj Kumar
Pankaj is a UI Developer, having good knowledge of HTML, CSS, Bootstrap. He is also good in Angular 5. In free time he loves to sing.