Free Coding Ebook 👉 Get Now
Text Styling in CSS
CSS provides a lot of ways to format text including changing color, indentation, adding text-decoration, and a lot more.
CSS Text Color
ADVERTISEMENT
The color CSS property sets the color of a text.
Valid Values:
<color>
Example:
#p1 { color: red; } #p2 { color: rgb(23, 52, 89); }
CSS Text Align
The text-align CSS property sets the horizontal alignment of a text.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Valid Values:
- left: aligns text to the left edge
- center: aligns text to the center
- right: aligns text to the right edge
- justify: aligns text it’s left and right edges to the left and right edges of the line box except for the last line
Example:
#p1 { text-align: left; } #p2 { text-align: center; } #p3 { text-align: right; } #p4 { text-align: justify; }
CSS Text Transform
The text-transform CSS property sets the capitalization of the text.
Valid Values:
- none: prevents the case of the text from being changed
- capitalize: converts the first letter of each word to uppercase; other characters are unchanged
- uppercase: converts a text to uppercase
- lowercase: converts a text to lowercase
#p1 { text-transform: none; } #p2 { text-transform: capitalize; } #p3 { text-transform: uppercase; } #p4 { text-transform: lowercase; }
CSS Text Indent
The text-indent CSS property sets the length of the indentation of a text.
Create A Travel Website Using HTML & CSS
Valid Values:
<length> <percentage>
Example:
#p1 { text-indent: 15px; } #p2 { text-indent: 25%; }
CSS Text Decoration
The text-decoration CSS property sets the text decoration line, color, and style.
The text-decoration CSS property is actually a shorthand for text-decoration-line, text-decoration-style, and text-decoration-color properties.
Note: The text-decoration-line property is required.
text -decoration-line
ADVERTISEMENT
Valid Values:
ADVERTISEMENT
- none: provides no decorative line
- underline: provides a decorative line beneath a text
- overline: provides a decorative line above a text
- line-through: provides a decorative line going through the middle of a text
text-decoration-style Valid Values:
ADVERTISEMENT
- solid: draws a solid line
- dotted: draws a dotted line
- dashed: draws a dashed line
- double: draws a double line
- wavy: draws a wavy line
text-decoration-color Valid Values:
ADVERTISEMENT
<color>
Example:
ADVERTISEMENT
Click the ‘Play It Yourself’ button below to play with all the values.
#p1 { text-decoration: solid dotted red; }
CSS Text Shadow
The text-shadow CSS property adds shadows to text. Each shadow is described by some combination of X and Y offsets from the element, blur radius, and color.
Valid Values:
- <color>: optional; sets the color of the shadow; if this is not defined the value is left up to the user-agent
- offset-x offset-y: required value; it specifies the shadow’s distance from the text; offset-x is the horizontal distance while offset-y is the vertical distance
- blur-radius: optional; defaults to 0; this is a <length> value, it defines the size of the blur/shadow
If the optional values are not present they will be set to their default values.
Example:
#p1 { /* offset-x | offset-y | blur-radius | color */ text-shadow: 2px 2px 3px red; } #p2 { /* color | offset-x | offset-y | blur-radius */ text-shadow: #173459 1px 0 10px; } #p3 { /* offset-x | offset-y | color */ text-shadow: 2px 2px rgb(128, 0, 255); } #p4 { /* color | offset-x | offset-y */ text-shadow: fuchsia 2px 5px; } #p5 { /* offset-x | offset-y */ text-shadow: 1px 3px; }
CSS Letter Spacing
The letter-spacing CSS property sets the length and behavior of the space between letters.
Valid Values:
normal: sets the normal letter spacing for the current font
<length>
Example
#p1 { letter-spacing: normal; } #p2 { letter-spacing: 3px; }
CSS Word Spacing
The word-spacing CSS property sets the length of the space between words.
Portfolio Website using HTML and CSS (Source Code)
Valid Values:
normal: sets the normal word spacing as defined by the browser
<length> <percentage>
Example:
#p1 { word-spacing: normal; } #p2 { word-spacing: 4px; } #p3 { word-spacing: 20%; }
CSS Line Height
The line-height property specifies the amount of space used in lines such as in text.
Valid Values:
- normal: depends on the user agent
- <number>: the value is multiplied by the element’s current font size; this is the preferred way to set line-height
- <length>
- <percentage>
Example:
div { line-height: 3px; }
CSS White Space
The white-space CSS property sets how the white space is handled inside an element.
Valid Values:
- normal: Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
- nowrap: Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
- pre: Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
- pre-wrap: Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
- pre-line: Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Example:
#p1 { white-space: normal; } #p2 { white-space: nowrap; } #p3 { white-space: pre; } #p4 { white-space: pre-wrap; } #p5 { white-space: pre-line; }
CSS Text Direction
The direction CSS property sets the direction of a text (and more).
Tic Tac Toe Game Using HTML,CSS and JavaScript
Valid Values:
- ltr : sets text and other elements go from left to right
- rtl : sets text and other elements go from right to left
Example:
#ltr { direction: ltr; } #rtl { direction: rtl; }
Thanks For Reading!