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.
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:
content: "Email address: ";
With this CSS in place, we could have this HTML: