External CSS and HTML Link Tag Explained with Easy Examples

External CSS and HTML Link Tag Explained with Easy Examples

July 8, 2026 2026-07-08 14:14

Code:

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

इसका पूरा विवरण

1. <link>

यह HTML का Empty Tag (Self-Closing Tag) है।
इसका उपयोग किसी बाहरी (External) फ़ाइल को HTML से जोड़ने के लिए किया जाता है।
जैसे: CSS, Icons, Fonts आदि।

2. rel=”stylesheet”

rel का अर्थ है Relationship (संबंध)।
stylesheet बताता है कि जो फ़ाइल जोड़ी जा रही है, वह CSS Stylesheet है।
यानी ब्राउज़र समझ जाता है कि यह डिज़ाइन (Style) की फ़ाइल है।

उदाहरण:

rel=”stylesheet”

अर्थ: यह एक CSS Stylesheet है।

3. href=”style.css”

href का अर्थ है Hypertext Reference।
इसमें CSS फ़ाइल का नाम या उसका Path लिखा जाता है।
यहाँ style.css नाम की CSS फ़ाइल HTML से जुड़ रही है।

उदाहरण:

href=”style.css”

अर्थ: style.css नाम की फ़ाइल को लोड करो।

यदि CSS किसी फ़ोल्डर में हो:

<link rel=”stylesheet” href=”css/style.css”>

यहाँ CSS फ़ाइल css फ़ोल्डर के अंदर है।

यह कैसे काम करता है?

HTML File (index.html)

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<h1>Hello Students</h1>

</body>

</html>

CSS File (style.css)

h1{

    color: blue;

    text-align: center;

}

Output

Hello Students नीले (Blue) रंग में दिखाई देगा।
Text स्क्रीन के बीच (Center) में दिखाई देगा।

इस टैग को कहाँ लिखते हैं?

आमतौर पर <link> टैग को HTML के <head> सेक्शन के अंदर लिखा जाता है।

<head>

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

</head>