HTML/CSS: Changing CSS declaration on another HTML file?-CodePudding

I have an index.html file. I am trying to add another HTML file that uses the same CSS file. The problem is I have to change one of the CSS declarations for the new HTML but do not know how to.

index.html CSS

#bg {
  -moz-animation: bg 60s linear infinite;
  -webkit-animation: bg 60s linear infinite;
  -ms-animation: bg 60s linear infinite;
  animation: bg 60s linear infinite;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Set your background with this */

  background: #348cb2 url("images/bg.jpg") bottom left;
  background-repeat: repeat-x;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  filter: brightness(50%);
}

Let's say I'm trying to make index2.html with another background image like

background: #348cb2 url("images/anotherImage.jpg") bottom left;

Is there any way to do something like this without adding another CSS file? Or change it with Javascript?

CodePudding user response：

You can use the same CSS file but define a different id for your second index.html. Something like

.bg-common {
  -moz-animation: bg 60s linear infinite;
  -webkit-animation: bg 60s linear infinite;
  -ms-animation: bg 60s linear infinite;
  animation: bg 60s linear infinite;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Set your background with this */
  background-repeat: repeat-x;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  filter: brightness(50%);
}
#bg1{
  background: #348cb2 url("images/bg.jpg") bottom left;
}
#bg2{
  background: #348cb2 url("images/anotherImage.jpg") bottom left;
}

Now you can use bg1 in index.html and bg2 in index2.html. .bg-common can be used with both files

CodePudding user response：

You could create two different classes. .background1 and .background2 (or whatever you wish to name them) with the background property set.

Add the classes to your desired items and remove the background property from the #bg selector. You can then use the same CSS file.

CodePudding user response：

As most of the questions suggest, you could create two different IDs. However, you can also create two seperate css files and reference them in your two separate tags.

Referencing css file in html: https://www.freecodecamp.org/news/how-to-link-css-to-html/

CodePudding user response：

I hope I am understanding what you are trying to do...

To reuse your CSS and not change it, or your HTML markup, I would put your main CSS in an external CSS file, link to it from all your HTML pages, then add a <style> tag for each page with the background variations you need. You don't even need to change the id="bg" in any of your html pages, just add the one background CSS rule in each page and make it more selective by putting "html #bg" or "body #bg" in front of it so it writes over the linked CSS background property in the CSS file. CSS will combine all the other CSS with the new code using the same ID.

First, put this CSS below in an external file called styles.css and link to it from all your HTML pages:

<link media="screen" rel="stylesheet" type="text/css" href="style.css" />

#bg {
  -moz-animation: bg 60s linear infinite;
  -webkit-animation: bg 60s linear infinite;
  -ms-animation: bg 60s linear infinite;
  animation: bg 60s linear infinite;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Set your background with this */

  background: #348cb2 url("images/bg.jpg") bottom left;
  background-repeat: repeat-x;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  filter: brightness(50%);
}

Then place this below every link in each html file. Change it for the background CSS you need. It will cascade over whatever is in the linked file, but only the background CSS part will be written over. You can even put these snippets in external CSS files if you like and access them via an @import, too.

<style type="text/css">
  html #bg {
      background: #348cb2 url("images/anotherImage.jpg") bottom left;
  }
</style>

<div id="bg">This should have a new background using same CSS style.</div>

You do not need to change your HTML, id, add new CSS classes, or anything else. As you add new HTML, just change the one <style> tag rule.

This solution assumes you dont want to change your HTML and add any new CSS classes or change the id, etc., just change the CSS in the head of your html pages only. Otherwise, I would move to class CSS design.

CodePudding user response：

try to change the class,id in the same CSS file i think it will be work