How can I make hyperlinks appear in blue when the text is bold or part of a heading in Webflow?
TL;DR
- Use the “All Links” selector or assign a custom class (e.g.,
.blue-link) to the hyperlink. - Set the link’s text color to blue explicitly to override inherited styles from bold or heading elements.
To make hyperlinks appear in blue even when they're inside bold text or heading elements in Webflow, you need to correctly apply styles to the anchor tags (<a>) used inside those text types.
1. Use Webflow’s Selector for All Links
- Go to the Style panel.
- Click into a Rich Text, Heading, or Text Block that contains a link.
- Highlight a hyperlink inside the element.
- In the Selector field, click and choose “All Links” (or create a Global class like
.blue-link).
2. Apply a Blue Text Color to the Link Style
- Once you've selected the All Links selector:
- Set the text color to blue (#0000FF or any shade you prefer).
- This applies to all links, unless overridden by more specific classes.
3. Handle Links Inside Headings or Bold Text
- Webflow preserves the styling of the parent element (like a bold span or heading). To override any inherited styles:
- Add a class to the link itself (e.g.,
blue-link). - Select the link and assign the new class.
- Set the text color explicitly to blue under that class.
- This ensures the link remains blue regardless of its parent tag.
4. Check Typography Inheritance
- Bold text (using strong or
btags) and heading elements may apply font color from their styles. - Ensure that no conflicting color is set on the heading or bold elements that could override the link’s color.
5. Prevent Link Color from Being Overridden
- If using Rich Text elements, go to the Rich Text element, and click into it to access nested selectors like:
- “All Links inside Rich Text”
- Apply your desired blue color here to scope it specifically.
- Use combo classes if needed (e.g.,
.rich-text a) if multiple link color needs exist.
Summary
To make hyperlinks appear in blue when inside bold or heading elements, apply a link-specific style using either the All Links selector or a custom class, and set the color explicitly to blue. This overrides inherited styles from headings or bold tags that might otherwise apply their own color.