So. There are 2 drop down menus.

First css code

* { outline: 0; font-family: sans-serif } body { background-color: #fafafa } ....

And the second code

 body { background: #2a2a2b; color: #fff; text-align: center; font-family: Arial, Helvetica; } .....

Suppose this is all written to the file style.css, the conflict is applied with the body tag and it is applied to the entire site. How to make the styles apply only to these elements and do not conflict with each other?

  • 2
    I still do not understand what exactly do you want? Styles are written for the body - they are used for the body and all its heirs. What else do you need? - andreymal
  • If you want to apply styles only to drop-down menus, write selectors for drop-down menus, not for the body - andreymal pm
  • Create a separate block for the menu, equate it to the class and do whatever you want - Alex
  • This is understandable, I did <div class = "menu-1" </ div>, but the body tag in css conflicts and it turns out that 2 menus different in color become the same color, because the last value is taken from the style.css file for the body tag. How to prescribe styles for one menu, the second? - Denis Pulinets
  • 2
    See a concrete example and without “let's say” what and where it works for you. Because it is not clear what and where you overlap, which menus and backgrounds are in question. - E_K

1 answer 1

If I understood correctly, then you have a multipage page with one css file, but in specific pages you need different styles, then set the body class and use all the styles for this class.