How can I stop my CMS’s CSS affecting my content?


Tags: html,css,content-management-system

Problem :

I am using a CMS that has been poorly configured with horrific CSS (e.g. H1 is about 12px). How can I load my content without it being infected by this diseased CSS?

I was considering an iframe, but I would want to keep it in the CMS if possible. Would frames work?



Solution :

If you can keep your content within an element with a specific class or id (e.g. <div class="content">, then you could adapt a reset stylesheet (like Eric Meyer’s) to reset everything within that class:

.content div, .content span, /* ...and so on */
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Then write all your styles prefixed with that class too, e.g.

.content h1 {
    font-size: 3em;
}

If you’d rather reset everything to the default browser styles (rather than the unstyled settings you get with a reset stylesheet), you could adapt Firefox’s built-in html.css stylesheet in a similar way (i.e. prefix all its selectors with the class/id on the element containing all your content).

Bit of a drag, but it might be less of a faff than frames. (I assume the CMS generates your HTML, so it’d be harder to change that to use frames than to work around their issues in your CSS file.)

You might consider changing your CMS — they’re meant to reduce the amount of work you have to do, not increase it.


    CSS Howto..

    How to add colour classes to this css

    jQuery hide / show class not changing css for future added elements

    Bootstrap - How to make text wrap around an image on small devices?

    How to fill larger image into smaller div?

    How to get background img to show up in :after selector?

    How to give style to iframed page content using parent pages css?

    How can I use a different CSS using jQuery?

    html css - how to create multiple column list?

    How can I hide the extra list items that don't fit within a fixed-height box?

    how to set a table background image

    How to scope efficiently javascript et css on a rails appliacation?

    How do I style DIVs inside a checkbox label based on if it is checked or not?

    How can I align my form to the center of the background? CSS

    How to order list which produce result that starts from 1.1, 1.2, 1.3 (instead of just 1, 2, 3) with css and html

    How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

    How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability

    How to float 3 divs with margin left & right 0px?

    How to get GWT console/development mode to generate css errors?

    how to call browser based css?

    how to change CSS priority (don't use !important)

    How do I align div vertically like in picture

    How can I get Chrome to resize this div when the padding changes?

    How do I handle the hover in this recursive menu using jQuery?

    How to make Visual Studio stop “compiling” .js and .css files

    CSS: How can I set image size relative to parent height?

    Three column responsive equal height, with border. How to make it in CSS?

    how to calculate css rules priority in Javascript?

    How to set different body background color for different pages in one css files?

    How to remove background from breadCrumb