***UPDATE: Previous version didn’t work in IE. Ooops. This one does.

I’m working on an accessability panel for this webpage. One aspect of this panel will be to remove CSS styling. I thought someone out there in Googleland will be searching for such a thing for their site so I thought I would publish what I have. It is a pretty simple script, but some people not familiar with scripting might want this too. It only works on CSS, not depreciated HTML, and the rest of the instructions and usage warnings are in the script comments.

Here is a test page to see it in action: CSS Remove Test.

The code is below, but if you rather download it, here you go: cssRemove.js


/*******************************
REMOVE CSS SCRIPT
Filename: cssRemove.js
Author: Bjorn Tipling
Email:
Website: https://sharewonders.com
License: MIT License http://www.opensource.org/licenses/mit-license.php

Instructions:
Add:

inbetween your tags.
Add:

Remove the stylesheet

somewhere on your webpage. Click link to remove CSS. Customize as you wish with a class attribute.

IMPORTANT: This only works on CSS. Depreciated HTML tags and attributes such as or border=”1″ will not be removed.
********************************/

function removeStyle(){
var style;
var linkP = document.getElementById(’cssRemoveLink’);
for(i=0;i
void(document.styleSheets.item(i).disabled=true);
}
style = document.getElementsByTagName('*');
for ( i=0; i
void(style[i].style.cssText = '');
}
linkP.innerHTML = "CSS removed.";
return false;
}


Ever tried to use the css property float only to find out that the background of the containing element and the height of the floated element do not match? This is probably a recurring problem for many people. What these many people might not know is that there are a couple of solutions for this issue, neither of which is very elegant.

Someone on #css freenode pointed out this website, which explains the solutions in detail: how to clear a float.

The problem occurs when you attempt something along the lines like this:
[html]

[/html]
The code above will turn out to look like this:

As you can see the background of the containing div does not have the required height to wrap around the floated paragraph element.

The easy and ugly solution is to include another element at the very end of the containing div:
[html]

[/html]
This will force the background to stretch to meet this last element. The website with the how to clear a float instructions I pointed to at the beginning has a better solution using the :after Pseudo-element. It is explained better there than I can manage, so take a look and hopefully all your floating problems will be solved.

Become a CSS master with only 8 links:

CSS2 Reference at W3Schools (adequate)
W3C Full Property Table Working Draft (superior)
Web Browser CSS Support (helpful)
W3C CSS Selectors Working Draft (powerful)
Assigning property values, Cascading, and Inheritance (advanced)
Step by Step CSS Float Tutorial (no more tables)
CSS Positioning in Ten Steps (well written)
CSS2 Box Demonstration (Eye opening)

Source: A couple of these I got from #CSS on Freenode, some others I’ve been using for a while and were on my .

The other day I got some really great advice from a bot on Freenode
#CSS:

s|k | `zip
RTFS | zip: Start every stylesheet with this: * { margin: 0; padding: 0; }. You’ll save yourself the confusion over quite a few strange element and browser spacing differences later on.

It’s true. For example, Firefox will do some silly stuff by adding margins to headers, such as ‹h1›, by default. IE has some of its own quirks. There’s quite a few of these things that will cause headaches that can be alleviated all together by just beginning every style sheet with:


* { margin: 0; padding: 0; }