[BLANK_AUDIO]

>> All right. So the DOM captures the content

of the page. But we also need to know

how to display the actual page itself. And to

do that, we need to build a CSS Object Model.

>> Mm. And judging by its name, I guess it's similar to the DOM?

>> It's very close. Let's take a look. Ok. Let's say we've received the

following CSS. The first thing the browser

has to do is identify the correct tokens.

>> But there's no angle brackets here,

right?

>> Yeah. CSS has its own set of rules

for how to identify valid tokens. The details are not

that important. If you're curious, you can check out

the CSS specification link in the instructor notes. The important

part is that the parser would convert the tokens

to nodes, and in this case, the first would be

the body, with its font size property. Next, we would

get the paragraph node, and this is the important part.

It is a child of body because all of visible content is part of body.

>> Wait- Is that some CSS specification rule?

>> Yeah. Exactly.

>> Also note that the children of the

body node, inherit it's parent's styling rules of

sixteen pixel font size. This is what we

mean by cascading rules and cascading style sheets.

>> Interesting. So it's similar to, but not

quite the same as, the DOM construction because

CSS rules cascade down. Hm curious. Let's see I got

a style sheet with a lot of rules. Could we also

apply the same incremental processing trick, like we do with HTML,

to make the page display faster? That's a great question. Unfortunately,

we can't. We can't use a partial CSS tree. Let

me show you why. Let's say we just received the first

view bites of our CSS and it contains the two rules

we have here. So, we go ahead and build the CSS

object model. It's tempting to use this tree

to render a page, but there's a problem. Let's

say we now get the next chunk of CSS and it contains more rules. In this case,

we have the paragraph font weight normal. CSS allows us to redefine

and refine the style properties. This is perfectly valid. But notice

that this rule would allow us to change our CSS on tree.

And make the text in paragraph node display with normal weight.

>> So that's a gotcha. So, you're saying we can't really use a partial C-S-S on

tree. Because then it could lead us to

use the wrong styles when we render the page.

>> Exactly, the browser blocks page rendering, until it receives

and processes all of the CSS. CSS is render blocking.