Written by Andrei MoraruApr 23, 2020

We integrated into our Technical Blog section a new project that Andrei, a great developer in our community, wanted to share with all of us. Now, the project consists of a series of courses created by Andrei with a lot of passion and dedication, giving from his knowledge gathered during years of work and sleepless nights the chance to learn, grow and become our best version in the future. You can find the other chapters of the course in the Tech section of our blog - here.

Now let's discover the next part of the course "Learning CSS with LessText Styling":

  1. Topics of discussion
  2. Text styling
  3. Paragraph styling

1. Topics of discussion

In this tutorial, we are going to look at the many ways in which we can style and change the way text behaves. So, let's have some fun.

2. Text styling

When discussing text, there are a few CSS properties that allow you to change how it looks. These properties are used to change the font family, size, weight, style, stretch, variant, color, line-height, and alignment of the text. The first six in this long list of CSS properties are all related to the font of the text and can actually be grouped into a single line, similar to the border property. More often than not though, you'll end up modifying only the first 4 and I strongly suggest using the dedicated CSS property for them since it's less confusing.

Let's see what values each of these properties can have and also how they are actually named in CSS:

Quite a lot of stuff here. Feel free to fiddle around with it to see how it changes the way text is displayed. As a general idea, I suggest you focus on the first 4 properties and the last 3 since these are the most common ones.

3. Paragraph styling

Now that we know how to style text, we need to talk about certain ways in which we can style paragraphs or any elements that contain text for that matter. There are some properties that allow you to change the way text is displayed in a block. These properties are:

Let's see these bad boys in action now:

Just an element containing the Pneumonoultramicroscopicsilicovolcanoconiosis word, but with no word break.
Just an element containing the Pneumonoultramicroscopicsilicovolcanoconiosis word, but with word break.
Just an element containing the Pneumonoultramicroscopicsilicovolcanoconiosis word, but with text overflow.
  

And now, let's take a look at some Less CSS code for this:

@border-color: #345321;

.no-break-word {
  width: 100px;
  border: 1px solid @border-color;
}

.break-word {
  width: 100px;
  border: 1px solid @border-color;
  word-break: break-word;
}

.text-overflow {
  width: 75px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid @border-color;
}

And that about covers it for this tutorial. In the next one, we are going to discuss the overflow property you see used here. See you then.

Don't forget - you can find the other chapters of the course in the Tech Section.

Interested in finding out more about the author? Andrei's world is just a click away!

If you are interested in working with a team of expert remote developers, contact us TODAY!