How does the browser find and render CSS rules

Question

Let's say we have a page with the some simple HTML/CSS like below. Does the browser also read .b and .c in the stylesheet?

HTML

<div class="a">1</div>
<div>2</div>
<div>3</div>

CSS

.a { color: aqua; }
.b { color: blue; }
.c { color: cyan; }

That is just an example, but in the real world there might be hundreds, thousands lines of CSS code isn't being used, such as using Bootstrap for a very very small project.

Yes, all the rules are read and loaded into memory. Hence why people try to minify their rules and eliminate the redundancies. — j08691, Feb 19 '15 at 20:44
This is not exactly a duplicate, but you migth be interested on [this question](http://stackoverflow.com/questions/460389/browser-caching-of-css-files) about CSS cache — Yerko Palma, Feb 19 '15 at 20:50

score 4 · Accepted Answer · edited Jul 21 '15 at 12:44

4

Yes all the rules are loaded in the memory, this is why when you add new element to your DOM (e.g. by using javascript) you see that the style automatically applies to them.

edited Jul 21 '15 at 12:44

Stickers

75,527
23
147
186

answered Feb 19 '15 at 20:51

Almis

3,684
2
28
58

How does the browser find and render CSS rules

1 Answers1