Text in CSS

Text in CSS

The color property is used to set the color of the text. We can colorize the colors in the following ways.


From color name - like "blue"

From hex value - like "# 0000ff"

From RGB value - such as "rgb (0, 0, 255)"

For example, We have some text inside an <p> element.


<p> The sun rises in the east </ p>

We can write this text to the color blue set.

<style>
p {
color: blue;
}
</ style>

Text alignment: - Use the text-align property to set the horizontal alignment of a text.

Text-align can have any of the following values:

center
left
right
justify
inherit
For eg. If <p> we have to give the right alignment of the text inside the element, we will write -

p {
text-align: right;
}

If the left alignment is to be given, leave the value of text-align and center the text-align to align it in the center.

text-align: justify: - If we want to give each line of paragraph a similar width, then we will justify the value of text-align.

p {
text-align: justify;
}

If the text of an element is to be aligned to the parent element of that element, then the value of the text-align gives the value.

Text Decoration: - Use the text-decoration property to set or remove decoration on a text.

a {
text-decoration: none;
}

Or if we want to show a line above the heading then we will write.

h1 {
text-decoration: overline;
}

Or if underline

h1 {
text-decoration: underline;
}

Text-transform: - Use the text-transform property to specify the upper case (capital) letters or lowercase letters in a text. For example, We have an <p> element in which text is written -

<p> This is a test </ p>

If we want all the letters of this text in uppercase then we will give the value of the text-transform 'uppercase'

p {
text-transform: uppercase;
}

Result: - THIS IS A TEST

Similarly, if we want all the letters in lowercase,

p {
text-transform: lowercase;
}

Result: - this is a test

If we want the first letter of the text in the letter uppercase, we will capitalize on the value of text-transform.

p {
text-transform: capitalize;
}

Result: - This Is A Test

If we want to give the text of an element the text-transform value of the parent element of that element, we will inherit the value of the text-transform.

Letter Spacing: - Use the letter-spacing property to specify the space between the characters in a text.

For example

p {
letter-spacing: 5px;
}

Line Height: - Use the line-height property to specify the space between lines in a text.

For example
<p> This is a line one. </ p>
<p> This is line two. </ p>
<style>
p {
Line-height: 1.8;
}
</ style>

Result:

This is a line



This is line two

Word-spacing: - Use the word-spacing property to specify the space between the words in a text.

For example

<p> This is a test. </ p>
p {
word-spacing: 10px;
}