Text spacing and indentation can be controlled using the following properties:
letter-spacing: This property controls the amount of space between each letter in the text. A positive value will increase the space between letters, while a negative value will decrease it. For example:
h1 {
letter-spacing: 2px;
}
In this example, the space between each letter in all <h1> elements will be increased by 2 pixels.
word-spacing: This property controls the amount of space between each word in the text. A positive value will increase the space between words, while a negative value will decrease it. For example:
p {
word-spacing: -1px;
}
In this example, the space between each word in all <p> elements will be decreased by 1 pixel.
text-indent: This property controls the indentation of the first line of text in a block-level element. A positive value will indent the text, while a negative value will "outdent" it (move it to the left of the left margin). For example:
blockquote {
text-indent: 1em;
}
In this example, the first line of all <blockquote> elements will be indented by 1em (where 1em is equal to the font size of the element).
These CSS properties can be used to adjust the spacing and indentation of text to achieve the desired visual effect.
<!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 usual html code.
p {
width: 400px;
background: yellow;
text-indent: 20px;
letter-spacing: 5px;
word-spacing: 5px;
}
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-indent: 20px;: Indents the first line of text in the paragraph by 20 pixels.letter-spacing: 5px;: Adds 5 pixels of space between each letter in the text.word-spacing: 5px;: Adds 5 pixels of space between each word in the text.
So this code will create a paragraph with a width of 400 pixels and a yellow background color. The text inside the paragraph will have the first line indented by 20 pixels, with 5 pixels of space between each letter and each word in the text.
p {
width: 400px;
background: yellow;
text-indent: 20px;
letter-spacing: 5px;
word-spacing: 5px;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
}
This code will create a paragraph with a width of 400 pixels and a yellow background color.
The text inside the paragraph will have the first line indented by 20 pixels, with 5 pixels of space between each letter and each word in the text.
The text will be centered horizontally within the paragraph, underlined, and in all uppercase letters.
No comments:
Post a Comment