To change the colour of text on your website using inline CSS you will need to be logged into your Dashboard. This involves editing the HTML source code directly.
Walk-through tutorial - Click "Get Started"
(To make this tour bigger, click the arrows on the right or zoom in)
Navigate to the text block you'd like to add specific colours to, and select the pencil icon to open the text editor.
The text block editor will open up, where you will see the 'Source Mode' feature. Selecting this will switch to HTML view for the text box.
We will be including inline CSS. To change the colour of the specific text, wrap it in a <span> tag and use the style attribute to specify the colour. For example, if you want to change the text to pink, you would modify the code like this:
<span style="color: #FF99E6;">SPECIFIC TEXT HERE</span>Something to note with CSS is that American spelling is used (i.e. color). Make sure to include the semi-colon (;) before the closing quote mark too!
You can specify the colour in several ways:
Named colors (e.g., red, blue, green)
Hex codes (e.g., #FF0000 for red)
RGB values (e.g., rgb(255, 0, 0) for red)
HSL values (e.g., hsl(0, 100%, 50%) for red)
For example:
<span style="color: green;">THIS TEXT WILL BE GREEN</span>
Once you've added the inline CSS, save the changes and switch back to the regular text editor to view the changes. Make sure to click Save in the normal text editor view too.
Changing specific text in headings
The process above can be followed and applied to change the colours of specific text in headings. Something to note, however, is that this will only work for headings using the Text block, not the Heading block.
With the Text block, the 'Source Mode' feature will be available.
Make sure to click Save when making changes!