| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
color property in particular, along with relevant examples.Text Properties in CSS
- color
- text-align
- text-decoration
- text-transform
- text-indent
- line-height
- letter-spacing
- word-spacing
- text-shadow
1. 'color'
The ‘color‘ property in CSS is used to set the color of the text. You can specify colors using various methods:
- Named Colors: ‘
color: red;‘ - Hexadecimal: ‘
color: #ff0000;‘ - RGB: ‘
color: rgb(255, 0, 0);‘ - RGBA: ‘
color: rgba(255, 0, 0, 0.5);'(includes alpha for transparency) - HSL:
color: hsl(0, 100%, 50%); - HSLA: ‘
color: hsla(0, 100%, 50%, 0.5);‘ (includes alpha for transparency)
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Color Example</title>
<style>
.red-text {
color: red; /* Named color */
}
.hex-text {
color: #00ff00; /* Hexadecimal color */
}
.rgb-text {
color: rgb(0, 0, 255); /* RGB color */
}
.rgba-text {
color: rgba(0, 0, 255, 0.5); /* RGBA color with transparency */
}
.hsl-text {
color: hsl(120, 100%, 50%); /* HSL color */
}
.hsla-text {
color: hsla(120, 100%, 50%, 0.5); /* HSLA color with transparency */
}
</style>
</head>
<body>
<p class="red-text">This is red text.</p>
<p class="hex-text">This is green text with hexadecimal color.</p>
<p class="rgb-text">This is blue text with RGB color.</p>
<p class="rgba-text">This is semi-transparent blue text with RGBA color.</p>
<p class="hsl-text">This is green text with HSL color.</p>
<p class="hsla-text">This is semi-transparent green text with HSLA color.</p>
</body>
</html>
2. 'text-align'
The ‘text-align‘ property sets the horizontal alignment of the text.
- ‘
left‘: Aligns text to the left. - ‘
right‘: Aligns text to the right. - ‘
center‘: Centers the text. - ‘
justify‘: Stretches the text to fit the width of the container.
Example:
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
3. 'text-decoration'
The ‘text-decoration‘ property adds decorations to text, such as underlines, overlines, and line-throughs.
- ‘
none‘: No decoration. - ‘
underline‘: Underlines the text. - ‘
overline‘: Adds a line above the text. - ‘
line-through‘: Strikes through the text.
Example:
.no-decoration {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
4. 'text-transform'
The ‘text-transform‘ property controls the capitalization of text.
- ‘
none‘: No transformation. - ‘
capitalize‘: Capitalizes the first letter of each word. - ‘
uppercase‘: Converts all text to uppercase. - ‘
lowercase‘: Converts all text to lowercase.
Example:
.no-transform {
text-transform: none;
}
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
5. 'text-indent'
The ‘text-indent‘ property sets the indentation of the first line of text.
Example:
.indent {
text-indent: 50px;
}
6. 'line-height'
The ‘line-height‘ property sets the height between lines of text.
Example:
.line-height-normal {
line-height: normal;
}
.line-height-custom {
line-height: 1.5; /* 1.5 times the font size */
}
7. 'letter-spacing'
The ‘letter-spacing‘ property controls the space between characters.
Example:
.letter-spacing-normal {
letter-spacing: normal;
}
.letter-spacing-wide {
letter-spacing: 2px;
}
8. 'word-spacing'
The ‘word-spacing‘ property controls the space between words.
Example:
.word-spacing-normal {
word-spacing: normal;
}
.word-spacing-wide {
word-spacing: 10px;
}
9. 'text-shadow'
The ‘text-shadow‘ property adds shadow effects to text.
Example:
.text-shadow {
text-shadow: 2px 2px 5px gray;
}
These examples cover the most common CSS text properties, providing a foundation for controlling the appearance of text in your web pages. You can mix and match these properties to achieve the desired text styling.
