Revindex Storefront

Understanding CSS Precedence

Last updated on 2019-02-20 2 mins. to read

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.

  1. /DesktopModule/<ModuleName>/Module.css
    The module CSS gets loaded onto the page first if you have modules on the page.
  2. /Portals/_default/Default.css
    This is the default CSS that comes included with DotNetNuke.
  3. /Portals/<PortalID or _default>/Skins/<SkinName>/Skin.css
    Your site's skin also includes a CSS file.
  4. /Portals/<PortalID or _default>/Skins/<SkinName>/<SkinName>.css
    Your site's skin may also includes a CSS file.
  5. /Portals/<PortalID or _default>/Containers/<ContainerName>/Container.css
    Your site's container includes a CSS file.
  6. /Portals/<PortalID or _default>/Containers/<ContainerName>/<ContainerName>.css
    Your site's container includes a CSS file.
  7. /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.
  8. 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.


Powered by Revindex Wiki