CSS Text & Font Properties

Text Properties :-

There are many CSS Text Properties :-

Text-align

It defines how the text is aligned

text-align: left / start;
text-align: right / end;
text-align: center;
text-align: justify;

This is left text-align.

This is start text-align.

This is right text-align.

This is end text-align.

This is center text-align.

This is justify text-align. This is justify text-align. This is justify text-align. This is justify text-align. This is justify text-align.

text-decoration

sets the appearance of decorative lines on text like underline.
Used in :-

text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
This is underline Text-decoration.

This is overline Text-decoration.

This is line-through Text-decoration.

Text-decoration types :-

<!--Change the color of text-decoration.-->
text-decoration-color: red;
<!--We can also use two values togather.-->
text-decoration: red underline;
text-decoration: wavy overline;
text-decoration: dotted line-through;
This is underline with orange color Text-decoration.

This is underline with red color Text-decoration.

This is wavy overline Text-decoration.

This is wavy underline Text-decoration.

line-height

controls the height of the line of the text.

line-height: normal;
line-height: 2.5;

This is normal line-height.

This is 2.5 line-height.

letter-spacing

controls the horizontal spacing behavior between text characters.

letter-spacing: normal;
letter-spacing: 10px;

This is normal letter-spacing.


This is 10px letter-spacing.

Font Properties :-

There are many CSS Font Properties :-

font-weight

Font-weight scale or range is between 100 to 900.

<!--In this font weight is 400-->
font-weight: normal;
<!--In this font weight is 700-->
font-weight: bold;
font-weight: 100;
<!--Font-weight bolder and lighter is used when we want to make our element darker or lighter than parent element.-->
font-weight: bolder;
font-weight: lighter;
This is normal font weight.
This is bold font weight.
This is 100 font weight.
This is bolder font weight.
This is lighter font weight.

font-size Units

Absolute Relative
px %
pt (72 pt in 1 inch) em
pc (12 pt in 1 pc) rem
cm ch
mm vh
in vw + many more

Pixels (px) :-
Most commonly used absolute unit
96 px = 1 inch
Not suitable for responsive websites.

font-size: 50px;
This has 50px font size.

font-family

specifies a prioritized list of one or more font family names.

font-family: arial;
font-family: avant garde, didotd sans-serif;
font family
This is arial font family.
This is Times New Roman font-family.
This is Segoe UI font-family.
This is monospace font-family.

Note :-

We can visit following websites for all css fonts.

CSS FONTS