Table of Contents
Carrd has some great text styling capabilities, but its inline text styling (styling an individual letter or word differently) is limited to a few simple options.
There are two ways to get around this, to add lots more inline styling.
One way is to add HTML code into the Text element and CSS in an Embed. However, we always want to show you the lowest code methods, so in this tutorial we’re going to focus on the other way, which only uses CSS code.
Note1: This tutorial requires the use of some simple CSS – you will either need to be familiar with it already or be willing to learn a little, to make it work.
Note2: You will probably need a Pro Carrd account, due to using Advanced Settings.
How to add extra inline text styles in Carrd
This trick works by hijacking the existing markdown tags, such as Strikethrough, to avoid adding HTML. Note it only works if you’re not already using the markdown tag you’re going to hijack.
- In a Text element, wrap the character/s or word/s you want to style in a markdown tag you’re not already using – e.g Highlight:
The text will then look something like this, with a background colour:
- Now, let’s swap that background colour for the style we want, using CSS.
- Give the Text element a class name, in its Settings:
- Now add an Embed element somewhere on your page, set it to Hidden and located in Head.
- In the Embed element, you need to add some CSS for the style you’re wanting – referencing the markdown tag and the class name. Below is an example :
- In the above code,
.stylishis the class name, andmarkis the HTML equivalent for the markdown tag for Highlight. - We’ve added CSS to increase the font size, and to cancel the original Highlight styling.
<style>
.stylish mark {
background-color: transparent;
font-size: 50px;
}
</style>This changes the text styling as below, once published (only visible on the published site, not in Carrd):
Some things to note:
- In your CSS code you will have to cancel out the original styling of the markdown tag you use – in the example above we’ve cancelled out the background colour that Highlight would ordinarily give.
- This technique can be used to add most inline text styles, if you follow the same steps and use the correct CSS. A good CSS reference is W3 Schools.
We hope you liked this tutorial. Check out other Carrd tips & tricks or our templates.
Written by
