CSS Introduction

Learn how to style, design, and beautify websites using CSS.

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the design, layout, colors, fonts, and overall appearance of a web page.

HTML creates the structure of a webpage, while CSS makes it look beautiful. Without CSS, websites would look plain, boring, and hard to use.

Real-Life Example:
HTML is like the skeleton of a human body.
CSS is like clothes, hairstyle, and makeup.

Why Do We Need CSS?

  • Makes websites attractive and user-friendly
  • Separates design from content
  • Saves time by reusing styles
  • Improves website responsiveness
  • Helps maintain large websites easily

Without CSS, every webpage would look like a basic text document.

How Does CSS Work?

CSS works by selecting HTML elements and applying styles to them.

  • Selector → Selects HTML element
  • Property → What you want to change
  • Value → New style value

Basic CSS Syntax


p {
    color: blue;
    font-size: 18px;
}

This code changes all paragraph text to blue and increases the font size.

Types of CSS

There are three ways to apply CSS to HTML:

  • Inline CSS
  • Internal CSS
  • External CSS

1. Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

Inline CSS Example




    This is inline CSS

⚠ Not recommended for large websites because it is hard to maintain.

2. Internal CSS

Internal CSS is written inside a <style> tag within the HTML file.

Internal CSS Example


<style>
    p {
        color: green;
    }
</style>

Useful for small projects or single-page designs.

3. External CSS

External CSS is written in a separate .css file and linked to HTML. This is the best and most professional method.

External CSS Example


<link rel="stylesheet" href="style.css">

✔ Most widely used method in real-world projects.

What Does “Cascading” Mean?

Cascading means CSS follows a priority order when multiple styles are applied.

  • Inline CSS (Highest Priority)
  • Internal CSS
  • External CSS (Lowest Priority)

CSS decides which rule to apply based on priority and specificity.

Best Practices for Beginners

  • Always use external CSS
  • Keep CSS organized and readable
  • Use meaningful class names
  • Avoid inline CSS
  • Practice small layouts daily

Pro Tip: Learn CSS step-by-step — don’t rush into frameworks.