I’m a programmer by trade. I use CSS just about every day, but I’d be lying if I said I understood how it works under the hood. What exactly does CSS do behind the scenes when I pass the parameters? How does browser support play a role in all of it?
In: Technology
Instead of designing a website by saying “here’s the background, it’s green” and “here’s a headline, it’s 20pt Helvetica Bold, centered to the page” and “here’s the body text, 12pt Helvetica” you just design a web page to have parts labeled background and headline and text, and the stylesheet is where you put the attributes, so everything called “headline” looks the same and all the backgrounds look the same etc.
This way, if you want to change how a site looks, you can adjust the style sheet instead of fixing every page individually, which is tough, because with something like PHP, the pages don’t even really exist until you load them, because they are generated on the fly out of existing chunks of code.
It’s really not magic. The browser is written to categorize visual elements in different buckets like type, class, and id. The CSS text gives visual properties to types, classes, or ids. When the browser wants to display something, it looks in the thing’s metadata to find its type, class, and id. Then it finds the CSS rules for those.
Type is more general, class is middling, id is most specific. When the browser applies styles, it applies the most general first, then overwrites with any styles specified in the next less general, and so forth until finally overwriting with any specified in the most specific. CSS is “Cascading Style Sheet”. This is the “cascading” part, where the more specific overrides the more general.
And then it shows the object based on that cobbled together, cascade-overridden set of styles.
I guess it’s all magic. But it’s just average run of the mill magic.
Not sure exactly what you mean by how it works?
All web technologies essentially rely on the web browser for them to work. The web browser is like a VM running all your code. So the web browser needs to have a CSS parser that understands all the commands and can render them correctly according to the CSS spec.
The spec is constantly evolving (a “living spec”) and includes many drafts and proposals, plus individual web browser vendors like to innovate ahead of the spec, resulting in varied support for certain features among browsers, as well as vendor-specific features.
CSS is like the interior decorator for your website: it tells the browser what color, size, and style each element should have. Different browsers interpret this design blueprint slightly differently.
Latest Answers