Tutorial

Sign Up

log In

CSS
CSS Text

❮ Previous

Next ❯

In CSS, text styling plays a crucial role in defining the appearance of content. There are several properties in CSS that allow you to control the font, alignment, spacing, decoration, and other visual aspects of text.

Text Color:

The color property sets the color of the text.


Syntax:

color : color | transparent | initial | inherit;
Example
p {
color: #333; /* Set text color to dark gray */
}

Try it yourself

Text Alignment:

The text-align property aligns the text within its containing element.


Syntax:

text-align : left | right | center | justify;
Example
p {
text-align: center; /* Align text to the center */
}

Try it yourself
Try It:
Left
Right
Center
Justify

This is the first paragraph.

Currently Active Property:

text-align : left;

Font Family:

The font-family property specifies the typeface of the text. You can provide a list of fallback fonts.

Example
p {
font-family: 'Arial', sans-serif; /* Set text to Arial or a sans-serif font */
}

Try it yourself

Font Size:

The font-size property controls the size of the text.


Syntax:

font-size : <value>;


Value: Can be specified in various units such as pixels (px), percentages (%), ems (em), rems (rem), viewport units (vw, vh), or keywords like auto and inherit.

Example
p {
font-size: 20px; /* Set font size to 18 pixels */
}

Try it yourself

Font Weight:

The font-weight property sets the thickness (or boldness) of the text.


Syntax:

font-weight : normal | bold | lighter | bolder | 100-900;
Example
p {
font-weight: bold; /* Bold text */
}

Try it yourself
Try It:
Normal
Lighter
Bold
Bolder
600

See Text Color

Currently Active Property:

font-weight : normal;

Font Style:

The font-styleproperty sets the thickness (or boldness) of the text.


Syntax:

font-style : normal | italic | oblique;
Example
p {
font-style: italic; /* Italicize the text */
}

Try it yourself
Try It:
Normal
Italic
Oblique

See Text Color

Currently Active Property:

font-style : normal;

Text Decoration:

The text-decoration property is used to set decorations like underlines, overlines, or strikethroughs.


Syntax:

text-decoration : none | underline | line-through | overline;
Example
a {
text-decoration: underline; /* Underline text */
}

Try it yourself
Try It:
None
Underline
Overline
Line-through

See Text Color

Currently Active Property:

text-decoration : none;

Text Transform:

The text-transform property controls the capitalization of the text.


Syntax:

text-transform : none | uppercase | lowercase | capitalize;
Example
p {
text-transform: uppercase; /* Convert text to uppercase */
}

Try it yourself
Try It:
None
Uppercase
Lowercase
Capitalize

See Text Color

Currently Active Property:

text-transform : none;

Line Height:

The line-height property controls the space between lines of text (leading). It’s often used to improve readability.


Syntax:

line-height : <value>;

Value: Can be specified in various units such as pixels (px), percentages (%), ems (em), rems (rem), viewport units (vw, vh), or keywords like auto and inherit.

Example
p {
line-height: 1.5; /* Set line height to 1.5 times the font size */
}

Try it yourself

Letter Spacing:

The letter-spacing property controls the space between individual characters.


Syntax:

letter-spacing : <value>;

Value: Can be specified in various units such as pixels (px), percentages (%), ems (em), rems (rem), viewport units (vw, vh), or keywords like auto and inherit.

Example
p {
letter-spacing: 2px; /* Adds 2px of space between letters */
}

Try it yourself

Word Spacing:

The word-spacing property controls the space between words.


Syntax:

word-spacing : <value>;

Value: Can be specified in various units such as pixels (px), percentages (%), ems (em), rems (rem), viewport units (vw, vh), or keywords like auto and inherit.

Example
p {
word-spacing: 10px; /* Adds 10px space between words */
}

Try it yourself

Text Indentation:

The text-indent property controls the indentation of the first line of text.


Syntax:

text-indent : <value>;

Value: Can be specified in various units such as pixels (px), percentages (%), ems (em), rems (rem), viewport units (vw, vh), or keywords like auto and inherit.

Example
p {
text-indent: 50px; /* Indent the first line by 50px */
}

Try it yourself

White Space:

The white-space property controls how whitespace is handled, including spaces and line breaks.


Syntax:

white-space : <value>;

Value: Can be specified in various units such as pixels (px), percentages (%), ems (em), rems (rem), viewport units (vw, vh), or keywords like auto and inherit.

Example
p {
white-space: nowrap; /* Prevents text from wrapping to the next line */
}

Try it yourself

Text Shadow:

The text-shadow property adds shadows to the text, with options for the shadow's position, blur radius, and color.


Syntax:

text-shadow : [horizontal offset] [vertical offset] [blur radius] [color];


Example
p {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Adds a shadow */
}

Try it yourself
Example of Multiple Text Properties
p {
font-family: 'Verdana', sans-serif;
font-size: 24px;
font-weight: bold;
color: #007BFF;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.