Clean • Professional
Ques: What are the main text properties in CSS?
Ans: CSS provides several properties to control the appearance and alignment of text, such as:
| Property | Description | Example |
|---|---|---|
color | Sets text color | color: navy; |
text-align | Aligns text | text-align: center; |
text-transform | Changes case | text-transform: uppercase; |
text-decoration | Adds decoration (underline, line-through) | text-decoration: underline; |
letter-spacing | Space between letters | letter-spacing: 2px; |
line-height | Space between lines | line-height: 1.6; |
Ques: How do you align text in CSS?
Ans: Use the text-align property.
| Value | Description |
|---|---|
left | Aligns text to the left (default) |
right | Aligns text to the right |
center | Centers the text |
justify | Aligns text evenly on both sides |
Example:
p {
text-align: justify;
}
Ques: What is text-transform in CSS?
Ans: It controls the capitalization of text.
| Value | Description |
|---|---|
uppercase | Converts all letters to uppercase |
lowercase | Converts all letters to lowercase |
capitalize | Capitalizes the first letter of each word |
Example:
h2 {
text-transform: capitalize;
}
Ques: How do you underline or remove underline from text?
Ans: Use the text-decoration property.
| Value | Description |
|---|---|
underline | Adds underline |
none | Removes underline |
line-through | Adds strike-through |
overline | Adds a line above text |
Example:
a {
text-decoration: none;
}
Ques: What is text-shadow in CSS?
Ans: text-shadow adds shadow effects to text.
Syntax:
text-shadow: horizontal-offset vertical-offset blur color;
Example:
h1 {
text-shadow: 2px 2px 5px gray;
}
Ques: What is line-height and why is it important?
Ans: line-height defines the space between lines of text.
It improves readability and visual spacing.
Example:
p {
line-height: 1.8;
}
Ques: What are generic font families in CSS?
Ans: Generic font families are broad categories of fonts:
| Family | Description |
|---|---|
serif | Has small strokes at the end of letters (e.g., Times New Roman) |
sans-serif | Clean and modern (e.g., Arial, Helvetica) |
monospace | Fixed-width characters (e.g., Courier New) |
cursive | Imitates handwriting |
fantasy | Decorative or creative styles |
Example:
p {
font-family: "Arial", sans-serif;
}
Ques: How does font-family property work?
Ans: Specifies a priority list of fonts — the browser picks the first available one.
Example:
body {
font-family: "Roboto", "Helvetica Neue", sans-serif;
}
Ques: What is the difference between serif and sans-serif fonts?
| Font Type | Example | Description |
|---|---|---|
| Serif | Times New Roman | Traditional, formal, better for print |
| Sans-serif | Arial, Roboto | Clean, modern, better for screens |
Ques: How can you add custom fonts in CSS?
Ans: Use the @font-face rule to load custom web fonts.
Example:
@font-face {
font-family: 'MyFont';
src: url('MyFont.woff2') format('woff2');
}
body {
font-family: 'MyFont', sans-serif;
}
Ques: What is Google Fonts and how to use it?
Ans: Google Fonts provides free, web-hosted fonts that can be linked directly.
Example:
<link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap>" rel="stylesheet">
body {
font-family: "Poppins", sans-serif;
}
Ques: What are variable fonts?
Ans: Variable fonts are single font files containing multiple weights and styles, allowing dynamic changes via CSS.
Example:
p {
font-variation-settings: "wght" 700;
}
Ques: What is font-weight, font-style, and font-variant?
| Property | Description | Example |
|---|---|---|
font-weight | Controls boldness | font-weight: 700; |
font-style | Italic or normal | font-style: italic; |
font-variant | Small caps effect | font-variant: small-caps; |
Ques: How do you control spacing in text?
| Property | Description | Example |
|---|---|---|
letter-spacing | Space between characters | letter-spacing: 1px; |
word-spacing | Space between words | word-spacing: 5px; |
line-height | Space between lines | line-height: 1.6; |
Ques: What are CSS icons and how are they added?
Ans: You can add icons using:
Example (Font Awesome):
<i class="fa fa-home"></i>
Example (SVG):
<svg width="24" height="24">
<circle cx="12" cy="12" r="10" fill="blue"/>
</svg>