Code Marathi Logo

Introduction

4 min read ·

CSS (Cascading Style Sheets) is used to style HTML elements. It controls colors, fonts, spacing, layout, and responsiveness of a website.
Think of it like this:
  • HTML → skeleton
  • CSS → clothes & design
Below is a clear explanation + simple CSS code blocks, exactly like beginner-friendly learning platforms.

What CSS Actually Does

CSS tells the browser:
  • Which HTML element to style
  • What style to apply
  • How the page should look
Example meaning in words:

CSS Rule Structure

Every CSS rule has:
Example:
Meaning:
  • p → select paragraph
  • color → property
  • blue → value

Example 1: Basic Internal CSS (Like You Shared)

This example shows:
  • Background color
  • Text color
  • Text alignment
  • Font size

How CSS Is Applied

The browser:
  1. Reads HTML
  2. Reads CSS
  3. Matches selectors
  4. Applies styles

Example 2: Styling Multiple Elements

Here:
  • All <h2> tags get same style
  • All <p> tags get same font and color

CSS Selectors (Basic Types)

1. Element Selector

Applies to all paragraphs.

2. Class Selector

  • Class starts with .
  • Can be reused multiple times

3. ID Selector

  • ID starts with #
  • Used only once per page

Example 3: Styling Using Class

This shows:
  • Border
  • Padding
  • Fixed width

CSS Colors

You can apply colors in different ways.
All represent red.

Example 4: Background and Text Styling

CSS Fonts

Fonts improve readability and design.

Example 5: Text Alignment and Spacing

CSS Box Model (Very Important)

Every element is treated as a box.
Box includes:
  • Content
  • Padding
  • Border
  • Margin
Example:
Understanding this is mandatory for layout design.

CSS Is Not Logic-Based

CSS:
  • Cannot use if/else
  • Cannot use loops
  • Cannot perform calculations like programming languages
CSS only describes appearance.

Why CSS Is Called “Cascading”

If multiple styles apply to the same element, CSS decides which one wins based on:
  • Priority
  • Specificity
  • Order
That’s why it’s called Cascading Style Sheets.

Common Beginner Mistakes

  • Writing all CSS inline
  • Not understanding box model
  • Using fixed sizes everywhere
  • Mixing design with HTML
  • Ignoring class reuse

Why CSS Is Mandatory to Learn

  • Makes websites attractive
  • Improves user experience
  • Enables responsive design
  • Required for frontend jobs
  • Foundation for Flexbox and Grid
  • Used in all modern frameworks