DotNetNuke CSS Precedence

DotNetNuke skinning isn’t easy exactly how CSS files from the framework get loaded at runtime. You need to spend time for fine tuning the details such as typography, padding, margin, and so on. There is secret of understanding DotNetNuke CSS precedence. rnThere are many CSS files being loaded on a page when a user lands on your site. Depending on how your site is configured (how many modules you have on a page, etc), there can be several CSS files the user must download and it can definitely affect performance. In HTML development it’s a good practice to separate content and design. The CSS styles that make up the actual design are defined in separate files called stylesheets.DotNetNuke loads several style sheets for a page. For every level of DotNetNuke there is a style sheets that could be loaded / used. Hierarchy of CSS in DotNetNuke: Module.cssrnDefault.cssrnSkin.cssrnNewSkin.cssrnContainer.cssrnNewContainer.cssrnPortal.cssrnFRAMEWORK STYLESHEET: This file that contains basic framework CSS, gets loaded for every portal (Site) in your installation of DotNetNuke.This is the only stylesheet that always gets loaded. File Location: /Portals/Default/Default.css PORTAL / SITE STYLESHEET: This file is specific to a portal.rnBy default it does not contain any CSS, but it can be edited by a site admin from within DNN to overrule CSS in the skins. (Mostly used for small tweaks). File Location: /Portals/”PortalFolder/Portal.css Points to Ponder: If you remove this file from the portal folder it does not get loaded through the file manager. This is the file you edit if you use the stylesheet editor on the Site Settings page. It is there to allow an admin to overwrite CSS defined in one of the other stylesheets.Currently there is no possibility to edit the other stylesheets from the admin interface. SKIN PACKAGE RELATED STYLESHEETS: These style sheets only get loaded if they exist in the skin package. (if you don’t add them to the skin package, there won’t be a link in the head of the page)rnSTYLESHEETS FOR ALL SKINS: Style sheet that contains CSS for all the skins in a package. If a Skin.css file exists in the package it will load for every skin in the package.rnLocation: /Portals/~Default/Skins/”NewSkin”/Skin.cssrnorrn/Portals/”PortalFolder”/Skins/”NewSkin”/Skin.cssrnSTYLESHEET FOR A SPECIFIC SKIN: Style sheet with the same name as a skin file (.ascx).It is used to overwrite styles from Skin.css for that specific skin variation. Location: /Portals/~Default/Skins/”NewSkin”/”SkinName”.cssrnorrn/Portals/”PortalFolder”/Skins/”NewSkin”/”SkinName”.cssrnSTYLESHEET FOR ALL CONTAINERS: Style sheet that contains CSS for all the Containers in a package. If a Container.css file exists in the package it will load for every container used from the package.rnLocation: /Portals/~Default/Containers/NewContainer/Container.cssrnorrn/Portals/”PortalFolder”/Containers/NewContainer/Container.css STYLESHEET FOR A SPECIFIC CONTAINER:rnStyle sheet with the same name as a container file (.ascx).It is used to overwrite styles from Container.css for that specific container variation.rnLocation: /Portals/~Default/Containers/ NewContainer /”ContainerName”.cssrnorrn/Portals/”PortalFolder”/Containers/ NewContainer /”ContainerName”.cssrnSTYLESHEETS FOR MODULES: Some modules come with a style sheet with some basic CSS to make sure the module renders ok.rnIf a module on the page has a Module.css file it will get loaded.rnObviously only the Style sheets of modules on the page are loaded. Location: /DestopModules/”ModuleName”/Module.css