Related Topics
CSS
HTML
Data Structure
CSS
.element-class {
text-indent: 20px; /* Creates a 20px indentation */
}
2. Using Percentage Values:
The
text-indentproperty can also accept a percentage value, which is relative to the width of the containing block.Positive values indent the first line to the right by a percentage of the containing block’s width, while negative values indent it to the left.
Example usage:
.element-class {
text-indent: 10%; /* Creates a 10% indentation */
}
3. Using the Initial Value:
To reset the
text-indentproperty to its initial value, you can use theinitialkeyword.Example usage:
.element-class {
text-indent: initial; /* Resets the text-indent property */
}
It’s important to note that the text-indent property only affects the first line of a block-level element. Subsequent lines are not indented unless you use additional CSS techniques such as padding or margin. The text-indent property is commonly used for creating hanging indents in paragraphs or for formatting lists and blockquotes.
.element-class {
font-stretch: normal;
}
2. ultra-condensed, extra-condensed, condensed, semi-condensed:
These values progressively reduce the width of the font, making it more condensed.
Example usage:
.element-class {
font-stretch: condensed;
}
3. semi-expanded, expanded, extra-expanded, ultra-expanded:
These values progressively increase the width of the font, making it more expanded or stretched.
Example usage:
.element-class {
font-stretch: expanded;
}
4. wider, narrower:
These values can be used to make the font wider or narrower relative to the parent element’s font.
Example usage:
.element-class {
font-stretch: wider;
}
5. Custom values:
Some font families may support additional custom values for
font-stretchthat are specific to the font. These values can vary depending on the font and are not standardized across all fonts.Example usage:
.element-class {
font-stretch: ultra-condensed;
}
It’s important to note that the availability and support of different font-stretch values can vary depending on the font family and the user’s system. Not all fonts provide a wide range of stretch options, so the effect of font-stretch may vary based on the specific font being used.
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff');
}
2. Assign a Font Family Name:
Give a name to your custom font family using the
font-familyproperty. This name will be used to reference the custom font in other CSS rules.Example:
@font-face {
font-family: 'CustomFont';
/* ... */
}
3. Specify the Font Formats:
Declare the file formats of the font files using the
srcproperty. It is recommended to provide multiple formats to ensure cross-browser compatibility.Example:
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff');
}
4. Apply the Custom Font:
Once you have defined the
@font-facerule, you can apply the custom font to any element using thefont-familyproperty.Example:
.element-class {
font-family: 'CustomFont', sans-serif;
}
In the above example, the custom font is assigned the name ‘CustomFont’. You can replace ‘CustomFont’ with your desired name. The src property specifies the path to the font files in different formats (e.g., WOFF, WOFF2). Make sure to provide the correct file paths and formats for your font files.
By using @font-face, you can include custom fonts in your CSS and apply them to specific elements, allowing you to achieve the desired typography and visual style on your web page.
.element-class {
text-transform: none;
}
2. capitalize:
This value capitalizes the first character of each word in the text.
Example usage:
.element-class {
text-transform: capitalize;
}
3. uppercase:
This value converts all the text to uppercase.
Example usage:
.element-class {
text-transform: uppercase;
}
4. lowercase:
This value converts all the text to lowercase.
Example usage:
.element-class {
text-transform: lowercase;
}
5. full-width:
This value transforms the text to use full-width characters, primarily used in East Asian typography.
Example usage:
.element-class {
text-transform: full-width;
}
6. inherit and initial:
These values allow the
text-transformproperty to inherit or be set to its initial value from its parent element.Example usage:
.element-class {
text-transform: inherit;
}
The text-transform property is commonly used to achieve consistent capitalization styles, apply text effects, or adhere to specific typographic requirements. It helps to enhance the visual presentation of text content in CSS.
Popular Category
Topics for You
HTML
Data Structure
Go through our study material. Your Job is awaiting.