• English

Useful CSS tips for text formatting and designer’s cheat sheet

As a designer working with Elementor, I often find myself customizing the CSS code. It provides you with opportunity to simply assign a class to the text, button or any other element and change its properties like font, margins, color or size globally. You can show or hide almost any element on the page. Or just change its properties when it is not possible to access them through Elementor. In this post, we will cover some of the most useful CSS tips for text formatting to give your website extra styling possibilities and make your workflow more efficient.

Linking the fonts used

Before getting to actual useful CSS tips for text formatting, first you need to import the fonts used in the CSS sheet to make sure the text previews properly in all browsers and devices. This is how you can easily link a Google font used in your website. In this example I used Nunito Sans font. Since I am using the Elementor builder tool, I simply installed a Simple Custom CSS and JS plugin and placed this code there:

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap');

To import any other font from Google fonts library, just go to Google Fonts, find a font you want to use and click on the red plus sign next to it. A tab will appear in the bottom right corner. After expanding it, you will find the font link in the @import section. Just copy the link (href set between the “”) and place it in the above code. Then put that code in your custom CSS.

Importing fonts' URL from Google fonts

Formatting the text

For formatting of any text, either a blog post, page title or regular body copy, you can give it a class and simply use CSS to assign properties to that class. When placing a class name in the CSS, make sure to use the dot (.) before the label. Note that for headings like h2, h3 and so on, you don’t need to put the dot in front. Here is how modifying a class called “blog-title” and a class h2 (heading 2) can look like for example:

.blog-title,
h2 {
  font-family: 'Open Sans', sans-serif;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1px;
  color: black;
}

Assigning a class to a paragraph directly in html:

<p class="bold-text">You add the text here</p>

There are some additional properties that allow you to further manipulate the text. For example:

Changing the case with text-transform property

UPPERCASE

text-transform: uppercase;

lowercase

text-transform: lowercase;

Capitalize

text-transform: capitalize;

Changing the styling with text-decoration property

Underline

text-decoration: underline;

Line-through

text-decoration: line-through;

Overline

text-decoration: overline;

Using the gradients on text

Using the gradients might not be as straightfoward in CSS as you might expect. However, with a few lines of code you can reach any desired effect. To apply gradient to text that has the class “gradient” applied to it, use the code below. Use any rgba values for gradient stops. Note that rgba values of 255, 255, 255, 0 used in the last line mean the transparent color.

.gradient p{
   background-image: linear-gradient(to right,rgba(76, 138, 198, 1),rgba(136, 196, 67, 1));
   -webkit-background-clip: text;
   display: inline-block;  
   -webkit-text-fill-color: rgba(255, 255, 255, 0);
 }

Extra tip: you might run into issues with displaying gradients properly on iOS devices. I spent hours on a project for a client trying to figure out why the gradients were not showing on iPad or iPhone. In the end, all I had to do is to add the type selector ‘p’ (as for ‘paragraph’) after the class name and if was magically fixed with properly applied gradients.

Close Menu
×

Cart

Get a FREEBIE!

Download these free trifold brochure PSD mockups.