Css Text Formatting
Download as PPTX, PDF0 likes782 views
This document discusses CSS text formatting properties including text color, alignment, decoration, transformation, indentation, letter spacing, and line height. It provides examples of how each property can be used by specifying the property name and value in a CSS style rule. For example, to center align text the text-align property is set to center. Various text formatting properties allow control over text color, positioning, effects, spacing, and other visual aspects through CSS.
Css Text Formatting
- 1. CSS Text Formatting Dr.G.Jasmine Beulah Assistant Professor, Kristu Jayanti College, Bengaluru
- 2. CSS Text Formatting CSS text formatting properties is used to format text and style text. CSS text formatting include following properties: 1.Text-color 2.Text-alignment 3.Text-decoration 4.Text-transformation 5.Text-indentation 6.Letter spacing 7.Line height 8.Text-direction 9.Text-shadow 10.Word spacing
- 3. 1.TEXT COLOR • Text-color property is used to set the color of the text. Text-color can be set by using the name “red”, hex value “#ff0000” or by its RGB value“rgb(255, 0, 0). • Syntax: body { color:color name; }
- 4. <!DOCTYPE html> <html> <head> <style> h1 { color:red; } h2 { color:green; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> TEXT FORMATTING </h2> </body> </html>
- 5. 2.TEXT ALIGNMENT • Text alignment property is used to set the horizontal alignment of the text. The text can be set to left, right, centered and justified alignment. In justified alignment, line is stretched such that left and right margins are straight. • Syntax: body { text-align:alignment type; }
- 6. <!DOCTYPE html> <html> <head> <style> h1 { color:red; text-align:center; } h2 { color:green; text-align:left; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> TEXT FORMATTING </h2> </body> </html>
- 7. 3.TEXT DECORATION • Text decoration is used to add or remove decorations from the text. Text decoration can be underline, overline, line-through or none. • Syntax: body { text-decoration:decoration type; }
- 8. <!DOCTYPE html> <html> <head> <style> h1 { color:red; text-decoration:overline; } </style> </head> <body> <h1> GEEKS FOR GEEKS </h1> <h2> TEXT FORMATTING </h2> </body> </html>
- 9. 4.TEXT TRANSFORMATION • Text transformation property is used to change the case of text, uppercase or lowercase. Text transformation can be uppercase, lowercase or captitalise . Capitalise is used to change the first letter of each word to uppercase. • Syntax: body { text-transform:type; }
- 10. <!DOCTYPE html> <html> <head> <style> h2 { text-transform:lowercase; } </style> </head> <body> <h1> Internet Technology </h1> <h2> Learning CSS </h2> </body> </html>
- 11. 5.TEXT INDENTATION • Text indentation property is used to indent the first line of the paragraph. The size can be in px, cm, pt. • Syntax: body { text-indent:size; }
- 12. !DOCTYPE html> <html> <head> <style> h2 { text-indent:80px; } </style> </head> <body> <h1> Styling with CSS </h1> <h2> This is text formatting properties.<br> Text indentation property is used to indent the first line of the paragraph. </h2> </body> </html>
- 13. 6.LETTER SPACING This property is used to specify the space between the characters of the text. The size can be given in px. Syntax: body { letter-spacing:size; }
- 14. <!DOCTYPE html> <html> <head> <style> h2 { letter-spacing:4px; } </style> </head> <body> <h1> Internet Technology </h1> <h2> This is text formatting properties. </h2> </body> </html>
- 15. 7.LINE HEIGHT This property is used to set the space between the lines. Syntax: body { line-height:size; }
- 16. <!DOCTYPE html> <html> <head> <style> h2 { line-height:40px; } </style> </head> <body> <h1> Internet Technology </h1> <h2> This is text formatting properties.<br> This property is used to set the space between the lines. </h2> </body> </html>