Block [TinyPortal] CSS

[[chrisB]]

I'm in the process of adding blocks to my site.

I have an issue with CSS effecting other blocks outside the code.

Type of block: HTML/Javascript

To add the CSS, I use <style> insert code </style> - my question is how do I restrict the CSS to work only within the block. Is it possible?

This is the offending code.

Code Select Expand

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}
My way around it which prevents the issue, is to repeat the code but for each social media link.

Example

.fa-facebook {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa-twitter {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa-instagram {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

This is fine, but I am wondering is there a way to just restrict the css inside the <style></style> so that if CSS outside of the black has the same value it won't be effected.

I'm sorry if this isn't clear, or if it's confusing. I have tried to be as detailed and clear as I feel I can be, I'm no coder, it does confuse the hell out of me but I am trying to pick up stuff.

[@rjen]

If you want to limit the block css to only affect elements in the block you will need to make the classes specific to that block

So instead of class fa-facebook use class name block1-fa-Facebook...

[@rjen]

If you want to limit the block css to only affect elements in the block you will need to make the classes specific to that block

So instead of class fa-facebook use class name block1-fa-Facebook...