Categories
CSS

Styling text in CSS

There are few properties that are used for text styling in CSS. They are enormously used in CSS when it comes to styling a web page. Following properties are all related to text styles.

p {
    color: #333333;
    text-indent: 60px;
    text-align: center;
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 20px;
    direction: rtl;
    word-spacing: 10px;
    text-shadow: 5px 10px grey;
    vertical-align: middle;
}

The paragraph below has all the properties mentioned above applied to it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non volutpat libero. Cras vitae nisi at augue posuere posuere at nec diam. Proin mollis ipsum eget iaculis volutpat. Cras non elit a arcu gravida pharetra finibus vel nunc.

As you can see in the paragraph above, all the styles have been applied. The paragraph is centred, bold, underlined, uppercased, text indent with text shadow of yellow colour.

Now we will go through the values of each text property in the following.

p {
    color: #333333; //Any colour can be used for value of this property.
}
p {
    text-indent: 60px; //Indent is the spacing at the start of the paragraph on the first line. This can be set to any value using px or pt etc.
}
p {
    text-align: center; //Text align can be set to center, right, left or justify
}
p {
    text-decoration: underline; //Text decoration can be set to underline, overline, line-through or none,
}
p {
    text-transform: uppercase; //Text transformation can be set to uppercase, capitalize or lowercase.
}
p {
    font-weight: bold; //Font weight can be set to bold or set to 300, 400, 500, 600, 700 depending on the font. The higher the number, the more bold it will be.
}
p {
    letter-spacing: 2px; //Letter spacing can be set to any value using px or pt etc.
}
p {
    line-height: 20px; //Line height can be set to any value using px or pt etc.
}
p {
    direction: rtl; //Direction is mainly used for other language than English.
}
p {
    word-spacing: 10px; //Word spacing can be set to any value using px or pt etc. 
}
p {
    text-shadow: 5px 10px grey;
}
p {
    vertical-align: middle;  //Vertical alignment of the text can be set to top, bottom or middle. 
}

Leave a Reply

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