HTML Style Formatting Issues in Hub

[Anonymous User]

I'm working on a hub site.  I've already set the overall theme for body text, body links etc.  The Body text color is black, and the link color is purple. The settings are perfect for the overall site, however for my footer which has a purple background, I want to add custom text formatting using HTML.  Specifically I have links that I want to style in white so it stands out against the purple.  The problem is, when I format this, it works but then ALL the links throughout the site, also get changed.  When I update the theme colors, then EVERYTHING gets changed back to the theme colors.  I don't understand what's happening.     I added the code below, let me know if I've done something wrong! 

<h2 id="contact-us">Contact Us</h2><h6>Street<br>City, State 123456</h6>
<p>
<style>
a:link {
color: white;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: white;
text-decoration: underline;
}
a:active {
color: white;
background-color: transparent;
text-decoration: underline;
}

a:link {
color: white;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: white;
text-decoration: underline;
}
a:active {
color: white;
background-color: transparent;
text-decoration: underline;
}
</style>

<a href="www.google.com" target="_blank">Website</a> </p>

<p>

<a href="mailto:google@gmail.com" target="_blank">Email Us</a></p>

<p>
<a href="tel:1234567890" target="_blank">Call Us at 111-111-1111</a></p>

<br>

<p><br></p>

[Anonymous User]

Looks like you need CSS encapsulation (the idea that you'll assign objects a class so you can target just those objects with your style).

Rows have an advanced option called "Row Class Name" which lets you add a class to the row that can be useful in encapsulating the style...or you can add classes to your custom HTML and then style them. 

Here's an example HTML that uses a class

<div class="mycustomrules">

<a href="https://google.com">a link</a>

</div>

So your CSS could be updated to:

```

<style>

.mycustomrules a:link {
color: white;
background-color: transparent;
text-decoration: none;
}

</style>

```

The row card offers a way to put a custom class on the row so you can target all links in a row for example. This is useful if you aren't writing custom HTML but rather are looking to style Hub's cards.

[Anonymous User]

Ok I'm trying that and while the rest of the text in the hub now matches the theme.  The specific colors I want in the footer aren't changing. I'm sure I'm missing something but I can't figure it out.  Do you see anything wrong with this?

<h6 style="color: rgb(255, 255, 255);">Street<br>City, NJ 07927</h6><p style="color: rgb(255, 255, 255);"><br></p>

<style>
.footer {
 a:link {
  color: green;
  background-color: #000000;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: #000000;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}}
</style>

<div class="footer">
 <p>
 <a href="www.google.com">website</a></p>
 </div>

[Anonymous User]

try using the footer CSS editor...we use an independent CSS editor here because the footer is on all sub pages / search pages / dataset pages