Day 2 - Introduction to CSS

Welcome to CSS! In this lesson, you'll learn what CSS is, why it's essential for web development, and the three ways to apply styles to your HTML.

1. What is CSS?

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

💡 Think of it this way:
If HTML is the "body" of a webpage (structure and content), then CSS is the "clothing" that styles it — controlling colors, fonts, spacing, and layout.

The standard file extension for a CSS file is .css (e.g., styles.css).

2. Why Use CSS?

Using CSS offers several key benefits for web development:

Separates Content from Design: HTML handles the content and structure, while CSS specifically handles the visual look.
Saves Time: You can style multiple pages simultaneously using just one CSS file.
Improves Consistency: It ensures your website maintains a clean, professional, and uniform look throughout.
Responsive Design: It allows you to easily adapt styles for different devices — mobile phones, tablets, and desktops.

3. Types of CSS Styling

There are three primary ways to apply CSS styles to a webpage: Inline, Internal (Embedded), and External.

3.1 Inline Style

Write styles directly inside HTML elements using the style attribute.

Code:

            <!-- HTML -->

            <p
            style="color: red;">Hello</p>
          

Output:

Hello

Characteristics:

❌ Harder to maintain	You must edit each element individually to make changes.
❌ Not reusable	You must repeat styles for every element.
❌ Messy code	Breaks the principle of separating content from presentation.
✓ Highest specificity	Inline styles override other CSS rules (value: 1000).

3.2 Internal Style (Embedded CSS)

Place styles inside a <style> tag within the <head> section of your HTML file.

Code:

            <head>

                <title>Document</title>

                <style>

                    p
            { color:
            red; }

                </style>

            </head>

            <body>

                <p>Hello</p>

            </body>

Characteristics:

✓ Better than inline	More organized and cleaner code structure.
❌ Limited reusability	Styles only work within the same HTML page.
❌ Not ideal for multi-page sites	You must duplicate styles across each HTML file.

3.3 External Style (Recommended ✓)

Store all styles in a separate .css file and link it to your HTML document. This is the best practice for most projects.

Code:

HTML File:

            <head>

                <title>Document</title>

                <link
            rel="stylesheet"

                    href="./styles.css">

            </head>

            <body>

                <p>Hello</p>

            </body>

CSS File (styles.css):

            p {
            color: red;
            }
          

Characteristics:

✓ Most maintainable	Update styles for multiple pages from a single location.
✓ Highly reusable	The same stylesheet can be linked to multiple pages and projects.
✓ Best practice	Keeps HTML clean by completely separating layout from content.
✓ Great for teams	Makes collaboration and version control easier.

4. Quick Comparison

Type	Where It's Written	Reusability	Best For
Inline	Inside HTML element (`style=""`)	None	Quick fixes, testing
Internal	In `<style>` tag in `<head>`	Same page only	Single-page projects
External	Separate `.css` file	Across all pages	Multi-page websites ✓

< Back to Day 2 Index | Next: CSS Syntax >