hashnode-blogs

Styling texts with CSS 👕

A piece of text has a lot of properties that can be tweaked to change its appearance on a webpage.

<p id="para1">
    a really nice quote
</p>
<p id="para2">
    a really nice quote
</p>
<p id="para3">
    a really nice quote
</p>
<p id="para4">
    a really nice quote
</p>

The list of properties of texts are:

Color

determines the color of a text

#para1 {
  color: red;
}

#para2 {
  color: rgb(23, 45, 67);
}

#para3 {
  color: #ffc40b;
}

#para4 {
  color: hsl(120, 100%, 50%);
}

There are a few ways to pass the value of color itself:

🔗 Here are the names of almost all the colors in CSS
🔗 Hex color codes

🔗 Color picker

Font-size

determines the size of the text

#para1 {
  font-size: 24px;
}

#para2 {
  font-size: 1.4em;
}

#para3 {
  font-size: 1.3rem;
}

#para4 {
  font-size: 0.5in;
}

There are a lot of units for font-size values, such as px pt em rem in cm .

🔗 Here you can read more about them.

Font-family

determines the appearance of text.

#para1 {
  font-family: Arial, Helvetica, sans-serif;
}

CSS has five generic font-families serif sans-serif monospace cursive fantasy .

There are a lot of other fonts available but they may not be compatible across all

browsers and devices. Thats why while the passing value in font-family property

we start with a font that we want and end with any one generic font for fallback.

Google fonts have more than 1400 fonts that you can use.

How to use google fonts?

Text decoration

Adds decoration to text, basically a line.

p {
  text-decoration: underline;
}

The possible values are none underline line-through overline underline overline .

Letter Spacing

As the name suggests, it sets the space between letters.

p {
  letter-spacing: 0.5px;
}

Line Height

Sets the distance between lines.

p {
  line-height: 20px;
}

Text Transform

Controls the capitalization of text.

p {
  text-transform: uppercase;
}

The possible values are uppercase lowercase capitalize.

Text Align

Sets the alignment of text

p {
  text-align: center;
}

The possible values are left right center justify.

Text Shadow

Gives shadow to the text.

p {
  text-shadow: 2px 2px red;
}

In the value, first 2px determines horizontal shadow, second 2px determines vertical shadow and the last value determines the color of the shadow.

Read more about text-shadow at W3Schools.

Exercises 🏌️

Here are some easy and worth practicing exercises on W3Schools.

Source Codes 💠