CSS HTML Javascript jQuery Ajax PHP Example Java MORE

CSS Text

In this topic we are going to discuss how to add color to a text, how to change the font size, how to change the font-family etc.

Text Color Property:

The color property is used to set a color for an text.

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
}
 
h1 {
  color: green;
}
</style>
</head>
<body>
 
<h1>Heading</h1>
<p>This example is all about how to add color to a text.</p>
 
</body>
</html>


Run it yourself

Text Alignment Property:

The Text-alignment property is used to set the alignment of an text.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
  color: blue;
}
 
h2 {
  text-align: left;
  color: green;
}
 
h3 {
  text-align: right;
  color: orange;
}
</style>
</head>
<body>
 
<h1>Center Heading</h1>
<h2>Left heading</h2>
<h3>Right Heading</h3>
 
<p>The three headings above are aligned center, left and right.</p>
 
</body>
</html>


Run it yourself

Text Decoration:

The text decoration property is used to decorate the text. There are various attribute of text decoration. These are:

  • Overline
  • line-through
  • underline
  • none

Example

<!DOCTYPE html>
<html>
<head>
<style>
.one{
  text-decoration: overline;
}
 
.two{
  text-decoration: line-through;
}
.three{
  text-decoration: underline;
}
.none{
  text-decoration: none;
}
</style>
</head>
<body>
 
<p class="one">This is paragraph with overline attribute.</h1>
<p class="two">This is paragraph with line-through attribute.</h2>
<p class="three">This is paragraph with underline attribute.</h3>
<p class="three">This is paragraph with none attribute.</h3>
 
</body>
</html>

Run it yourself

Text Transformation

By using text-transform property we can changed the text to uppercase and lowercase letters.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.uppercase {
  text-transform: uppercase;
}
 
.lowercase {
  text-transform: lowercase;
}
 
.capitalize {
   text-transform: capitalize;
}
</style>
</head>
<body>
 
<p class="uppercase">This is a uppercase paragraph.</p>
<p class="lowercase">This is a lowercase paragraphp.</p>
<p class="capitalize">This is a capitalize case paragraph.</p>
 
</body>
</html>

Run it yourself

Text Indent

By using the indentation property we can indentation of the first line of a paragraph.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 100px;
}
</style>
</head>
<body>
 
<p>Students can be children, teenagers, or adults who are going to school, 
but it may also be other people who are learning, such as in college or university. 
A younger student is often called a pupil. Usually, students will learn from a teacher or a lecturer if at university.
</p>
 
</body>
</html>


Run it yourself

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  letter-spacing: 5px;
}
 
h2 {
  letter-spacing: -5px;
}
</style>
</head>
<body>
 
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
 
</body>
</html>

Run it yourself