One of the most important things you can do to save yourself much headache is to become familiar with the DotNetNuke CSS Application Hierarchy. The robustness of DotNetNuke architecture allows you to manage many portals with one code base, but that also inherently adds to the complexity of things.

There is a lot of great information on the web about DotNetNuke skinning and you can find information on the DNN architecture from the DotNetNuke.com website to learn more. In the meantime, here is a general overview of the system:

There are several default styles and .CSS files located throughout the file system that are going to be applied prior to your skin being applied and even after. Understanding the default styles applied by DotNetNuke will help you ensure you get the exact CSS styling you're looking for.

Keep in mind that CSS Styles are applied to the page as the final rendered output by the last read style. Meaning, if you have two styles with the same name, whichever is read last (towards the bottom) will be the one that is actually applied to the rendered output on the page.  

Here is the order in which the DotNetNuke portal applies CSS Files:

1. wwwroot/Portals/PortalID/Portals.css
2. wwwroot/Portals/PortalID/SelectedContainer/SelectedContainerASCXFilename.css
3. wwwroot/Portals/PortalID/SelectedContainer/Container.css
4. wwwroot/Portals/PortalID/SelectedSkin/SelectedASCXFilename.css
5. wwwroot/Portals/PortalID/SelectedSkin/Skin.css
6. wwwroot/Portals/_default/default.css
7. wwwroot/DesktopModules/Module/Module.css

So, if you have the same style defined in two of these files, the file applied nearest to the bottom of the list wins. It's also very important to understand that DNN has default styles used widely throughout the portals. Even if you didn't supply a CSS file for your skin, the basic styles WILL be applied. This is critical to understand because if you don't want those to show up in your custom skin style, then you need to override those styles.

Consider the scenario for the Global veCSSViewer on this site...I have a basic overall look and I allow variations for differing screen widths and font sizes. To achieve this, I create one stylesheet names "Skin.Css". This stylesheet defines an 80% width, for example and a default 11px font. Then, I create a "Wide.Css" stylesheet and override the style that defines the width with 100%. Next, I create a "Thin.Css" and override that style with 70% width. Then, I follow the same procedure for the font sizes.

Please note that those variation CSS files ONLY contain the styles that I am overriding.

Take a look at the physical file structure: