COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

Text Spacing

CSS provides different properties to control the spacing between letters, words, and lines of text.

The commonly used text spacing properties are letter-spacing, word-spacing, line-height, and text-indent.

How Text Spacing Works

Text

→

Spacing Properties

→

Better Readability

Example 1: Letter Spacing

The letter-spacing property controls the space between individual letters.

CSS Code

h2 {
    letter-spacing: 4px;
}

Output

CIIT TRAINING

Example 2: Word Spacing

The word-spacing property controls the space between words.

CSS Code

p {
    word-spacing: 12px;
}

Output

Welcome to CIIT Training Institute

Example 3: Line Height

The line-height property controls the vertical space between lines of text.

CSS Code

p {
    line-height: 2;
}

Output

CIIT Training Institute provides practical training for students and professionals. Learn programming and development skills step by step.

Example 4: Text Indent

The text-indent property adds space before the first line of text.

CSS Code

p {
    text-indent: 40px;
}

Output

CIIT Training Institute provides practical and structured training designed to build real-world technical skills.

Common Text Spacing Properties

Property	Purpose
`letter-spacing`	Controls space between letters
`word-spacing`	Controls space between words
`line-height`	Controls vertical space between lines
`text-indent`	Adds indentation to the first line

Simple Explanation

letter-spacing → Controls the space between letters.

word-spacing → Controls the space between words.

line-height → Controls the space between lines.

text-indent → Adds space before the first line.

Summary

CSS text spacing properties control the space between letters, words, and lines of text. Common properties include letter-spacing, word-spacing, line-height, and text-indent.

← Previous: Text Transformation

Next: Text Shadow →