| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
1. Line Height ('line-height')
The line-height property in CSS specifies the height of a line of text. It is used to set the amount of space above and below inline elements. It can be set using various units: numbers, percentages, lengths (e.g., px, em), and the keyword normal.
Syntax
line-height: normal | number | length | percentage;
Values
- normal: Default value. The browser calculates a reasonable line height.
- number: A unitless value that is multiplied by the element’s font size.
- length: A specific measurement (e.g., 20px, 1.5em).
- percentage: A percentage of the element’s font size.
Examples
1. Unitless Number:
p {
line-height: 1.5; /* 1.5 times the font size */
}
This means the line height is 1.5 times the current font size.
2. Length:
p {
line-height: 24px;
}
This sets the line height to a fixed 24 pixels.
3. Percentage:
p {
line-height: 150%;
}
This sets the line height to 150% of the font size.
Example Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Line Height Example</title>
<style>
.example1 {
line-height: normal;
}
.example2 {
line-height: 1.5;
}
.example3 {
line-height: 24px;
}
.example4 {
line-height: 150%;
}
</style>
</head>
<body>
<p class="example1">This is a paragraph with normal line height.</p>
<p class="example2">This is a paragraph with 1.5 line height.</p>
<p class="example3">This is a paragraph with 24px line height.</p>
<p class="example4">This is a paragraph with 150% line height.</p>
</body>
</html>
2. Letter Spacing ('letter-spacing')
The ‘letter-spacing‘ property in CSS controls the space between characters in a text. It can be used to increase or decrease the space.
Syntax
letter-spacing: normal | length;
Values
- normal: Default spacing between characters.
- length: Specifies the exact spacing. Positive values increase space; negative values decrease it.
Examples
1. Normal:
p {
letter-spacing: normal;
}
2. Length:
p {
letter-spacing: 2px;
}
Increases the space between characters by 2 pixels.
Example Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Letter Spacing Example</title>
<style>
.example1 {
letter-spacing: normal;
}
.example2 {
letter-spacing: 2px;
}
.example3 {
letter-spacing: -1px;
}
</style>
</head>
<body>
<p class="example1">This is a paragraph with normal letter spacing.</p>
<p class="example2">This is a paragraph with 2px letter spacing.</p>
<p class="example3">This is a paragraph with -1px letter spacing.</p>
</body>
</html>
3. Word Spacing (word-spacing)
The ‘word-spacing‘ property in CSS specifies the space between words. Like letter-spacing, it can increase or decrease the space.
Syntax
word-spacing: normal | length;
Values
- normal: Default spacing between words.
- length: Specifies the exact spacing. Positive values increase space; negative values decrease it.
Examples
1. Normal:
p {
word-spacing: normal;
}
2. Length:
p {
word-spacing: 5px;
}
Increases the space between words by 5 pixels.
Example Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Word Spacing Example</title>
<style>
.example1 {
word-spacing: normal;
}
.example2 {
word-spacing: 5px;
}
.example3 {
word-spacing: -2px;
}
</style>
</head>
<body>
<p class="example1">This is a paragraph with normal word spacing.</p>
<p class="example2">This is a paragraph with 5px word spacing.</p>
<p class="example3">This is a paragraph with -2px word spacing.</p>
</body>
</html>
- Line Height (
line-height): Controls the vertical space between lines of text. - Letter Spacing (
letter-spacing): Controls the horizontal space between characters. - Word Spacing (
word-spacing): Controls the horizontal space between words.
