How to style links in rich text?

When setting up my stylesheet I have styled “All Links” which works as long as I add an actual link object. But I have noticed that when I add a link to a rich text block it looks different (larger in this case).

I am new to Webflow but am wondering how I style the links which appear in rich text — I had hoped that they would pick up the style from “All Links” but apparently not.

Any help would be greatly appreciated.

Thanks so much
William


Here is my site Read-Only: Webflow - Lemonsnap

You could use custom code targetting the links inside the rich text and set the css as you want in the embed

Try adding this custom code that will make links inherit style from their parent

<style>
a {
color: inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit;

}
</style>

Ok, this is weird. Both links appear to be targeted by the same code and the styles appear congruent, both font size 1.25em but the link object is rendering at 17.5px and the link in the rich text object is rendering at 21.875px! What the heck!

How can that even happen?

Yes they they inherit from All Links, but can also be specially overridden within the rich text element.

I do not understand. I get (conceptually) how they could be overridden within a rich text element.
But why are they being overridden within this particular rich text element? Do you mean expressly formatted inside the rich text element? I have not done that.

Are they overridden “automatically”? That is, does the rich text editor apply some random style to the links? Can I just turn that off?

Just looking for a simple, clean way to resolve this.

Thank you so much
William

I tried adding this. It affected links both inside and outside of the rich text block.

Links inside the rich text block are now rendered 17.5px on my monitor, independent links are now rendered at 14px. Both are still showing as 1.25em.

Very frustrating!

As they are both showing as 1.25em but are showing at different pixel values on the same screen — is it possible that these sizes are relative to different values?

I don’t understand how that would work, but it is the only explanation I can see for this behaviour.

What is the font size relative to for a rich text block? How does that differ from an independent link object?

Thanks so much
William

EM’s inherits their size from the parent element. Do the two links have different parent elements?

I just did the math. The link within rich text (1.25em) is rendering at 21.875px with is 1.25 times 17.5px — which is the font size of a paragraph and the expected size of the link text. It’s like it is applying the 1.25 multiplier a second time.

Does that help unravel this mystery?

Thanks again
William

Yes, just checking the code. The “independent” link object is just an a inside a div. The link inside the rich text block is an a inside a p inside a div — if that doesn’t make sense, it’s like below

<div><a href=""></a></div>

<div><p><a href=""></a></p></div>

Is that what you mean?

Yeah, so I would imagine either the div or paragraph parent element has a specific font size set that differs from the default font size.

Yes, it does.

The default text in Body (All Pages) is set to 1vw

The font size for paragraphs is set to 1.25em

The font size for links is also set to 1.25em, so when there is a link inside a paragraph it seems to be multiplying by 1.25 again, making the links larger than the surrounding text.

I am trying to think of the cleanest way to resolve this.

Would it be to increase the size of the Body (All pages) font to 1.25vw? Then I would clear the font setting in All paragraphs and for link for that matter, so both it and the link would default to the font size for Body (All pages). I would have to revise the whole style sheet, but it would be clean.

Thoughts?

Using vw units as a font size seems very unconventional to me.
I’d expect weird consequences.

Second, read up on em’s v. rem’s. It looks like your sizes are inheriting from the contain, so think of it like a magnifying glass on top of a magnifying glass- you get a compound effect. I suspect rem’s would work better for you in your design approach.

Hi,
Nick rider here,
I have same question how i style links in rich text?
According to my stylesheet, I have styled “All Links”, which only works if I add an actual link object. However, I noticed that when I add a link to a rich text block, it appears larger.
In my first year with Webflow, I have a question about styling the links which appear in rich text - I was hoping they would be styled from the “All Links” section, but they don’t seem to be.

I would greatly appreciate any help you can provide in this comment.

Hey Nick, share the read-only link to your project, I’ll have a look at your settings.

Hey @Nick_Rider are you using em units for the font sizes for all-links and all-paragraphs?

This was ultimately the same problem for me. I had set paragraphs to 1.25em and had set all-links to 1.25em. In rich text, the link is inside a paragraph block so the paragraphs are already set to 1.25 times the body text and then the rich text link is showing as 1.25 times that size — effectively larger.

I ended up forcing the rich text links to the size I wanted but I suspect there is a much cleaner solution.