• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Text

← Previous Next →

🔹 What is CSS Text?

CSS provides various properties to style and format text content. These include alignment, decoration, transformation, spacing, and more to enhance readability and presentation.

🔸 Common CSS Text Properties

Property Description
color Sets the color of the text
text-align Aligns text (left, right, center, justify)
text-decoration Adds or removes decorations (underline, etc.)
text-transform Controls capitalization (uppercase/lowercase)
letter-spacing Sets spacing between characters
word-spacing Sets spacing between words
line-height Sets space between lines
text-indent Indents the first line of text
direction Defines the text direction (LTR/RTL)
white-space Controls how whitespace is handled

🔸 Example: Basic Text Styling

<p class="styled-text">This is styled text using multiple text properties.</p>

.styled-text {
  color: darkblue;
  text-align: center;
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 2px;
  word-spacing: 4px;
  line-height: 1.8;
}

🔸 text-align

text-align: left | right | center | justify;

Example:

p {
  text-align: justify;
}

🔸 text-decoration

text-decoration: none | underline | overline | line-through;

Example:

a {
  text-decoration: none;
}

🔸 text-transform

text-transform: uppercase | lowercase | capitalize;

Example:

h2 {
  text-transform: capitalize;
}

🔸 letter-spacing and word-spacing

letter-spacing: 1px;
word-spacing: 5px;

🔸 line-height

line-height: 1.5; /* Ideal readability */

🔸 text-indent

p {
  text-indent: 50px;
}

🟢 Indents the first line of the paragraph.

🔸 white-space

white-space: nowrap | pre | pre-wrap | normal;

Used to control how spaces and line breaks are handled.

Practice Questions

Q1. Center-align a paragraph.

Q2. Underline all <h3> headings.

Q3. Make all text in a .title class uppercase.

Q4. Add 5px space between letters in a paragraph.

Q5. Create double line spacing using line-height.

Q6. Remove underline from all <a> links.

Q7. Indent the first line of a paragraph by 40px.

Q8. Add 10px space between words.

Q9. Align a heading to the right.

Q10. Capitalize the first letter of each word in a heading.

CSS Text Quiz

Q1: Which property aligns text to the center?

A. text-style
B. text-align
C. align-content
D. line-height

Q2: Which value makes all letters capital?

A. capitalize
B. uppercase
C. lower
D. transform

Q3: Which property adds space between characters?

A. spacing
B. line-height
C. letter-spacing
D. word-break

Q4: What does text-decoration: none do?

A. Underlines the text
B. Adds a line-through
C. Removes underline
D. Capitalizes text

Q5: Which property is used to indent the first line of text?

A. margin-left
B. padding
C. text-indent
D. line-indent

Q6: Which value of text-transform capitalizes each word’s first letter?

A. uppercase
B. capitalize
C. lowercase
D. first-letter

Q7: What does line-height: 2; mean?

A. Font is 2px
B. Line spacing is 2x the font size
C. Padding is 2px
D. None of the above

Q8: Which property adjusts space between words?

A. letter-spacing
B. word-spacing
C. text-indent
D. line-height

Q9: What does white-space: nowrap; do?

A. Prevents text from wrapping
B. Wraps text
C. Adds padding
D. Adds margin

Q10: Which property draws a line through the text?

A. underline
B. line-through
C. capitalize
D. stroke
← Previous Next →
Login
Go Back Top