📘 Lesson · Lesson 03

3 Ways to Add CSS

CSS जोड़ने के 3 तरीके

The Three Methods — at a glance

CSS can reach your HTML in three ways, and knowing all three (plus WHEN to use each) is a guaranteed interview question. They differ in one key thing: where the CSS lives — right on the element (inline), in the page's head (internal), or in a separate file linked to many pages (external). The professional default is external — but let's see all three and understand why.

1. Inline CSS — style right on the element

<p style="color: red; font-size: 18px;">Important notice</p>

Important notice ← red, 18px, styled directly on this one element

Uses the style attribute directly on the element (you met this in HTML).
Affects only that ONE element.
Avoid it for real styling: you'd repeat the same style on every element, and it can't be reused or changed in one place.
When it's OK: a quick test, or styles set dynamically by JavaScript later.

2. Internal CSS — a style block in the head

<head>
    <style>
        p { color: gray; }
        h1 { color: navy; text-align: center; }
    </style>
</head>

All p and h1 elements on THIS page get styled - one rule, many elements.

A <style> block inside <head> holds CSS rules.
Affects the whole page — much better than inline.
Limitation: the styles apply to ONE page only. A 50-page site would need this block copied into all 50 files — and changing a colour means editing 50 files.
When it's OK: a single standalone page, or page-specific styles.

3. External CSS — the professional way

/* style.css - a separate file */
p  { color: gray; }
h1 { color: navy; text-align: center; }
.btn { padding: 10px; border-radius: 8px; }

<!-- Link it in the head of EVERY page: -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

Why external CSS wins — this is the key insight: ONE style.css file is linked from every page of your site. Change the heading colour once in that file, and ALL pages update instantly. This is exactly how real websites work — a single stylesheet controls a whole site's look. It also lets the browser CACHE the CSS (download once, reuse on every page = faster site). The <link> tag is the same family you used for favicons. External CSS = maintainable, reusable, fast. Always your default.

Which One to Use — the decision

Method	Scope	Use when
Inline	One element	Quick test / JS-set styles — rarely
Internal	One page	A single standalone page
External	Whole site	Almost always — the default

The cascade note: if the same element is styled by more than one method, inline wins over internal, which wins over external (roughly — full rules in the Specificity chapter). But this is about resolving conflicts, not a reason to mix methods. In practice: put everything in one external stylesheet and keep your project clean.

तीन तरीके — एक नज़र में

CSS आपके HTML तक तीन तरीकों से पहुंच सकती है, और तीनों जानना (साथ में KAB कौन-सा use करना) पक्का interview सवाल है. इनमें एक मुख्य फर्क है: CSS कहां रहती है — सीधे element पर (inline), page के head में (internal), या कई pages से linked अलग file में (external). Professional default external है — पर तीनों देखते हैं और समझते हैं क्यों.

1. Inline CSS — सीधे element पर style

<p style="color: red; font-size: 18px;">Important notice</p>

Important notice ← red, 18px, is ek element par seedha styled

Element पर सीधे style attribute use करता है (HTML में मिल चुका).
सिर्फ उस EK element पर असर.
असली styling के लिए बचिए: हर element पर same style दोहराना पड़ेगा, न reuse हो सकती न एक जगह बदल सकती.
कब ठीक: quick test, या बाद में JavaScript से dynamically set styles.

2. Internal CSS — head में style block

<head>
    <style>
        p { color: gray; }
        h1 { color: navy; text-align: center; }
    </style>
</head>

IS page ke saare p aur h1 elements style hote hain - ek rule, kai elements.

<head> के अंदर <style> block CSS rules रखता है.
पूरे page पर असर — inline से काफी बेहतर.
सीमा: styles सिर्फ EK page पर लगते हैं. 50-page site में यह block 50 files में copy करना पड़े — और colour बदलना यानी 50 files edit.
कब ठीक: अकेला standalone page, या page-specific styles.

3. External CSS — professional तरीका

/* style.css - alag file */
p  { color: gray; }
h1 { color: navy; text-align: center; }
.btn { padding: 10px; border-radius: 8px; }

<!-- HAR page ke head me link karo: -->
<head>
    <link rel="stylesheet" href="style.css">
</head>

External CSS क्यों जीतता है — यही मुख्य बात: EK style.css file आपकी site के हर page से linked. उस file में heading colour एक बार बदलिए, और SAARE pages तुरंत update. असली websites ठीक ऐसे ही काम करती हैं — एक stylesheet पूरी site का look control करती है. इससे browser CSS को CACHE भी कर सकता है (एक बार download, हर page पर reuse = तेज़ site). <link> tag वही family है जो favicons में use की. External CSS = maintainable, reusable, fast. हमेशा आपका default.

कौन-सा Use करें — फैसला

Method	Scope	कब use
Inline	एक element	Quick test / JS-set styles — शायद ही
Internal	एक page	अकेला standalone page
External	पूरी site	लगभग हमेशा — default

Cascade note: अगर एक ही element कई methods से styled हो, inline internal पर जीतता है, internal external पर (मोटे तौर पर — पूरे rules Specificity chapter में). पर यह conflicts सुलझाने की बात है, methods मिलाने की वजह नहीं. Practice में: सब कुछ एक external stylesheet में रखिए और project साफ रखिए.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.