One HTML element referencing another?

[greenfrog]

I have some code (CSS and HTML) that I have tested and it produces the desired image. I want to display the image on my webpage, but instead of adding the code directly to an on-page HTML element, I want to reference the code. The referenced CSS styling would be a kind of global styling for the on-page HTML element. I am using Bubble which is why I keep mentioning an HTML element.

As a test I did this;

1. I used two HTML elements: #onPage and another not on the page called #color-and-shape.
2. I used the id attribute to style the #onPage element from within the #color-and-shape element.

This resulted in the #onPage element being styled to have a yellow background and a black circle in the middle.

So far so good, the onPage code (put in an HTML element on the page)

>_

<style>
#onPage {
  width: 110px !important;
  height: 100px !important;
}
</style>

And the offPage code (an HTML element not on the page titled color-and-shape .)

<div id="color-and-shape">
  <style>
    #onPage {
      background-color: yellow;
    }
    #onPage::before {
      content: "";
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: black;
      margin: auto;
    }
  </style>
</div>

However, what I actually want to display is the following code (which I checked works when viewed on W3Shcools., so why does it not work on my website?

<div id="onPage">
  <div class="container">
    <!-- Top left diagonal line -->
    <div class="diagonal diagonal-top-left"></div>
    <!-- Top right diagonal line -->
    <div class="diagonal diagonal-top-right"></div>
    <!-- Bottom left diagonal line -->
    <div class="diagonal diagonal-bottom-left"></div>
    <!-- Bottom right diagonal line -->
    <div class="diagonal diagonal-bottom-right"></div>
    <!-- Gray area with white inset border -->
    <div class="gray-area">
      <div class="inner-border"></div>
    </div>
  </div>
</div>

<style>
   #onPage .container {
  height: 200px;
  width: 200px;
  background-color: #f7f7f7;
  position: relative;
  border: 4px outset white;
  box-shadow: 0px 0px 2px 1px #A9A9A9;
  position: relative;
  !important;
}

#onPage .diagonal {
  height: 1px;
  width: 25px;
  background-color: #A9A9A9;
  !important;
}

#onPage .diagonal-top-left {
  position: absolute;
  top: 12px;
  left: 0px;
  transform: rotate(45deg);
  !important;
}

#onPage .diagonal-top-right {
  position: absolute;
  top: 10px;
  right: 0px;
  transform: rotate(-45deg);
  !important;
}

#onPage .diagonal-bottom-left {
  position: absolute;
  bottom: 13px;
  left: 0px;
  transform: rotate(-45deg);
  !important;
}

#onPage .diagonal-bottom-right {
  position: absolute;
  bottom: 10px;
  right: 0px;
  transform: rotate(45deg);
  !important;
}

#onPage .gray-area {
  position: absolute;
  top: 20px;
  left: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  background-color: gray;
  !important;
}

#onPage .inner-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px inset white;
  !important;
}

</style>

 

[BGB]

Do you want to draw this. If so it is working. Just remove the !important, it is actually not important.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Referencing</title>
        <link rel="stylesheet" href="style.css">
        <style>
        </style>
    </head>
    <body>
        <div id="onPage">
            <div class="container">
                <!-- Top left diagonal line -->
                <div class="diagonal diagonal-top-left"></div>
                <!-- Top right diagonal line -->
                <div class="diagonal diagonal-top-right"></div>
                <!-- Bottom left diagonal line -->
                <div class="diagonal diagonal-bottom-left"></div>
                <!-- Bottom right diagonal line -->
                <div class="diagonal diagonal-bottom-right"></div>
                <!-- Gray area with white inset border -->
                <div class="gray-area">
                <div class="inner-border"></div>
                </div>
            </div>
        </div>
    </body>
</html>

#onPage .container {
    height: 200px;
    width: 200px;
    background-color: #f7f7f7;
    position: relative;
    border: 4px outset white;
    box-shadow: 0px 0px 2px 1px #A9A9A9;
    position: relative;
}

#onPage .diagonal {
    height: 1px;
    width: 25px;
    background-color: #A9A9A9;
}

#onPage .diagonal-top-left {
    position: absolute;
    top: 12px;
    left: 0px;
    transform: rotate(45deg);
}

#onPage .diagonal-top-right {
    position: absolute;
    top: 10px;
    right: 0px;
    transform: rotate(-45deg);
}

#onPage .diagonal-bottom-left {
    position: absolute;
    bottom: 13px;
    left: 0px;
    transform: rotate(-45deg);
}

#onPage .diagonal-bottom-right {
    position: absolute;
    bottom: 10px;
    right: 0px;
    transform: rotate(45deg);
}

#onPage .gray-area {
    position: absolute;
    top: 20px;
    left: 20px;
    height: calc(100% - 40px);
    width: calc(100% - 40px);
    background-color: gray;
}

#onPage .inner-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 4px inset white;
}

 

[greenfrog]

Here's a video showing my issue - https://www.loom.com/share/f45001a579cb4985a7713f069b89e20f

 

[greenfrog]

Thanks for your reply. I do need !important because Bubble.io requires it to show CSS. Also, it does work, but if I want to move the css to a seperate HTML element it fails. I have made a video showing the issue.