WikiGalaxy
CSS Text Properties
Font Family:
The font-family property specifies the font for an element. You can list multiple fonts as a "fallback" system.
Font Size:
The font-size property sets the size of the text. It can be defined in pixels, ems, or percentages.
Font Weight:
The font-weight property defines the boldness of the text. Common values are normal, bold, and bolder.
Text Align:
The text-align property sets the horizontal alignment of the text. Options include left, right, center, and justify.
Text Decoration:
The text-decoration property adds decorative features such as underline, overline, or line-through.
Line Height:
The line-height property sets the amount of space between lines of text, improving readability.
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-align: justify;
text-decoration: underline;
line-height: 1.5;
}
Font Family:
The font-family property specifies the font for an element. You can list multiple fonts as a "fallback" system.
Font Size:
The font-size property sets the size of the text. It can be defined in pixels, ems, or percentages.
Font Weight:
The font-weight property defines the boldness of the text. Common values are normal, bold, and bolder.
Text Align:
The text-align property sets the horizontal alignment of the text. Options include left, right, center, and justify.
Text Decoration:
The text-decoration property adds decorative features such as underline, overline, or line-through.
Line Height:
The line-height property sets the amount of space between lines of text, improving readability.
Line Height:
The line-height property sets the amount of space between lines of text, improving readability.
Console Output:
Sample Text with CSS Properties Applied
Text Transformations
Text Transform:
The text-transform property controls the capitalization of text. Options include uppercase, lowercase, and capitalize.
Letter Spacing:
The letter-spacing property adjusts the space between characters in a text.
Word Spacing:
The word-spacing property modifies the space between words in a text.
White Space:
The white-space property manages how white space inside an element is handled. Options include normal, nowrap, and pre.
h1 {
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: 5px;
white-space: nowrap;
}
Text Transform:
The text-transform property controls the capitalization of text. Options include uppercase, lowercase, and capitalize.
Letter Spacing:
The letter-spacing property adjusts the space between characters in a text.
Word Spacing:
The word-spacing property modifies the space between words in a text.
White Space:
The white-space property manages how white space inside an element is handled. Options include normal, nowrap, and pre.
Console Output:
THIS IS A SAMPLE TEXT
Text Shadow Effects
Text Shadow:
The text-shadow property adds shadows to text. It takes values for horizontal and vertical shadow, blur radius, and color.
h2 {
text-shadow: 2px 2px 4px #000000;
}
Text Shadow:
The text-shadow property adds shadows to text. It takes values for horizontal and vertical shadow, blur radius, and color.
Console Output:
Text with Shadow Effect
Text Overflow Handling
Text Overflow:
The text-overflow property specifies how overflowed content that is not displayed is signaled to the user. It can be clipped or shown with an ellipsis.
Overflow:
The overflow property controls what happens to content that is too big to fit into an area. It can be set to visible, hidden, scroll, or auto.
White Space:
The white-space property indicates how to handle white space inside an element. It can be set to nowrap for preventing line breaks.
.text-container {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Text Overflow:
The text-overflow property specifies how overflowed content that is not displayed is signaled to the user. It can be clipped or shown with an ellipsis.
Overflow:
The overflow property controls what happens to content that is too big to fit into an area. It can be set to visible, hidden, scroll, or auto.
White Space:
The white-space property indicates how to handle white space inside an element. It can be set to nowrap for preventing line breaks.
Console Output:
This is a very long text...
CSS Font Style
Font Style:
The font-style property specifies the style for a text. Common values are normal, italic, and oblique.
em {
font-style: italic;
}
Font Style:
The font-style property specifies the style for a text. Common values are normal, italic, and oblique.
Console Output:
This text is italicized.
CSS Font Variant
Font Variant:
The font-variant property specifies whether or not a text should be displayed in small-caps font.
p {
font-variant: small-caps;
}
Font Variant:
The font-variant property specifies whether or not a text should be displayed in small-caps font.
Console Output:
This text is in small-caps.
CSS Font Stretch
Font Stretch:
The font-stretch property selects a normal, condensed, or expanded face from a font.
p {
font-stretch: expanded;
}
Font Stretch:
The font-stretch property selects a normal, condensed, or expanded face from a font.
Console Output:
This text is expanded.
CSS Font Smoothing
Font Smoothing:
The font-smoothing property allows for the control of the rendering of fonts to improve readability on different displays.
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Font Smoothing:
The font-smoothing property allows for the control of the rendering of fonts to improve readability on different displays.
Console Output:
Text with improved font smoothing.
