CSS Text
CSS text properties control the appearance of text on a web page. You can adjust various aspects of a text, such as its font, size, color, alignment, and spacing to enhance readability and design.
1. Font Properties
1) font-family
The font-family property specifies the typeface to be used for text. You can list multiple fonts as a fallback.
• Specific font names: Arial, Verdana, Georgia, etc.
• Generic font families: serif, sans-serif, monospace, cursive, fantasy.
Example:
Output:
In this example:
• font-family: ‘Arial’, sans-serif;: Sets the font for the text within this element.
• ‘Arial’: The primary font. It will be used if Arial is available on the user’s device.
• sans-serif: A generic font family. If Arial is unavailable, the browser will use any available sans-serif font.
• background-color: lightgray;: Sets the background color of the <div> to light gray.
2) font-size
The font-size property sets the size of the text. You can use units like pixels (px), ems (em), or percentages (%).
Example:
<head>
<style>
.font-size-example {
font-size: 24px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class=”font-size-example”>Font Size: 24px</div>
<div>Nomal Font Size</div>
</body>
Output:
In this example:
• font-size: 24px;: Sets the font size of the text within this element to 24 pixels.
• background-color: lightblue;: Sets the background color of the <div> to light blue.
3) font-weight
The font-weight property defines the thickness of the text. Common values include normal, bold, bolder, and numerical values like 100, 400, 700.
Example:
<head>
<style>
.font-weight-example {
font-weight: bold;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class=”font-weight-example”>Font Weight: Bold</div>
<div>Normal Font Weight</div>
</body>
Output:
In this example:
• font-weight: bold;: Makes the text inside elements with this class appear bold.
• background-color: lightgreen;: Sets the background color of the element to light green.
4) font-style
The font-style property specifies the style of the text. Common values are normal, italic, and oblique.
Example:
<head>
<style>
.font-style-example {
font-style: italic;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class=”font-style-example”>Font Style: Italic</div>
<div>Normal Font Style</div>
</body>
Output:
In this example:
• font-style: italic;: Applies italic styling to the text within elements that have this class. Italic text is slanted to the right, often used for emphasis or stylistic purposes.
• background-color: lightcoral;: Sets the background color of the element to light coral.
5) font-variant
The font-variant property controls the use of alternate glyphs, such as small-caps. It has values like normal, small-caps, and all-small-caps.
Example:
<head>
<style>
.font-variant-example1 {
font-variant: small-caps;
}
.font-variant-example2 {
font-variant: all-small-caps;
}
</style>
</head>
<body>
<div class=”font-variant-example1″>Font Variant: Small Caps</div>
<div class=”font-variant-example2″>Font Variant: All Small Caps</div>
<div>Normal Font Variant</div>
</body>
Output:
In this example:
• font-variant: small-caps;: This CSS property changes the text to use small capital letters where lowercase letters are transformed into smaller versions of capital letters, while actual uppercase letters remain the same size.
• font-variant: all-small-caps;: This CSS property transforms all letters into small capital letters, regardless of whether they were originally uppercase or lowercase.
6) font
The font property is a shorthand for setting multiple font-related properties in one line. It can include font-style, font-variant, font-weight, font-size, and line-height, and the font-family.
Example:
<head>
<style>
.font-example {
font: italic bold 20px ‘Arial’, sans-serif;
background-color: lightpink;
}
</style>
</head>
<body>
<div class=”font-example”>Font: italic bold 20px Arial</div>
</body>
Output:
In this example:
• font: italic bold 20px ‘Arial’, sans-serif;: This is a shorthand property for setting the font style, weight, size, and family.
• italic: Applies italic style to the text.
• bold: Sets the font weight to bold.
• 20px: Specifies the font size as 20 pixels.
• ‘Arial’: Sets the primary font family to Arial.
• sans-serif: Provides a fallback font family if Arial is not available, using any generic sans-serif font.
• background-color: lightpink;: Sets the background color of the <div> to light pink.
7) line-height
The line-height property sets the space between lines of text. It can be defined in pixels (px), ems (em), or as a unitless multiplier.
Example:
<head>
<style>
.line-height-example {
line-height: 1.5;
}
</style>
</head>
<body>
<div class=”line-height-example”>Line Height: 1.5 1) First line</div>
<div class=”line-height-example”>Line Height: 1.5 2) Second line</div>
<div>Normal Line Height 1) First line</div>
<div>Normal Line Height 2) Second line</div>
<div>Normal Line Height 3) Third line</div>
</body>
Output:
In this example:
• line-height: 1.5;: Sets the line height of the text within elements with this class to 1.5 times the font size. This means there will be more vertical space between lines of text.
2. Text Alignment and Decoration
1) text-align
The text-align property sets the horizontal alignment of text within an element. Values include left, right, center, and justify.
Example:
<head>
<style>
.text-align-example {
text-align: center;
background-color: lightseagreen;
}
</style>
</head>
<body>
<div class=”text-align-example”>Text Align: Center</div>
<div>Normal Text Alignment</div>
</body>
Output:
In this example:
• line-height: 1.5;: Sets the line height of the text within elements with this class to 1.5 times the font size. This means there will be more vertical space between lines of text.
2) text-transform
The text-transform property controls the capitalization of text. Values include uppercase, lowercase, capitalize, and none.
Example:
<head>
<style>
.text-transform-example {
text-transform: uppercase;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class=”text-transform-example”>Text Transform: Uppercase</div>
<div>Normal Text </div>
</body>
Output:
In this example:
• text-transform: uppercase;: This CSS property converts all text within the <div> to uppercase letters, regardless of how the text is originally typed.
• background-color: lightyellow;: Sets the background color of the <div> to light yellow.
3) text-decoration
The text-decoration property adds decoration to text, such as underline, overline, line-through, and none.
Example:
<head>
<style>
.text-decoration-example {
text-decoration: underline;
background-color: lightblue;
}
</style>
</head>
<body>
<div class=”text-decoration-example”>Text Decoration: Underline</div>
<div>Normal Text </div>
</body>
Output:
In this example:
• text-decoration: underline;: Underlines the text within the <div>. This property adds a line underneath the text.
• background-color: lightblue;: Sets the background color of the <div> to light blue.
3. Text Spacing and Indentation
1) letter-spacing
The letter-spacing property adjusts the space between characters in a text.
Example:
<head>
<style>
.letter-spacing-example {
letter-spacing: 2px;
}
</style>
</head>
<body>
<div class=”letter-spacing-example”>Letter Spacing: 2px</div>
<div>Normal Text </div>
</body>
Output:
In this example:
letter-spacing: 2px;: Sets the space between letters in the text to 2 pixels. This means each character will have an additional 2 pixels of space between it and the next character.
2) word-spacing
The word-spacing property sets the space between words.
Example:
<head>
<style>
.word-spacing-example {
word-spacing: 10px;
}
</style>
</head>
<body>
<div class=”word-spacing-example”>Word Spacing: 10px</div>
<div>Normal Text </div>
</body>
Output:
In this example:
word-spacing: 10px;: This property increases the space between words within the <div> to 10 pixels. It adjusts the spacing between words but not between letters or lines.
3) text-indent
The text-indent property sets the indentation of the first line of text in an element.
Example:
<head>
<style>
.text-indent-example {
text-indent: 30px;
}
</style>
</head>
<body>
<div class=”text-indent-example”>Text Indent: 30px</div>
<div>Normal Text </div>
</body>
Output:
In this example:
text-indent: 30px;: This property adds a 30-pixel indentation to the first line of text within the <div>. The indentation moves the first line of text 30 pixels from the left edge of the <div>, creating a visual indentation effect.
4) text-shadow
The text-shadow property sets shadow effects to text.
Example:
<head>
<style>
.text-shadow-example {
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class=”text-shadow-example”>Text Shadow: 2px 2px 4px rgba(0,0,0,0.5)</div>
<div>Normal Text </div>
</body>
Output:
In this example:
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);: This property adds a shadow effect to the text. The text-shadow property takes four values:
• 2px: The horizontal offset of the shadow (2 pixels to the right of the text).
• 2px: The vertical offset of the shadow (2 pixels below the text).
• 4px: The blur radius of the shadow (4 pixels of blur, making the shadow softer).
• rgba(0,0,0,0.5): The color of the shadow, specified using RGBA (red, green, blue, alpha). Here, the shadow is black with 50% opacity (semi-transparent).
4. Text Overflow
1) text-overflow
The text-overflow property controls how overflowed text is handled.
Example:
<head>
<style>
.text-overflow-example {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: lightpink;
}
</style>
</head>
<body>
<div class=”text-overflow-example”>Text Overflow: This text is too long to fit in the box.</div>
<div>Normal Text </div>
</body>
Output:
In this example:
• width: 150px;: Sets the width of the <div> to 150 pixels. The content inside will be constrained to this width.
• white-space: nowrap;: Prevents the text from wrapping onto multiple lines. All text will stay on a single line.
• overflow: hidden;: Hides any text that overflows the boundaries of the <div>. If the text is too long to fit within the specified width, it will be clipped and not visible.
• text-overflow: ellipsis;: Adds an ellipsis (…) at the end of the text that overflows the box. This provides a visual indication that the text is cut off.
• background-color: lightpink;: Sets the background color of the <div> to light pink.
2) white-space
The white-space property controls how white space is handled.
Example:
<head>
<style>
.white-space-example {
white-space: pre-wrap; /* Maintains whitespace and line breaks */
background-color: lightcyan;
}
</style>
</head>
<body>
<div class=”white-space-example”>
White Space: This text
will preserve spaces
and line
breaks.
</div>
<div>Normal Text </div>
</body>
Output:
In this example:
• white-space: pre-wrap;: This property controls how whitespace inside the element is handled.
• pre-wrap preserves both spaces and line breaks from the HTML source. It allows text to wrap normally when it reaches the edge of its container.
• background-color: lightcyan;: Sets the background color of the <div> to light cyan.
Summary
• Font Properties: Control the font type, size, weight, style, and line height.
• Text Alignment and Decoration: Manage text alignment, capitalization, and decoration.
• Text Spacing and Indentation: Adjust the spacing between characters, words, and indentation of the first line.
• Text Overflow: Manage how overflowed text is displayed and how white space is handled.
These CSS text properties provide a range of options to control the appearance and readability of text on your webpage.
Course Video
YouTube Reference :
1) CSS Text in Hindi/Urdu
Practice Scenarios
Scenario 1: Basic Font Styling
Objective: Apply basic font styles to a heading and a paragraph.
Expected Output: A heading with a specific font size, family, and weight, and a paragraph with different text styles.
Output:
Scenario 2: Text Alignment
Objective: Align text to the left, center, and right.
Expected Output: Different alignments for heading and paragraph text.
Output:
Scenario 3: Text Decoration
Objective: Apply text decoration styles such as underline, overline, and line-through.
Expected Output: Text with various decorations applied.
Output:
Scenario 4: Font Size and Line Height
Objective: Adjust font size and line height to improve readability.
Expected Output: A heading and paragraph with different font sizes and line heights.
Output:
Scenario 5: Font Weights and Styles
Objective: Experiment with different font weights and styles.
Expected Output: Text with varying font weights and styles.
Output:
Scenario 6: Font Variation and Transformation
Objective: Apply font variation and transformations to text.
Expected Output: Text with different font variations and transformations applied.
Output:
Scenario 7: Custom Fonts
Objective: Apply font variation and transformations to text.
Expected Output: Text with different font variations and transformations applied.
html
<!DOCTYPE html>
<html>
<head>
<title>Custom Font Example</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap” rel=”stylesheet”>
</head>
<body>
<h1 class=”custom-heading”>This is a custom font heading</h1>
<p class=”custom-paragraph”>This is a paragraph with a custom font.</p>
</body>
</html>
css
.custom-heading {
font-family: ‘Roboto’, sans-serif; /* Custom font from Google Fonts */
font-weight: 700; /* Bold weight */
}
.custom-paragraph {
font-family: ‘Roboto’, sans-serif; /* Custom font from Google Fonts */
font-weight: 400; /* Normal weight */
}
Output:
Scenario 8: Text Shadow Effects
Objective: Apply text-shadow effects to create depth.
Expected Output: Text with different shadow effects.
Output:
Scenario 9: Line Height and Letter Spacing
Objective: Adjust line height and letter spacing for better text readability.
Expected Output: Text with customized line height and letter spacing.
Output:
Scenario 10: Text Overflow
Objective: Handle text overflow with ellipsis and clipping.
Expected Output: Text with overflow handling styles applied.
Output:
