Learning CSS with Less - Text styling
Learning CSS with Less - Text styling
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.
Now let's discover the next part of the course "Learning CSS with Less - Text Styling":
- Topics of discussion
- Text styling
- 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:
- font-family - used to define the font for your text; the value for this property usually contains...uhm...3 values: my_font, font_family_fallback, generic_family_fallback (e.g. Arial, Helvetica, sans-serif); the reason behind these 3 values is to have a fallback value if your custom font is not located; should your custom font not be located, the browser would try to use the font_family_callback value and if that is not found, it will default to the generic_family_fallback value
- font-size - the size of the font; CSS has some string values for it but more often than not you will use either pixels, percentages or relative values (which we will discuss later)
- font-weight - determines how thick or thin the font is; you can use either the bold value or numeric values such as 100, 200, 300 up to 900
- font-style - determines whether the text is to be displayed as normal, italic or oblique (for this last one, you can specify how oblique you want your text by supplying a deg value, e.g. font-style: oblique 10deg)
- font-stretch - a property that allows you to select a different face for your font, which works on fonts that allow such a functionality; more details can be found here
- font-variant - allows you to change the text to a certain caps value; more details can be found here
- color - changes the color of your text; you can use string values (e.g. red, blue), hex codes (e.g. #001122) or the rgb or rgba functions (both of these functions take 3 values, ranged between 0 and 255 which determine the level of red, green and blue in your color; rgba takes a fourth parameter which determines the opacity of your color and which has values between 0 and 1)
- line-height - determines the height of a line of text; the default is one and it can take both floating-point and integer numeric values
- text-align - determines the alignment of the text; the default value is left and other values are center, right and justify
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:
- word-break - used to determine what happens when a word is so long it overflows outside the text container; the default value is normal; a common value used for paragraphs is break-word which moves a part of the word on a new line in order for the text to fit the container
- overflow-wrap - used for similar purposes as word-break; the difference is that word-break allows for some wrap options for the Chinese, Japanese and Korean languages
- white-space - this property allows you to determine how whitespace is handled in an element containing text; the default value is normal, which basically means that the text wraps based on the size of the container; in other words, even if you write 100 words in a 50px wide container, the words will move on the next line whenever the maximum width of the container is reached; another common value used is nowrap, which prevents the words from going on a new line and instead keeps them on the same line even if it overflows outside the element
- text-overflow - used alongside the white-space property to determine what is going to happen to the text when the maximum size of the element is reached; it has two values, clip (which basically cuts the text whenever the size is reached) and ellipsis, which adds ... at the end of the text when the size of the element is reached; please note that using this technique will display your text on a single line, regardless of how long it is
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.