Some tips about using your own CSS Style Sheets in Blogger

So I have been trying to fix the Pie Chart Generator, I had a problem in displaying the CSS results.

HOW it WAS

The old generator was working this way:

• Fetching Colors and Percentages then place them in arrays.
• Inserting CSS rules directly inside a style sheet:

document.styleSheets[6].insertRule("#pieSlice12{}",2);

• Editing these CSS rules using:

               document.styleSheets[6].cssRules[(parseInt(document.styleSheets[6].cssRules.length)-1)].style.transform="rotate(180deg)";

• Then I display all these rules by going through a loop.

PROBLEM

The problem I faced is that Blogger uses a different number of style sheets in each browser, and working this way, I was mixing my own CSS styles with Blogger's own CSS styles, so it was difficult to know the position of my generated rules.

FIX

The best workaround I found was to create my own style sheet.

<style id="mySheet">

</style>

Then I could manipulate CSS styles using:

document.getElementById("mySheet").sheet.cssRules[1]; 

I no longer need to know the index of the style sheet, I can call it directly using the ID, and I just had to add the sheet property.