Revindex Storefront

Understanding CSS Precedence

If you're styling the Web page or controls using CSS, it's important to understand DotNetNuke CSS precedence. There are many CSS files loaded on a page and the order they get loaded affects the final appearance on the page. Below shows the order and sequence that CSS files get loaded onto your page.

/DesktopModule/<ModuleName>/Module.css
The module CSS gets loaded onto the page first if you have modules on the page.

/Portals/_default/Default.css
This is the default CSS that comes included with DotNetNuke.

/Portals/<PortalID or _default>/Skins/<SkinName>/Skin.css
Your site's skin also includes a CSS file.

/Portals/<PortalID or _default>/Skins/<SkinName>/<SkinName>.css
Your site's skin may also includes a CSS file.

/Portals/<PortalID or _default>/Containers/<ContainerName>/Container.css
Your site's container includes a CSS file.

/Portals/<PortalID or _default>/Containers/<ContainerName>/<ContainerName>.css
Your site's container includes a CSS file.

/Portals/<PortalID>/Portal.css
Your portal's CSS file gets downloaded last, which also means it overrides all other CSS files for the same rule.

Inline styles
Lastly, any CSS inline styles will always override any CSS rules in the files.

Knowing how the precedence works, if you need to override a CSS rule, the easiest way is to copy or write the new rules in the Portal.css file if you don't have access to the skin packages.