Override any CSS Style Instantly!

While creating a new website for ASPE's IT Division for nationwide training, I ran into a problem with my formatting. In my CSS stylesheet, I began by outlining an over-arching style to command the entire site. I noted it thus:

* {
margin-left: 0px;
margin-top: 0px;
font-family: Georgia, "Times New Roman", Times, Serif;
border: 0px;
}


This CSS text would take every item in the entire website, and give it a 0 pixel border, remove any margins on the left and top, and prepare it for a serif font. This worked gloriously, allowing me to overcome many standard problems that body {} doesn't always get to.

However, I first ran into a problem with Ordered lists , and Unordered lists. Different Browsers have different margins for such lists, and setting the margin-left to 0px effectively hid the bullet or numbers of these lists. After laying in a few pages (there are close to 160 in the first phase of this project) I started to notice an issue. To show these items I had to manually set the margin on these items to show. I solved the issue by including:

ul, ol {
margin: 0em 1em 0em 0em;
padding-left: 30px;
}

This gave them a slight margin, and a strong padding to shove such items back into the page and set them apart.


The second problem came up when my horizontal rules also failed to show up. After investigating the problem, I noted that the

---

element would automatically disappear when given a border attribute.

The border element was given in the * portion of the CSS, and was subject to a border on every page, in every instance. The only solution was to completely override the master stylesheet.

I whipped out my old teaching materials, and found a seldom used element:

! important

and brought it into play. ! important overrides any element on anypage, at any time. This will override the master stylesheet, as well as inline styles. The final solution:

hr{
height:1px ! important;
border: none ! important;
background-color:#000000 ! important;
}

every time the

---

tag was used, the

---

which is invisible, is given a height (1 pixel tall), given "none" as a border condition, and given a background color of black- just in case something should go wrong.

An elegant solution to a problem which cannot be adjusted without tearing out huge portions of the website.