• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top