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

Introduction to CSS

Learn what CSS is, why it is used, and how it works together with HTML to create attractive web pages.

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used to control the appearance and layout of HTML elements.

HTML creates the structure of a web page. CSS controls how that structure looks.

Simple way to remember:

HTML gives the page its structure.
CSS gives the page its style and design.

How HTML and CSS Work Together

When a browser loads a web page, HTML provides the content and structure, while CSS tells the browser how that content should look.

HTML

Structure and Content

+
CSS

Style and Layout

→
Browser

Styled Web Page

Simple CSS Example

In this example, HTML creates a heading and CSS changes its text color. 

<h1 class="title">Welcome to CSS</h1>

<style>
.title {
    color: blue;
}
</style>

What happens here?

  • The <h1> element creates the heading.
  • The title class identifies the element.
  • The CSS rule changes the text color to blue.

Why Do We Use CSS?

Without CSS, a web page can look very basic. CSS helps developers create clear, attractive, and user-friendly interfaces.

  • Change text and background colors.
  • Change fonts and text appearance.
  • Add margin, padding, and borders.
  • Control the size and position of elements.
  • Create layouts using Flexbox and Grid.
  • Make pages responsive for different screen sizes.
  • Add transitions and animations.

Where is CSS Used?

CSS is used in almost every modern website and web application.

  • Company websites
  • Portfolio websites
  • E-commerce websites
  • Blogs and news websites
  • Web applications
  • Admin dashboards

CSS and HTML

HTML and CSS work together, but they have different responsibilities.

HTML: Creates the structure and content.

CSS: Controls the visual appearance and layout.

Browser: Combines both and displays the final page.

Summary

CSS is used to style and design HTML content. It controls colors, fonts, spacing, borders, layouts, and responsive behavior. HTML provides the structure, while CSS controls the presentation.

Next: How CSS Works →