如何在嵌入式CSS中定义CSS类？

Question

I want to create a popup screen appear when i click on an icon in my profile page of a game. The developers have given us access to use HTML codes in our profile area, though using the STYLE tags are blocked. Also I have no access to the head section of the HTML codes, as a result I cannot create any external file to define CSS class and link them to the profile page.

Below I have created an example of my codes. In the example code I have created an external CSS code. I want to know how can I get those external CSS into my HTML code (Using Inline CSS method). My problem is defining the CSS class in an Inline CSS method.

Things to know before answering my question:

1) Cant create an external file for CSS.

2) Cant write codes inside the HEAD tags.

3) Cant use the STYLE tag.

4) Only HTML codes are allowed. BBCodes are not allowed.

My HTML code looks like this:

<p>
 <a class="button" href="#popup1">
  <img src="SOME ICON URL HERE">
 </a>
</p>

<div id="popup1" class="overlay light">
 <a class="cancel" href="#"></a>
 <div class="popup">
  <h2>TITLE</h2>
  <div class="content">
   <p>PARAGRAPH ONE GOES HERE</p>
   <p>PARAGRAPH TWO GOES HERE</p>
  </div>
 </div>
</div>

My external CSS code looks like this:

.overlay {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,0,0,0.5);
 transition: opacity 200ms;
 visibility: hidden;
 opacity: 0;
 &.light {
  background: rgba(255,255,255,0.5);
 }
 .cancel {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default;
 }
 &:target {
  visibility: visible;
  opacity: 1;
 }
}

.popup {
 margin: 75px auto;
 padding: 20px;
 background: #fff;
 border: 1px solid #666;
 width: 300px;
 box-shadow: 0 0 50px rgba(0,0,0,0.5);
 position: relative;
 font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
 .light & {
  border-color: #aaa;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
 }
 h2 {
  margin-top: 0;
  color: #666;
  font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
 }
 .close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 20px;
  right: 20px;
  opacity: 0.8;
  transition: all 200ms;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #666;
  &:hover {
   opacity: 1;
  }
 }
 .content {
  max-height: 400px;
  overflow: auto;
 }
 p {
  margin: 0 0 1em;
  &:last-child {
  margin: 0;
  }
 }
}

Answer 1

you'll have to do something like this, using the html inline style

<div id="popup1" style="<!-- styles here -->">
   <!-- other code here -->
</div>