- In CSS (Cascading Style Sheets), text properties are used to control the appearance and behavior of text within an HTML document. These properties allow you to manipulate the font, size, color, spacing, alignment, decoration, and other aspects of text on a webpage.
Let's explore the text properties in CSS with examples:
Font Family:
- The font-family property specifies the typeface or font to be used for the text. It can be set to multiple values, separated by commas, to provide fallback options in case a font is not available. For example:
body {
font-family: Arial, sans-serif;
}
Font Size:
- The font-size property determines the size of the text. It can be set in various units like pixels (px), points (pt), ems (em), or percentages (%). For example:
h1 {
font-size: 24px;
}
Font Style:
- The font-style property allows you to specify whether the text should be displayed in a normal, italic, or oblique style. For example:
h1 {
font-style: italic;
}
Font Weight:
- The font-weight property controls the thickness or boldness of the text. It can be set to values like normal, bold, or numeric values ranging from 100 to 900, where higher values indicate bolder text. For example:
h1 {
font-weight: bold;
}
Text Color:
- The color property sets the color of the text. It can be specified using various formats, such as named colors, hexadecimal values, RGB values, or HSL values. For example:
p {
color: #333333;
}
Text Alignment:
- The text-align property determines the horizontal alignment of the text within its container. It can be set to values like left, center, right, or justify for justified alignment. For example:
div {
text-align: center;
}
Text Align Last:
- The text-align-last CSS property controls the alignment of the last line of a block of text or the only line if it's a single line. It can be set to values like left, center, right, or justify for justified alignment.
<head>
<style>
.content {
text-align-last: end;
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, omnis expedita quisquam officia error itaque quis
corrupti. Exercitationem cumque asperiores excepturi. Explicabo cupiditate tempore quod eius iure? Perspiciatis,
ipsam aliquam harum eveniet quas quos error, eos dolorem reprehenderit suscipit sint veniam quisquam quis
aliquid voluptates culpa explicabo neque eligendi, debitis ratione iusto molestias. Voluptatibus incidunt
impedit repudiandae dolores fugiat ad omnis dolorum officiis nobis dicta tempora consequatur ea cupiditate
facilis tempore voluptates, architecto veniam eius similique voluptate quam atque eum odit. Commodi aliquam
possimus, excepturi porro, reprehenderit quisquam voluptatum minus id autem ipsa iusto! Nisi recusandae
distinctio magni inventore porro.
</div>
</body>
Text Transformation:
- The text-transform property modifies the capitalization of the text. It can be set to values like uppercase, lowercase, capitalize, or none. For example:
span {
text-transform: uppercase;
}
Line Height:
- The line-height property controls the vertical space between lines of text. It can be set to a specific value or a unitless number. For example:
p {
line-height: 1.5;
}
Letter Spacing:
- The letter-spacing property adjusts the spacing between characters in the text. It can be set to a specific value or a unit like pixels (px) or ems (em). For example:
h2 {
letter-spacing: 2px;
}
Text Indent:
- The text-indent property specifies the indentation of the first line of text within a block element. It can be set to a specific length or a percentage of the width of the containing element. For example:
p {
text-indent: 20px;
}
Text Shadow:
- The text-shadow property adds a shadow effect to the text. It takes multiple comma-separated values, representing the horizontal offset, vertical offset, blur radius, and color of the shadow. For example:
h1 {
text-shadow: 2px 2px 4px #000000;
}
Word Spacing:
- The word-spacing property adjusts the spacing between words in the text. It can be set to a specific value or a unit like pixels (px) or ems (em). For example:
p {
word-spacing: 5px;
}
Direction:
- The direction property in CSS is used to control the text direction, either left-to-right (ltr) or right-to-left (rtl). It affects the layout of text and elements. For example, setting direction: rtl; aligns text from right to left.
<head>
<style>
.rtl-text {
direction: rtl;
}
</style>
</head>
<body>
<h1 class="rtl-text">
Lorem, ipsum dolor.
</h1>
</body>
- The CSS property vertical-align is used to control the vertical alignment of inline-level elements within a line of text or other inline-level elements. It affects how the element is positioned relative to its surrounding content.
- The vertical-align property accepts a variety of values, each of which produces a different alignment effect. Let's explore some of the most commonly used values:
<head>
<style>
span {
vertical-align: sub;
}
</style>
</head>
<body>
<h1 class="rtl-text">
Lorem ipsum, dolor <span> sit</span> amet consectetur elit.
</h1>
</body>
span {
vertical-align: super;
}
span {
vertical-align: 30px;
}
span {
vertical-align: -30px;
}
- The `vertical-align` property allows you to align elements vertically. You can use a percentage to align them relative to the line height or specify an absolute length in pixels or ems. Remember, it only works for inline-level or table-cell elements.
- The `word-wrap` CSS property controls how long words are handled when they exceed the container width. Using `word-wrap: break-word` allows words to break and wrap onto the next line, even within the word itself, if needed.
- Problem:
<head>
<style>
.content {
width: 200px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, omnis expedita quisquam officia error itaque quis
corrupti. Exercitationem cumque asperiores excepturi. Explicabo cupiditate tempore quod eius iure? Perspiciatis,
ipsam aliquam harum eveniet quas quos error, eosdoloremreprehenderitsuscipitsintveniamquisquam quis
aliquid voluptates culpa explicabo neque eligendi, debitis ratione iusto molestias. Voluptatibus incidunt
impedit
</body>
- Solution:
.content {
width: 200px;
border: 2px solid red;
word-wrap: break-word;
}
- The word-break property in CSS controls how words are broken and wrapped when they exceed the width of their container. It specifies whether to break words at the end of a line or within the word itself.
- normal (default): This value allows words to break only at allowed break points, such as spaces or hyphens.
- break-all: This value allows words to break at any character, even within the word itself. This can result in uneven word spacing and may affect readability.
- Example 1:
<head>
<style>
.content {
width: 200px;
border: 2px solid red;
word-break: normal;
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas aliquam nesciunt accusantium ipsum voluptate
ducimus magni, in commodi porro neque est veniam suscipit recusandae repudiandae amet laboriosam eius cum nisi
distinctio quaerat impedit quo sapiente et nulla. Laborum eum beatae voluptatum provident cum? Magni debitis
officiisblanditiisharumdoloresdeseruntipsam, saepe enim id expedita sed veritatis eveniet ullam molestias
necessitatibus inventore repellat esse vero labore, recusandae sit, et autem optio quam? Suscipit tempora
dignissimos ad similique culpa beatae quibusdam maiores rerum.
</body>
- Output 1:
- Example 2:
.content {
width: 200px;
border: 2px solid red;
word-break: break-all;
}
No comments:
Post a Comment