Certainly! CSS (Cascading Style Sheets) provides a variety of text-related properties that allow you to control the appearance of text on a webpage. Here are some of the key text properties along with their syntax and examples:
1. font-family:
In CSS, the font-family property is used to define the preferred font for an element. It specifies a prioritized list of font family names or generic family names for the text content of an element. If the preferred font is not available, the browser will attempt to use the next font in the list, and so on. If none of the specified fonts are available, the browser will use its default font.
There are some Generic font families include:
serif: Generic font family for serif fonts.sans-serif: Generic font family for sans-serif fonts.monospace: Generic font family for monospaced (fixed-width) fonts.cursive: Generic font family for cursive fonts.fantasy: Generic font family for fantasy-style fonts.
Syntax:
selector {
font-family: value;
}
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Text Formatting</title>
<style>
h1{
font-family:’Gill Sans’, ‘Gill Sans MT’, Calibri, ‘Trebuchet MS’, sans-serif;
}
</style>
</head>
<body>
<h1>Font-Family Property</h1>
</body>
</html>
Output:
We can also use online fonts in CSS. Many Websites provides various types of fonts for free e.g. Google Fonts.
2. font-size:
In CSS (Cascading Style Sheets), the font-size property is used to set the size of text within an element. It determines the height of the font characters, usually specified in various units like pixels, ems, rems, percentages, etc.
Syntax:
selector {
font-size: value;
}
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Text Formatting</title>
<style>
h1{
font-size:70px;}
</style>
</head>
<body>
<h1>Font-size Property</h1>
</body>
</html>
Output:
3. font-Weight:
In CSS, the font-weight property is used to define the thickness or boldness of the characters in a text. It allows you to specify whether the text should be displayed in a normal, bold, or other variations of font weight.
The font-weight property accepts several values:
-
normal: This is the default value. It specifies normal characters.
-
bold: This value makes the text bold.
-
bolder: This value increases the font weight relative to the parent element.
-
lighter: This value decreases the font weight relative to the parent element.
-
100 to 900: You can also specify numeric values between 100 and 900 to set an exact font weight. Common values include 100, 200, 300 (light), 400 (normal), 500 (medium), 600 (semi-bold), 700 (bold), 800 (extra-bold), and 900 (ultra-bold).
Syntax:
selector {
font-wight: value;
}
Example:
Output:
4. font-style:
In CSS, the font-style property is used to specify the style of the font for a text element. It controls whether the text should be displayed in a normal, italic, or oblique style. The font-style property can take the following values:
- normal: This is the default value. Text is displayed in a normal, upright style.
- italic: Text is displayed in an italic style. This often provides a cursive or slanted appearance.
- oblique: Text is displayed in an oblique style, which is similar to italic but less formal. Some browsers may simulate italic by using oblique.
Syntax:
selector {
font-style: value;
}
Example:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Text Formatting</title><style>h1 {font-size: 70px;}/*normal font style*/
#para1{font-style: normal;}/*italic font style*/#para2{font-style: italic;}/*oblique font style*/#para3{font-style: oblique;}</style></head><body><h1>Font-style Property</h1><p id=”para1″>I am Normal</p><p id=”para2″>I am Italic</p><p id=”para3″>I am Oblique</p></body></html>
Output:
5. color:
In CSS, the color property is used to set the color of text. It can be applied to various HTML elements to control the text color. The color property accepts a variety of color values, including named colors, hexadecimal values, RGB values, and more.
Syntax:
selector {
color: value;
}
Example:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Text Formatting</title><style>body {color: #333;/* Hexadecimal color value */}h1 {color: red;/* Named color value */}p {color: rgb(0, 128, 255);/* RGB color value */}</style></head><body><h1>color Property</h1><h2>CSS Colors</h2><p>This is a colored paragraph</p></body></html>
Output:
6. Text-align:
The text-align property in CSS is used to specify the horizontal alignment of text content within an element. It affects the alignment of the inline content or the text inside a block-level element. The property can take several values, each influencing how the text is aligned:
- left: Aligns the text to the left edge of the containing element.
-
right: Aligns the text to the right edge of the containing element.
-
center: Centers the text horizontally within the containing element.
- justify: Expands the spaces between words in a line so that each line has equal width, creating a justified text block.
Syntax:
selector {
text-align: value;
}
Example:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Text Formatting</title><style>h1 {text-align: center;}#para1 {text-align: left;}#para2 {text-align: right;}#para3 {text-align: center;}#para4 {text-align: justify;}</style></head><body><h1>Text-Align Property</h1><p id=”para1″>I am align left</p><p id=”para2″>I am align right</p><p id=”para3″>I am align center</p><p id=”para4″>This is an example of justified text. Justified text has even spacing between words in each line.</p></body></html>
Output:
7. text-decoration:
In CSS, the text-decoration property is used to control the decoration of text. Text decoration typically refers to things like underlining, overlining, and striking through text. The text-decoration property can take several values:
- none: This is the default value, and it removes any text decoration.
- underline: Adds a line beneath the text.
-
overline: Adds a line above the text.
-
line-through: Adds a line through the middle of the text, creating a strikethrough effect.
- underline overline line-through: You can also combine multiple values.
Syntax:
selector {
text-decoration: value;
}
Example:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Text Formatting</title><style>h1 {text-align: center;}#para1 {text-decoration: none;}#para2 {text-decoration: underline;}#para3 {text-decoration: overline;}#para4 {text-decoration: line-through;}#para5 {text-decoration: underline overline line-through;}</style></head><body><h1>Text-Decoration Property</h1><p id=”para1″>My Text-decoration is none.</p><p id=”para2″>My Text-decoration is underline.</p><p id=”para3″>My Text-decoration is overline.</p><p id=”para4″>My Text-decoration is line-through.</p><p id=”para5″>My Text-decoration is (underline overline line-through.)</p></body></html>Output:
8. line-height:
In CSS, the line-height property is used to specify the height of a line of text. It determines the amount of space above and below the inline content of an element, effectively controlling the vertical spacing between lines.
The line-height property can be set using various units, such as:
-
Normal: This is the default value. It allows the browser to automatically set the optimal line height based on the font size of the text.
- Number: You can set a unitless number, which is a multiplier of the font size. For example, a value of
1.5means the line height is 1.5 times the font size. -
Length: You can also set the line height using a specific length value, such as pixels or em units.
Syntax:
selector {
text-height: value;
}
Example:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Text Formatting</title><style>h1 {text-align: center;}#para1 {line-height: normal;}#para2 {line-height: 3.9;}#para3 {line-height: 100px;;}</style></head><body><h1>line-height Property</h1><p id=”para1″>My line-height is normal.</p><p id=”para2″>My Text-decoration is 3.9.</p><p id=”para3″>My line-height is 100px.</p></body></html>
Output:
9. letter-spacing:
In CSS, the letter-spacing property is used to control the amount of space between characters (letters) in a piece of text. It allows you to adjust the spacing between characters either by increasing or decreasing the default spacing.
Value Specifies the amount of space to be added or removed between characters. It can be a positive value (to increase spacing) or a negative value (to decrease spacing).
-
Positive Value: It Increases the spacing between Characters.
- Negative Value: It Decreases the spacing between Characters.
Syntax:
selector {
letter-spacing: value;
}
Example:
<!DOCTYPE html>
<html lang=”en”><head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Text Formatting</title>
<style>
h1 {
text-align: center;}
#para1 {
letter-spacing: 5px;
}#para2 {
letter-spacing: -1px;
}</style>
</head><body>
<h1>letter-spacing Property</h1>
<p id=”para1″>It Increases the spacing between Characters.</p>
<p id=”para2″>It decreases the spacing between Characters.</p>
</body></html>
Output:
10. text-transform:
The text-transform property in CSS is used to control the capitalization of text. It allows you to change the appearance of text by transforming it to uppercase, lowercase, or capitalize the first letter of each word.
Here are the possible values for the text-transform property:
-
uppercase: Converts all characters in the text to uppercase.
- lowercase: Converts all characters in the text to lowercase.
-
capitalize: Capitalizes the first character of each word.
-
none: Default value. No capitalization transformation is applied.
Syntax:
selector {
text-transform: value;
}
Example:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Text Formatting</title><style>h1 {text-align: center;}#para1 {text-transform: uppercase;}#para2 {text-transform: lowercase;}#para3 {text-transform: capitalize;}#para4 {text-transform: none;}</style></head><body><h1>Text-Transform Property</h1><p id=”para1″>This text is in uppercase.</p><p id=”para2″>This text is in lowercase.</p><p id=”para3″>This text is in capitalized..</p><p id=”para4″>This text is in its normal case.</p></body></html>
Output:
11. text-Shadow:
CSS text-shadow is a property used to add a shadow effect to text. It allows you to specify the color, blur radius, and horizontal and vertical offset of the shadow relative to the text.
Syntax:
text-shadow: h-shadow v-shadow blur-radius color;
h-shadow: Specifies the horizontal offset of the shadow. A positive value moves the shadow to the right, while a negative value moves it to the left.v-shadow: Specifies the vertical offset of the shadow. A positive value moves the shadow downwards, while a negative value moves it upwards.blur-radius: Optional. Specifies the blur radius of the shadow. A higher value creates a more blurred effect. If omitted, the shadow is sharp.color: Specifies the color of the shadow. It can be any valid CSS color value, including color names, hexadecimal, RGB, or HSL values.
Example:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″><meta name=”viewport” content=”width=device-width, initial-scale=1.0″><title>Text Formatting</title><style>h1 {text-shadow: 2px 2px 4px rgba(234, 31, 31, 0.5);}
</style></head><body><h1>Text-Shadow Property</h1></body></html>
Output:
