One of the benefits of working within the DNN content management platform is the wide range of solutions that are available to you for any given issue. It's this flexibility that allows administrators at any level to handle site management, content editing, and even styling with ease. Styling will be the focus of this tutorial: specifically, the options you have for adding custom styles to your DNN site.

(This tutorial assumes you have at least a basic understanding of CSS, HTML, and DNN module management. If you're not comfortable with the concepts of CSS specificity and/or stylesheet priority, how to use style tags in HTML, or what a DNN module is, you may want to get a quick refresher before continuing.) Training is also available.

The easiest way to get a consistent look and feel for your site is to use a DNN theme. But what happens when you add new sections or content and need to make updates to your theme, or you'd like to customize styles in a way that your theme doesn't allow? Editing the theme files directly can be messy or difficult — not to mention, a headache to maintain — and that's if you even have access to the files at all. For those fixes and tweaks to your site's styles, the best option may be adding styles to the portal CSS stylesheet in the DNN site settings.

Using DNN Portal CSS

The bane of many a web developer has been attempting to override styles from a stylesheet with higher priority; this often leads to lengthy selectors that can be fragile and difficult to maintain in the long term. The benefit of the portal CSS is that it takes priority over every other stylesheet on the site; portal styles will override styles from the default DNN stylesheet and the theme (assuming the same level of specificity), making it easier to ensure that your styles will display correctly. Be careful, though! The styles in your portal CSS will apply to every page on the site, so your rules will need to be as specific as possible so that you don't get unintended styles.

In order to access your portal CSS stylesheet, you'll need to dig into the site settings a little bit. If you're using DNN version 9, you'll want to open the "Settings" menu (under the gear or sprocket icon) in the Persona Bar; the "Custom CSS" option will take you to the portal CSS editor. To access the editor in previous editions of DNN, open the "Site Settings" page under "Admin" in the Control Panel and find the "Stylesheet Editor" tab.

Accessing portal CSS in DNN 9:

Accessing portal CSS in DNN 8 and below:

Using DNN Module Headers

We've reviewed how we can supplement or selectively override the theme styles across the entire site with portal CSS, but that won't be the perfect solution everytime. The portal stylesheet is the icepick in your toolbox; it's very powerful and great for making big changes, but it can be a little overkill. Sometimes you just need a toothbrush to add a little polish, and in that case, it might make more sense to simply add your styles to a module header.

Every module in DNN has a header and footer that can be used to attach extra code to that module. The header and footer will accept any valid HTML and insert it directly before or after the module's markup respectively, which can be particularly useful for including `script` and `style` tags. Including styles through the module header means that those styles will only appear on the page where that module appears, so it can be handy for small style overrides or additions for a single module.

Accessing the module header and footer is possible through the Module Settings. In Edit Mode, each module will have a set of icons associated with it, and under the gear or sprocket icon you'll find the Settings option. Additionally, you can edit the Module settings in the Modules tab under Page Settings. These can be found under the Content section in the Persona Bar if you're using DNN 9, or under Page Management in the Admin Settings located in the Control Panel if you're using earlier versions. Once you've got the Module settings open, expand the collapsible Advanced Settings section to edit the header and footer.

Accessing module header and footer for styling:

Using Inline HTML Styles

At this point we've covered the best methods for including additional CSS on your DNN site but, believe it or not, we're not done! If you're using an HTML module or a module with a rich text editor, you've got complete control over your markup, which means you can always roll your sleeves up and do things the old fashioned way. Inline styles in your HTML aren't always a great idea — they can be a real pain to maintain and they're completely missing some of the nicer features we get with modern CSS, like pseudo-classes and pseudo-elements — but they can be a lifesaver when you're in a bind. In terms of your toolbox, consider these the fire extinguisher behind glass — they're there in case of an emergency, but they can make a real mess of things.

The real benefit of inline styles is that they have priority over almost any other style, especially when paired with the `!important` rule. This comes at a pretty steep trade-off because you can't declare a general rule using a particular selector like you can in CSS; styles need to applied to each and every element you'd like to affect. You can add inline styles using the "style" attribute in the opening tag of any HTML element and including CSS rules.

Recap

These are the basics for adding custom styles to your DNN site; knowing what you now know, you should be able to tackle any styling issue that you may face. In my next tutorial, we'll take a closer look at DNN themes and how DNN offers even more flexibility and control when it comes to managing your theme files. Happy coding, friends!