CSS (Cascading Style Sheets) is used to control the style and layout of web pages. Here are some key areas of CSS styling, including text, fonts, outline, alignment, and the !important rule.
1. CSS Text
CSS provides several properties for styling text.
- color: Sets the color of the text.
- text-align: Aligns the text inside an element (left, right, center, justify).
- text-decoration: Adds decoration to text (none, underline, overline, line-through).
- text-transform: Controls the capitalization of text (none, capitalize, uppercase, lowercase).
- text-indent: Indents the first line of text.
- line-height: Sets the height between lines of text.
- letter-spacing: Adjusts the space between characters.
- word-spacing: Adjusts the space between words.
.text-example {
color: blue;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
text-indent: 20px;
line-height: 1.5;
letter-spacing: 2px;
word-spacing: 5px;
}
2. CSS Fonts
CSS allows you to set font properties for text.
- font-family: Specifies the font of the text.
- font-size: Sets the size of the font.
- font-style: Defines the style of the font (normal, italic, oblique).
- font-weight: Sets the weight (boldness) of the font (normal, bold, bolder, lighter, 100-900).
- font-variant: Controls the usage of small-caps.
.font-example {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
3. CSS Outline
The outline properties add a line outside the border edge of an element. They do not affect the size or position of the element.
- outline: A shorthand property for setting outline-width, outline-style, and outline-color in one declaration.
- outline-width: Sets the width of the outline.
- outline-style: Sets the style of the outline (none, solid, dotted, dashed, double, groove, ridge, inset, outset).
- outline-color: Sets the color of the outline.
- outline-offset: Adds space between the outline and the border edge of an element.
.outline-example {
outline: 2px dashed red;
outline-offset: 5px;
}
4. CSS Alignment
CSS provides properties for aligning elements and their content.
- vertical-align: Aligns an element vertically relative to its parent element (baseline, bottom, middle, top).
- text-align: Aligns text horizontally inside an element (left, right, center, justify).
- float: Specifies whether an element should float to the left, right, or not at all.
- clear: Specifies what elements can float beside the cleared element and on which side (left, right, both, none).
- display: Controls the layout behavior of an element (block, inline, inline-block, flex, grid, none).
- position: Specifies the type of positioning method used for an element (static, relative, absolute, fixed, sticky).
.alignment-example {
text-align: right;
vertical-align: middle;
float: left;
clear: both;
display: flex;
position: relative;
}
5. Important
- The !important rule in CSS is used to add more importance to a property/value than normal. It overrides any other declarations, regardless of specificity.
.important-example {
color: blue !important;
font-size: 20px;
}
.less-important {
color: red;
}
<p class="less-important important-example">This text will be blue, not red, because of !important.</p>
Usage Examples
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styling Examples</title>
<style>
.text-example {
color: blue;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
text-indent: 20px;
line-height: 1.5;
letter-spacing: 2px;
word-spacing: 5px;
}
.font-example {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
}
.outline-example {
outline: 2px dashed red;
outline-offset: 5px;
}
.alignment-example {
text-align: right;
vertical-align: middle;
float: left;
clear: both;
display: flex;
position: relative;
}
.important-example {
color: blue !important;
font-size: 20px;
}
.less-important {
color: red;
}
</style>
</head>
<body>
<p class="text-example">This is a text example with various text properties applied.</p>
<p class="font-example">This is a font example with various font properties applied.</p>
<div class="outline-example">This div has an outline with properties applied.</div>
<div class="alignment-example">This div has alignment properties applied.</div>
<p class="less-important important-example">This text will be blue, not red, because of !important.</p>
</body>
</html>
No comments:
Post a Comment