Master CSS From Scratch

Clear, interactive, and structured CSS lessons designed for beginners.

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 & Fonts

CSS provides properties to control the appearance, alignment, size, spacing, and font style of text.

With CSS, we can make text easier to read and create attractive and well-structured web pages.

How CSS Text & Fonts Work

HTML Text Heading / Paragraph
→
CSS Text & Font Properties color / font-size / alignment
→
Styled Text Browser Output

Example 1: Text Color

The color property changes the color of text.

CSS Code 
h1 {
    color: blue;
}
Output

WELCOME TO CIIT TRAINING INSTITUTE 🌍

Example 2: Font Size

The font-size property controls the size of text.

CSS Code 
h2 {
    font-size: 32px;
}
Output

Learn CSS

Example 3: Text Alignment

The text-align property controls the horizontal alignment of text.

CSS Code 
p {
    text-align: center;
}
Output

CSS makes text easy to organize.

Common Text & Font Properties

Property Purpose
color Changes the text color.
font-family Specifies the font type.
font-size Controls the size of text.
font-weight Controls how bold the text appears.
text-align Controls text alignment.
text-decoration Adds underline, overline, or line-through.

Simple Explanation

color → Changes the text color.

font-size → Changes the text size.

font-family → Changes the font style.

font-weight → Makes text normal or bold.

text-align → Aligns text left, center, right, or justify.

Summary

  • CSS can control the appearance of text.
  • Use color to change text color.
  • Use font-size to change text size.
  • Use font-family to select a font.
  • Use text-align to align text.
← Previous: Multiple Backgrounds
Next: Text Color →