crus4

logo
CSS Text

CSS Text


CSS has many properties for formatting text. With the help of CSS we can style a text with any color, we can set the background color of a text, change the text alignment and more.

Text Color

We can set the color of the text by using the color property. We can specify the color by the following ways:

  • color name – like “green”
  • an RGB value – like “rgb(0, 255, 0)”
  • a HEX value – like “#00ff00”

In an example below let’s write a code and set the color of the text.

Example

<html>
<head>
<style>
h1 {
  color: green;
}
h2 {
  color: rgb(0, 255, 0);
}
h3 {
  color:#00ff00;
}
</style>
</head>
<body>
<h1>Green color text, specified by using a color name.</h1>
<h2>Green color text, specified by using RGB value.</h2>
<h3>Green color text, specified by using HEX value.</h3>
</body>
</html>

Background color

The background color of a text can be defined by using the background-color property.

In an Example below let’s write a code and define the background color of a text.

Example

<html>
<head>
<style>
h1{
  background-color:blue;
}
</style>
</head>
<body>
<h1>This text has blue background.</h1>
</body>
</html>

Set the background color of the whole page

<html>
<head>
<style>
body{
  background-color:lightblue;
}
</style>
</head>
<body>
<h1>This whole page has lightblue background color.</h1>
</body>
</html>

Text Alignment

The CSS text-align property is used to change the position of the text. A text can be aligned to left, right or centered.

In an example below let’s write a code and align the text at left, right and center.

Example

<html>
<head>
<style>
h1 {
  text-align:center;
}
h2 {
  text-align:right;
}
h3{
  text-align:left;
}
</style>
</head>
<body>
<h1>This text is aligned to center.</h1>
<h2>This text is aligned to right.</h2>
<h3>This text is aligned to left.</h3>
</body>
</html>

NOTE:- By default the text is aligned to left.

CSS Text Decoration

In CSS we have lot of properties to decorate the text. Like we can use text-decoration-line property to add a decoration line to text. text-decoration-color property to change or set the color of the decoration line. And textdecoration-style property to set the style of the decoration line.

In an Example below let’s write a code to add a decoration line to text.

Example

<html>
<head>
<style>
h1 {
  text-decoration-line: overline;
}
h2 {
  text-decoration-line: line-through;
}
h3 {
  text-decoration-line: underline;
}
</style>
</head>
<body>
<h1>An overline text decoration.</h1>
<h2>A line through text decoration.</h2>
<h3>An underline text decoration.</h3>
</body>
</html>

Now let’s set the color and style the decoration line with text-decoration-color and text-decoration-style property.

Example

<html>
<head>
<style>
h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
  text-decoration-style: dotted;
}
h2 {
  text-decoration-line: line-through;
  text-decoration-color: green;
  text-decoration-style: dashed;
}
h3 {
  text-decoration-line: underline;
  text-decoration-color: blue;
  text-decoration-style: wavy;
}
</style>
</head>
<body>
<h1>A red color dotted overline text decoration.</h1>
<h2>A green color dashed line through text decoration.</h2>
<h3>A blue color wavy underline text decoration.</h3>
</body>
</html>

CSS Text

Leave a Reply

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