In CSS, text decoration is a property that is used to modify the appearance of text. It allows you to add a line, underline, overline, or strike-through to the text.
The text-decoration property is used to set the decoration on text. The following values can be used with this property:
none: The default value. No decoration is applied.underline: Adds a line underneath the text.overline: Adds a line above the text.line-through: Adds a line through the text.blink: Adds a blinking line to the text.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam.</p>
</div>
</div>
</body>
</html>
Our simple html code.
p {
width: 400px;
background: yellow;
text-align: left;
text-decoration: overline;
}
This CSS code applies styles to all <p> elements on the page. Here's an explanation of each property and its effect on the element:
width: 400px;: Sets the width of the paragraph to 400 pixels.background: yellow;: Sets the background color of the paragraph to yellow.text-align: left;: Aligns the text inside the paragraph to the left.text-decoration: overline;: Adds a line over the text in the paragraph.
So this code will create a paragraph with a width of 400 pixels and a yellow background color. The text inside the paragraph will be left-aligned, and an overline will be added above the text.
Text transformations refer to changing the appearance of the text by transforming the case of the letters. There are four text transformation properties available in CSS:
text-transform: capitalize;: Capitalizes the first letter of each word in the text.text-transform: uppercase;: Transforms all the letters in the text to uppercase.text-transform: lowercase;: Transforms all the letters in the text to lowercase.text-transform: none;: The default value, which specifies that no transformation should be applied to the text.
p {
width: 400px;
background: yellow;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
This CSS code applies styles to all <p> elements on the page. Here is an explanation of each property and its effect on the element:
width: 400px;: Sets the width of the paragraph to 400 pixels.background: yellow;: Sets the background color of the paragraph to yellow.text-align: left;: Aligns the text inside the paragraph to the left.text-decoration: none;: Removes any text decoration from the paragraph.text-transform: uppercase;: Transforms the text inside the paragraph to all uppercase letters.
So this code will create a paragraph with a width of 400 pixels and a yellow background color. The text inside the paragraph will be left-aligned, without any text decoration, and transformed to all uppercase letters.
No comments:
Post a Comment