1. Inline CSS
Inline का मतलब होता है “एक ही लाइन या सीधे टैग के अंदर” लिखा जाता है। मतलब इसे HTML टैग के अंदर ही लिखा जाता है
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="color:rgb(183, 5, 210); " >Hello world </h1>
</body>
</html>Output :
Hello world
Advantage :
- जल्दी Style लगा सकते हैं।
- एक ही Element पर प्रभाव पड़ता है।
Disadvantage :
- Code बड़ा और मुश्किल हो जाता है।
- बार-बार Style लिखनी पड़ती है।
2. Internal CSS
Internal CSS में उसी HTML File के <head> Section के अंदर <style> Tag में लिखा जाता है।
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: REd;
}
p{
color : blue;
}
</style>
</head>
<body>
<h1> Welcome to Codecse </h1>
<p> Learn to HTML , CSS , java , python ,c++ , c programming etc. </p>
</body>
</html>Output :
Welcome to Codecse
Learn to HTML , CSS , java , python ,c++ , c programming etc.
Advantage :
- एक ही पेज के कई Elements को Style कर सकते हैं।
- Code व्यवस्थित रहता है।
Disadvantage :
- दूसरी HTML Files में यह Style काम नहीं करेगी।
3. External CSS
External का मतलब होता है “बाहरी (Outside)”।
इसमें CSS को अलग .css File में लिखा जाता है और HTML से Link किया जाता है।
HTML File
<head>
<link rel="stylesheet" href="style.css">
</head>style.css File
h1{
color: green;
}Advantages :
- एक CSS File से पूरी Website को Style कर सकते हैं।
- Code साफ और Professional रहता है।
- Website Maintain करना आसान होता है।
- Professional website बनाने के लिए External CSS को सबसे ज्यादा उपयोग किया जाता है
Disadvantages :
- CSS File लोड होने में एक अतिरिक्त Request लगती है।
HTML Style All Properties :
| Property | Work |
|---|---|
| color | Text Color |
| background-color | Background Color |
| font-size | Text Size |
| font-family | Font बदलना |
| text-align | Alignment |
| font-weight | Bold Text |
| font-style | Italic Text |
| text-decoration | Underline |
| border | Border लगाना |
| width | चौड़ाई |
| height | ऊंचाई |
| margin | बाहरी दूरी |
| padding | अंदर की दूरी |
| border-radius | गोल कोने |
| display | Layout बदलना |
Learn to Python ( Basic to Advanced )