| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Text Alignment
Text alignment in CSS is controlled using the ‘text-align‘ property. This property specifies the horizontal alignment of text within its containing element.
Values of text-align
- left: Aligns the text to the left.
- right: Aligns the text to the right.
- center: Centers the text.
- justify: Stretches the lines so that each line has equal width (except the last line).
Example
<!DOCTYPE html>
<html>
<head>
<style>
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
.center-align {
text-align: center;
}
.justify-align {
text-align: justify;
}
</style>
</head>
<body>
<div class="left-align">This text is left aligned.</div>
<div class="right-align">This text is right aligned.</div>
<div class="center-align">This text is centered.</div>
<div class="justify-align">This text is justified. It stretches the lines so that each line has equal width, except the last line.</div>
</body>
</html>
Text Decoration
Text decoration in CSS is controlled using the ‘text-decoration‘ property. This property specifies the decoration added to text, such as underlines, overlines, line-throughs, and blink effects.
Values of ‘text-decoration‘
- none: No decoration.
- underline: Underlines the text.
- overline: Adds a line above the text.
- line-through: Adds a line through the text.
- blink: Makes the text blink (note: blinking is generally not recommended for accessibility reasons and is not widely supported).
Example
<!DOCTYPE html>
<html>
<head>
<style>
.no-decoration {
text-decoration: none;
}
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="no-decoration">This text has no decoration.</div>
<div class="underline">This text is underlined.</div>
<div class="overline">This text has an overline.</div>
<div class="line-through">This text has a line through it.</div>
</body>
</html>
Text Transform
Text transform in CSS is controlled using the ‘text-transform‘ property. This property specifies how to capitalize an element’s text.
Values of ‘text-transform‘
- none: No capitalization. The text renders as it is.
- capitalize: Transforms the first character of each word to uppercase.
- uppercase: Transforms all characters to uppercase.
- lowercase: Transforms all characters to lowercase.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.none {
text-transform: none;
}
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
</style>
</head>
<body>
<div class="none">This text is not transformed.</div>
<div class="capitalize">this text is capitalized.</div>
<div class="uppercase">this text is uppercase.</div>
<div class="lowercase">THIS TEXT IS LOWERCASE.</div>
</body>
</html>
Combining Properties
You can combine these properties to achieve various text effects. For instance, you might want to center some underlined, capitalized text.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.styled-text {
text-align: center;
text-decoration: underline;
text-transform: capitalize;
}
</style>
</head>
<body>
<div class="styled-text">this text is centered, underlined, and capitalized.</div>
</body>
</html>
Understanding and using these CSS properties allows you to control the presentation of text on your webpages effectively. By manipulating ‘text-align, text-decoration‘, and ‘text-transform‘, you can enhance readability and improve the overall aesthetic of your content.
