CSS TEXT AND FONTS

 

CSS TEXT

Text Color

The Color property is used to set the color of the text. The color is specified by:

  1. Color
  2. HEX 
  3. RGB
Example:

HTML

<html>

    <head>

        <title>Text Color>

    </head>

    <body>

        <h1> Text Color </h1>

        <p>The Color property is used to set the color of the text </p>

    </body>

</html>

 
CSS

body {

  color: blue;
}

h1 {
  color: green;
}

Output:

Text Color 

The Color property is used to set the color of the text


Text Color and Background Color

Iwe define both the background-color property and the color property:

HTML

<html>

    <head>

        <title>Text Color>

    </head>

    <body>

        <h1> Text Color </h1>

        <div>The Color property is used to set the color of the text </div>

    </body>

</html>

CSS


h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;

}

Output

Text Color </h1>

      The Color property is used to set the color of the text <


Text Alignment and Text Direction

In this chapter you will learn about the following properties:

  1. text-align
  2. text-align-last
  3. direction
  4. unicode-bidi
  5. vertical-align

Text Alignment

TheText-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

HTML

<!DOCTYPE html>

<html>

    <head>

        <title> Text align </title>

    </head>

    <body>

        <h1> Text align(center)</h1>

        <h2>Text align(left)</h2>

        <h3>Text align(right)</h3>

        <p>The text-align: justify; value stretches the lines equal width</p>

    </body>

</html>

CSS

h1 {

  text-align: center;

}


h2 {

  text-align: left;

}


h3 {

  text-align: right;

}

p{
  text-align: justify;

  width: 200px;

  height: 200px;

}


OUTPUT:

Text align(center)

Text align(left)

Text algin(right)

The text-align: justify;

 value stretches the

 lines equal width

Text Align Last

The text-align-last property specifies how to align the last line of a text. the last line can be right aligned, centered, or justified.

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;

}


Text Spacing

In this chapter you will learn about the following properties:

  1. text-indent
  2. letter-spacing
  3. line-height
  4. word-spacing

Text Indentation

The  text-indent property is used to specify the indentation of the first line of a text:

Letter Spacing

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

Line Height

The line-height property is used to specify the space between lines:

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

Text Shadow

The text-shadow property adds shadow to text.

<!DOCTYPE html>

<html>

    <head>

        <title> Text Shadow </title>

    </head>

    <body>

        <h1> Text Shadow</h1>

    </body>

</html>

CSS

h1 {

    color: white;

  text-shadow: 2px 2px 4px #000000;
}

Output:

Text-shadow effect!

Text Transformation

The text-transformation property is used to specify uppercase and lowercase letters in a text.

CSS FONTS

Choosing the right font has a huge impact on how the readers experience a website.

HTML

<<!DOCTYPE html>

<html>

    <head>

        <title> Font styles</title>

    </head>

    <body>

        <h1>CSS font-family</h1>

        <p class="f1">This is Times New Roman font.</p>

        <p class="f2">This is Arial font.</p>

        <p class="f3">This is Lucida Console font.</p>

</body>

</html>

CSS

h1{

color:red;

}

.f1 {

  font-family: "Times New Roman", Times, serif;

}

.f2 {

  font-family: Arial, Helvetica, sans-serif;

}

.f3 {

  font-family: "Lucida Console", "Courier New", monospace;

}

OUTPUT

CSS font-family

This is Times New Roman font.

This is Arial font.

This Console font.