Good css text styles

CSS Text: Learn to Set Colors, Spacing, Direction and Alignment

This is a paragraph. It is justified, indented by 30px, and the space between characters is set to 5px. This link is colored but not underlined. Here is some more text that the paragraph justification is clearly visible. Cool, right?

TL;DR — CSS text styling properties set colors, sizes, fonts, shadows for your text content. CSS also offers properties for setting text-alignment, the spacing between letters and words, etc.

Contents

• 1. Popular CSS Text-Styling Options
• 1.1. color
• 1.2. text-align
• 1.3. text-decoration
• 1.4. text-transform
• 1.5. text-indent
• 1.6. letter-spacing
• 1.7. word-spacing
• 1.8. line-height
• 1.9. direction
• 1.10. text-shadow
• 1.11. text-overflow
• 1.12. overflow-wrap
• 1.13. word-break
• 2. CSS Text: Useful Tips

Popular CSS Text-Styling Options

color

The CSS text style usually includes color property. It sets the color for the text content.

In the following example, we assign colors to and

elements:

h1 < color: purple; > p < color: #FF1493; /* The code for pink */ >

You can set color by using CSS color names (blue, green, red, etc.), RGB value indicators ( rgb() ) or HEX value indicators ( #ffffff ). Pick the right colors and make palettes with our Pickeristic tool.

text-align

The text-align property sets the alignment of the CSS text. You can justify the text to the right, left, or center. You can also stretch it out so each line would have equal width.

The following example shows you all the possible ways to align CSS text:

h1 < text-align: left; > h2 < text-align: center; > h3 < text-align: right; > p < text-align: justify; >

You can describe values of text-align with keywords:

Value	Description
left	Your text will appear on the left side of the page (default)
right	Your text will appear on the right side of the page
center	Your text will appear in the center of the page
justify	The text will be stretched, so each line has the same width

text-decoration

The CSS text-decoration property sets decorative lines to emphasize points in CSS text. There are four value options:

• none – no line (default)
• line-through – over the text
• overline – above the text
• underline – below the text

In the next example, you’ll see all types of text-decoration lines:

h1 < text-decoration: underline; > h2 < text-decoration: overline; > h3 < text-decoration: line-through; > a < text-decoration: none; >

Tip: the none value is commonly used for removing the underline from links.

You can define styles and colors for each of these lines in the same declaration when using the text-decoration shorthand.

text-transform

The CSS text can change automatically to have only lowercase or uppercase letters. The text-transform can change the style in the following ways:

I’m uppercase.
I’m lowercase.
I’m capitalized.

In the example, we assign different text-transform values to three different HTML elements: ,

, :

h1 < text-transform: uppercase; > p < text-transform: lowercase; > b < text-transform: capitalize; >

text-indent

In some countries, it is a rule to use indentation on the first line of each paragraph. Sometimes people use it for clarity and better readability as well.

To define the indentation of the CSS text, we use the text-indent property. It accepts length indicators as values (cm, pt, px, etc.).

In the following example, we assign a 45px text indentation to the paragraph element

:

letter-spacing

The letter-spacing property takes length parameters (cm, pt, px, etc.) and uses them to set the spacing between characters.

Tip: you can use both negative and positive length values. The positive numbers increase spacing, while negative ones make the text more packed.

This text has a 2px letter spacing!
This text has a -2px letter spacing!

The example below shows the result of positive and negative spacing on and elements.

h1 < letter-spacing: 2px; /* This will increase the space between letters */ > h2 < letter-spacing: -2px; /* This will decrease the space between letters */ >

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

word-spacing

The word-spacing property defines the spacing between words for CSS texts. It works with positive and negative length indicators (cm, pt, px, etc.)

This text has a 5px word spacing!
This text has a -5px word spacing!

In the example below, you will see how negative and positive values affect the text:

h1 < word-spacing: 5px; /* This increases the space between words */ > h2 < word-spacing: -5px; /* This decreases the space between words */ >

line-height

The line-height property defines the vertical spacing between lines of text. It can have these values:

• Length indicators (cm, pt, px, etc.).
• Regular numbers (representing the number of lines that make the height of lines).

In the following example, we create vertical space equal to the space that five lines would take:

direction

The direction property sets the CSS text style by defining the direction of the text.

• ltr (from left to the right).
• rtl (from right to the left).

In this example, we assign the right-to-left direction to the

element:

p < direction: rtl; /* This makes the text go from the right to the left */ >

text-shadow

CSS text styles become even better with the text-shadow property. In this next example, we add a blue shadow to the text:

h1 < text-shadow: 0px 2px 5px blue; >

Consider this table with required and optional values of text-shadow :

h-shadow	Length of the horizontal shadow. Describe its values using length parameters (cm, pt, px, etc.). Required.
v-shadow	Height of the vertical shadow. Describe its values using length parameters (cm, pt, px, etc.). Required.
blur-radius	Specifies the blur radius. Describe its value using length parameters (cm, pt, px, etc.). If not included, it is 0.
color	Determines the color of the shadow. Describe it using color names, RGB, or HEX values. If not included, it is black.

text-overflow

The CSS text-overflow property defines how overflowed content is presented. The content renders as an ellipsis or can be clipped.

This example shows the use of text-overflow with two possible values of ellipsis and clip :

p.test1 < white-space: nowrap; width: 100px; border: 2px solid #2c2f30; overflow: hidden; text-overflow: clip; > p.test2 < white-space: nowrap; width: 100px; border: 2px solid #2c2f30; overflow: hidden; text-overflow: ellipsis; >

To improve CSS text effects, we can pair text-overflow with other styling properties and pseudo classes.

This example shows the overflowed content once users hover over it:

p.test:hover < text-overflow: inherit; overflow: visible; >

overflow-wrap

CSS text effects include overflow-wrap , which breaks long words and wraps them onto the next line. The property prevents the text from overflowing its line box.

This is some very loooooooooooooooong text

p < width: 50px; height: 100px; border: 5px solid red; padding: 6px; margin: 6px; overflow-wrap: break-word; >

• normal : words break only at standard places.
• anywhere : words break at any point to prevent overflowing. CSS considers soft wrap opportunities of the word when estimating min-content intrinsic sizes.
• break-word : the same as anywhere but CSS does not consider soft wrap opportunities.
• inherit : elements take the overflow-wrap value from their parents.

Tip: the CSS overflow-wrap used to be known as word-wrap.

word-break

The word-break property sets the line breaking rules when text overflows its content box.

This example presents the way word-break works with the break-all value:

This is some very loooooooong text

This is some very loooooooong text

p.test1 < word-break: break-all; > p.test2 < word-break: keep-all; >

The word-break property can have the following values:

• normal : the default line break rules.
• break-all : prevents overflow by inserting breaks between any two characters (not for Japanese/Korean/Chinese characters).
• keep-all : no words break for Korean/Japanese/Chinese texts. Other texts act normal .

Note: the deprecated break-word worked the same as word-break: normal and overflow-wrap: anywhere.

CSS Text: Useful Tips

• Remember that CSS text styles apply to entire elements. If you need to add effects to a specific part of the text, you should wrap it in elements such as .
• Pseudo elements also help to style the first line, first word, or the highlighted parts of the CSS text.

Источник

CSS styling text

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you’ll do with CSS. Here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

Looking to become a front-end web developer?

We have put together a course that includes all the essential information you need to work towards your goal.

Prerequisites

Before starting this module, you should already have basic familiarity with HTML, as discussed in the Introduction to HTML module, and be comfortable with CSS fundamentals, as discussed in Introduction to CSS.

Note: If you are working on a computer/tablet/other device where you don’t have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.

Guides

This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.

In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.

Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.

When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We’ll look at all these topics in this article.

Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.

Assessments

The following assessment will test your understanding of the text styling techniques covered in the guides above.

In this assessment we’ll test your understanding of styling text by getting you to style the text for a community school’s homepage.

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник