CSS change text: how to work with text in CSS?

Explore this Article

In this article we will focus on how to work with text in CSS (cascading style sheets) when creating the site. Let’s look at the properties that are responsible for the appearance of any text, or rather about the alignment, underline, indent, etc.).

It is worth noting that the most used property text — alignment. And in CSS there is a property that just for this. Create a cascading style sheet is a completely new style called text. Now apply the property text-align, which is responsible for the alignment can be one of four values — left (default), right, on both edges, the center and html font size.

Example how change text css

For example, you need to align text to the center, then the code will look like this:

h1{ text-align:center;}

In order to formalize (highlight) the text, use the property text-decoration. It can also take on four values — none, overline, underline, line-through. For example, you need to emphasize text:

h1 {
text-align:center;
text-decoration:underline;
}

To create paragraphs, use the property text-indent. It is better to set the value in pixels, as this is a more universal way. For example:

h1{
text-align:center;}
p {
text-indent:50px;
}

The distance between the letters is specified using the property letter-spacing. It is also recommended to specify in pixels, but you can and percentage. Example:

h1{letter-spacing:20px;}
p{ letter-spacing :5px; }

And to change the distance between words, you can use the property word-spacing. For example:

h1{word-spacing:10px;}
p{ word-spacing :4px; } .

If you want to use css hover effect for text, read the article – css hover effects

Leave a Comment

Your email address will not be published. Required fields are marked *