Omega 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.

Of course, the other CSS files can override global.css. But global.css comes first.

example-alpha-default.css: Once you get wider than a mobile screen, example-alpha-default.css always activates. This means that the narrow, normal, and wide sizes all first activate global.css, and then example-alpha-default.css.

But each of these wider sizes then also activates its own CSS file.

example-alpha-default-narrow.css activates for narrow sites (like tablets).

example-alpha-default-normal.css activates for normal sites (desktop monitors that aren't widescreens).

But here's the key. The normal size does not activate the narrow CSS file, example-alpha-default-narrow.css.

The normal size activates global.css and example-alpha-default.css. But then it skips the narrow CSS, and activates its own special stylesheet, example-alpha-default-normal.css.

example-alpha-default-wide.css: Finally, wide screens activate global.css and example-alpha-default.css, then example-alpha-default-wide.css.