FANDOM


  • I'm making a template in which rather than going through every bit of bolded text and using something like

    <b style="color: #887799;"></b>
    

    I want to use something like:

    b, strong {
        color: #887799 !important;
    }
    

    However, if I implement that on my css page, it affects the entire wiki rather than only my template. How do I make it so it only affects my template?

      Loading editor
    • Template:

      <span class="bold-template">'''{{{1|}}}'''</span>
      

      Template Use:

      You should {{TemplateName|never}} attack the boss on floor 8 before getting the divine sword of healing.
      

      CSS:

      .bold-template {
          color: #887799;
      }
        Loading editor
    • Haha, that's actually the opposite of what I wanted. I wanted something so I can do something like:

      <span class="bold-template">
      <strong>According</strong> to <u>all</u> <em>known</em> l a w s of AVIATION, there is <u><strong>no</strong></u> <em>way</em> a <strong>B E E</strong> should be <strong>able</strong> to <small>f l y .</small> Its <em><strong>wings</strong></em> are <u><strong>too</strong></u> <small>small</small> to get its <big>fat</big> <small>little</small> <strong>B O D Y</strong> off the <s>ground.</s> The <strong>B E E ,</strong> <em>of</em> <em>course,</em> <small>flies</small> <em>anyway</em> because bees <u><strong>don't</strong></u> <em>care</em> what <s>humans</s> think is <strong>i m p o s s i b l e .</strong>
      </span>

      and use something like

      b, strong {
          color: #887799 !important;
      }
      

      to use only one line of code to make all of the bolds in a template change color, rather than going in and making every individual bold change color.

        Loading editor
    • It is effectively the same thing in terms of how CSS is applied. The browser still has to go through and individually identify each word that needs its color changed. That said, it looks like you were able to come up the with solution yourself; more or less.

      <span class="bold-template"><strong>According</strong> to <u>all</u> <em>known</em> l a w s of AVIATION, there is <u><strong>no</strong></u> <em>way</em> a <strong>B E E</strong> should be <strong>able</strong> to <small>f l y .</small> Its <em><strong>wings</strong></em> are <u><strong>too</strong></u> <small>small</small> to get its <big>fat</big> <small>little</small> <strong>B O D Y</strong> off the <s>ground.</s> The <strong>B E E ,</strong> <em>of</em> <em>course,</em> <small>flies</small> <em>anyway</em> because bees <u><strong>don't</strong></u> <em>care</em> what <s>humans</s> think is <strong>i m p o s s i b l e .</strong></span>
      
      .bold-template b,
      .bold-template string {
          color: #887799;
      }

      By the way, just a piece of general advice regarding CSS: avoid using "!important". In general, the only reason it would be necessary is if you are trying to overwrite in-line CSS. Other than that, you can probably rewrite the CSS in a better way. If you want to know more, I suggest reading this and this.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.