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 Transformation

The text-transform property is used to change the capitalization of text.

It can convert text to uppercase, lowercase, capitalize each word, or display the text normally.

How Text Transformation Works

Original Text

→

text-transform

→

Transformed Text

Example 1: Uppercase

The uppercase value converts all letters to capital letters.

CSS Code

p {
    text-transform: uppercase;
}

Output

welcome to css

Example 2: Lowercase

The lowercase value converts all letters to lowercase.

CSS Code

p {
    text-transform: lowercase;
}

Output

WELCOME TO CSS

Example 3: Capitalize

The capitalize value makes the first letter of each word uppercase.

CSS Code

p {
    text-transform: capitalize;
}

Output

learn css step by step

Example 4: None

The none value keeps the original capitalization of the text.

CSS Code

p {
    text-transform: none;
}

Output

CSS Text Example

Common Text Transform Values

Value	Effect
`uppercase`	Converts all letters to uppercase
`lowercase`	Converts all letters to lowercase
`capitalize`	Capitalizes the first letter of each word
`none`	Keeps the original text capitalization

Simple Explanation

uppercase → Converts all letters to capital letters.

lowercase → Converts all letters to small letters.

capitalize → Makes the first letter of each word uppercase.

none → Keeps the original capitalization.

Summary

The text-transform property controls the capitalization of text. Common values are uppercase, lowercase, capitalize, and none.

← Previous: Text Decoration

Next: Text Spacing →