Hi,

I'm writing my custom module. How do I set it up, so that it doesn't inherit CSS styles form the DNN skin?

Hi Mark,

The best way to make sure that your module.css styles don't inherit from the dnn skin or other css included on the page is to provide the proper amount of specificity on your markup and specifying all of the css attributes on your styles that you don't want to be overridden. Just do a google search on 'css specificity' and you'll see what I'm talking about.

For instance you could create a div in your module surrounding your module content with your module's name as the class such as <div class="mymodule"> more content here </div> and then in your css make sure you use mymodule as part of the selectors such as .mymodule span { font-size: 12px; color: #ff0000 } etc. You could also use an id instead of a classname but I'd guard against that because your module could be added to the page more than once.

Because the selector .mymodule span is more specific then just span, the css won't cascade from the other css and the more specific you can make it the better. There are specificity rules that the browsers use to determine how specific they are. A good quick reference can be found here.

Cheers

---

Richard Edwards
www.dnnstuff.com
Quality DotNetNuke Modules, Unrivaled Support (since 2004)
All 6 modules for as low as $49

I would strongly oppose the use of !important in your css if you can avoid it. Have a read of this article, http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

---

Richard Edwards
www.dnnstuff.com
Quality DotNetNuke Modules, Unrivaled Support (since 2004)
All 6 modules for as low as $49