CSS Add करण्याचे 3 मार्ग
Inline, Internal, External CSS
HTML document मध्ये CSS add करण्याचे तीन मार्ग आहेत — Inline, Internal, आणि External. प्रत्येकाचे uses आणि trade-offs वेगळे आहेत.
1. Inline CSS
Inline CSS म्हणजे style attribute थेट HTML element मध्येच लिहिणे. फक्त त्या एका element ला apply होते.
Inline CSS — उदाहरण
<h1 style="color: purple; font-size: 30px;">नमस्कार मराठी Tech!</h1>
<p style="color: red; background-color: yellow;">हा paragraph styled आहे.</p>Inline CSS चा तोटा: Project मोठे झाल्यावर manage करणे कठीण होते. प्रत्येक element साठी वेगळे styles — code repetition होते.
2. Internal CSS
Internal CSS म्हणजे <style> tag HTML file च्या <head> section मध्ये लिहिणे. Same page च्या multiple elements ला apply होते.
Internal CSS — उदाहरण
<!DOCTYPE html>
<html lang="mr">
<head>
<title>मराठी Tech</title>
<style>
/* Internal CSS — <head> मध्येच लिहितात */
h1 {
color: orange;
text-align: center;
}
p {
color: gray;
font-size: 18px;
}
</style>
</head>
<body>
<h1>मराठी Tech</h1>
<p>CSS मराठीत शिका!</p>
</body>
</html>3. External CSS — Best Practice
External CSS म्हणजे स्वतंत्र .css file बनवणे आणि HTML file मध्ये <link> tag ने connect करणे. Multiple HTML files एकाच CSS file वापरू शकतात — सगळ्यात recommended approach.
External CSS — HTML मध्ये link करणे
<!-- HTML file च्या <head> मध्ये -->
<link rel="stylesheet" href="style.css">
<!-- rel="stylesheet" — हे relationship सांगतो
href="style.css" — CSS file चा path -->style.css — External CSS File
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #0a0c12;
color: white;
}
h1 {
color: orange;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
}कोणता Method कधी वापरायचा?
- ▸Inline CSS: Quick testing साठी, किंवा specific एका element ला unique style द्यायची असेल
- ▸Internal CSS: Single page projects, किंवा email templates
- ▸External CSS: Real projects साठी — नेहमी हाच approach वापरा
Priority (कोण जिंकतो): Inline CSS > Internal CSS > External CSS. एकाच element वर तिन्ही apply असतील तर Inline चे styles जिंकतात.
✅ Key Points — लक्षात ठेवा
- ▸Inline: style="" attribute — फक्त त्या element साठी
- ▸Internal: <style> tag <head> मध्ये — same page साठी
- ▸External: .css file + <link> tag — multiple pages साठी (Best)
- ▸Priority: Inline > Internal > External