Download to read offline
TEXT ATTRIBUTES in css and the examples using csss programs.pptx
- 1.
- 2. 1-Text Color: The colorproperty is used to set the color of the text. The color is specified by: •a color name - like "red" •a HEX value - like "#ff0000" •an RGB value - like "rgb(255,0,0)" Look at CSS Color Values for a complete list of possible color values. The default text color for a page is defined in the body selector.
- 3. <html> <head> <style> body { background-color: lightgrey; color: blue; } h1 { background-color: #55AB90; color: white; } div { background-color: RGBA(0,255,89,0.5); color: white; } </style></head> <body> <h1>This is a Heading</h1> <p>This page has a grey background color and a blue text.</p> <div>This is a div.</div> </body> </html>
- 4. 2-Text Alignment: Thetext-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.
- 5. <html><head> <style> h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } </style></head> <body> <h1>Heading 1 (center)</h1> <h2>Heading 2 (left)</h2> <h3>Heading 3 (right)</h3> <p>The three headings above are aligned center, left and right.</p> </body></html>
- 6. 3- Text Decoration: Thetext-decoration-line property is used to add a decoration line to text. text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness text-decoration
- 7. p { text-decoration-line: overline underline; text-decoration-color: purple; text-decoration-style: dashed; } </style> </head> <body> <h1>Overline text decoration</h1> <h2>Line-through text decoration</h2> <h3>Underline text decoration</h3> <h4>Underline text decoration</h4> <p>Overline and underline text decoration.</p> </body> </html> <html> <head> <style> h1 { text-decoration-line: overline; text-decoration-color: red; text-decoration-style: solid; text-decoration-thickness: auto; } h2 { text-decoration-line: line-through; text-decoration-color: blue; text-decoration-style: double; text-decoration-thickness: 5px; } h3 { text-decoration-line: underline; text-decoration-color: green; text-decoration-style: dotted; text-decoration-thickness: 25%; } h4 { text-decoration-line: underline; text-decoration-color: green; text-decoration-style: wavy; }
- 8.