I am new to CSS and have an issue on my current project. I am sure there is a simple solution and it would be great to get some ideas to solve the problem.

I designed a Website with a navigation on top by using CSS. The different sites in the navigation have the same structure centrally "steered" by the CSS code. The only difference is the background-image per site which I changed by the body class:

 body.Site1 {
    background-image: url(Picturewithdarkbackground.jpg);
 }
 body.Site2 {
    background-image: url(Picturewithwhitebackground.jpg);
 }

Problem: The navigation text color in the header for one specific html site (with dark background) can hardly be seen due to the black text. My intention is to change the black text color in the Navigation only for this one specific Html site to white text color.

I have tried to change the header color but it is not working, it should only change it for the site with the black background (Site1) see below ->

body.header.Site1 {
  color: white;
}

header.Site1 {
  color: white;
}

How can I change the text color in the Navigation header for one specific html site?

Any simple Idea?

Thanks for support!!!

CodePudding user response：

You seem to have added the "Site1 / Site2" class to the body. So to change the header color for the specific site your CSS will have to look something like this:

body.Site1 header {
    color: white;
}

Also, .header or header? Is it a class or a tag?

CodePudding user response：

You have your order mixed up in your css. The Site1 should go before the header and after the body

Amend it to body.Site1 header{color:white;} (leave a gap between Site1 and header as header is a standalone tag, not a class belonging to Site1). Then it should work.

Good luck!

p.s. a footnote, if you can avoid using a picture as a background (i.e. if it's just one plain dark colour, not an image), then you'd be better off finding out what that colour is and using the appropriate hex code. It would save on loading time. Just a tip!