CSS

The layer structure of the default responsive css files is (from bottom to top): global → default → narrow → normal → wide

How the CSS Files Activate

Knowing this, let's look at those five CSS files again.

global.css: This CSS file always activates. In one sense, it's the "mobile" stylesheet, since it's the only CSS that will activate for a mobile site.

But global.css is also, well, global, since it activates for every width. For instance, if you set a heading font here, the headings will be that font no matter what the size.

Pretty CSS

CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page. This is what it looks like:

.email-address:before {
content: "Email address: ";
}

With this CSS in place, we could have this HTML: