0

I'm using joomla template in which various stylesheet files are there for page layout. I'm demonstrating the brief way here:

style1.css

#header ul.menu li a{ background-color: red; }

style2.css

#header ul.menu li a{ color: blue; }

style3.css

ul.menu li a:hover{ background-color: gray; }

style4.css

ul li a:active{ background-color: green; }

style5.css

ul.menu { list-style: none;}
ul.menu li{display: inline;}
ul li a{float: left; display: block;}

What's the best way to reset default styles of #header menu?

I could reset the css as my own staying at style1.css as followings placing !important if needed:

#header ul.menu{list-style: none;}
#header ul.menu li{display: inline-block;}
#header ul.menu li a{color: black; background-color: none;}
#header ul.menu li a:hover{color: black; background-color: none;}
#header ul.menu li a:active{color: black; background-color: none;}

But for this I have see first what styles are applied in that menu and then set my own styles.

But I'm looking for the css rules that whatever the styles are applied in that menu I could reset to its browser defaults. Is there any way to do this?

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • load the css file at the bottom which you want to apply... – Dipesh Parmar Aug 28 '13 at 03:25
  • @DipeshParmar I've done that way but I need to check what styles are applied then reset. Please re-read last paragraph. – Bhojendra Rauniyar Aug 28 '13 at 03:30
  • Why don't you set the value in each? Or you might use `if else` block. To make sure the current css is the one you want it to be. – Afzaal Ahmad Zeeshan Aug 28 '13 at 03:39
  • 1
    There are several existing questions about resetting to browser defaults (a bit difficult to find, admittedly). The bottom line is that you can’t get browser default for a property for an element except by simply *not setting the property at all* in any rule that matches the element. – Jukka K. Korpela Aug 28 '13 at 05:33

1 Answers1

0

two ways with javascript

  1. change the className (you will have to replace "#header" with ".header")
  2. change the stylesheet being used
Math chiller
  • 4,123
  • 6
  • 28
  • 44