IMPORTANT: Vuture does not recommend inserting your own custom HTML styling into variables, as it can clash with the CSS that our Front End team has set up for your Campaigns.

 

If you have set up variables with custom HTML styling, such as:

<span style="font-size:xx-small">
   Lorem ipsum dolor sit amet <a href="link">Link text</a> Lorem ipsum dolor sit amet.
</span>

You may expect for all the text inside the <span></span> to be font size 'xx-small'; however, this will not be the case. The text inside the <a> tag (the link text) will actually be set by the CSS class that points to <a> tags.

That is because the CSS class that applies the font to the <a> tag, is more important than the style it could inherit from the <span> tag.

To remedy this, you must apply the same inline styling (in this case, it would style="font-size:xx-small") to the <a> tag that houses the link text, and so would look like the below (added inline style in red):

<span style="font-size:xx-small">
   Lorem ipsum dolor sit amet <a style="font-size:xx-small" href="link">Link text</a> Lorem ipsum dolor sit amet.
</span>

 

As stated at the begging of this article, we do not recommend adding your own custom HTML styling to your variables, and if you wish to do something along the lines of custom HTML styling, please contact your CSM first.

For more information on variables, see this article.