Table of Contents
Types of CSS introduction
css style को webpage में तीन तरीके से likh सकते है|
- inline css
- internal css
- external css
Inline CSS in Hindi
Inline css में css को हम element के opening tag में style attribute का इस्तेमाल करके css set कर सकते है || style attribute का use करके HTML के सभी elements के लिए css set कर सकते है!. अगर हम inline css का ही इस्तेमाल करते है तो website design manage करना काफी dificult होता है!. inline css use करने के बाद उस element के लिए css file से manage या access नहीं कर सकते उसके आलावा बी कुछ situation में inline css का इस्तेमाल करना काफी मददरूप है!.HTML Elements जैसे की <body>, <h1>to <h6>, <p>,<div> जैसे कई element में style attribute का इस्तेमाल करके inline css सेट कर सकते है!.
Syntax:
<ELEMENTNAME style="properties: value"> .... </ELEMENTNAME>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline-CSS</title>
</head>
<body>
<h1 style="color:red;">This is inlinecss</h1>
<p style = "color:blue; font-size:10px;text-align:center;">
RjtechyG
</p>
<div style = "background-color:#eee;with:150px;height:150px;">THIS IS DIV SECTION</div>
</body>
</html>
Internal css in hindi
Internal css में एक ही document में element का इस्तेमाल करके उसमे css style add कर सकते है || मतलब की internal css को एक ही page में <style> element का इस्तेमाल करके css add कर सकते है!. अगर एक type की css multiple page में सेट करनी होतो सभी pages में वह css का style code add करना पड़ता है!.
Syntax:
<style type="text/css">
selector{
property:value;
property1:value1;
......
}
</style>
Example:
elementname{
property1 : value1;
property2 : value2;
}
OR
.class{
property1 : value1;
property2 : value2;
}
OR
#id{
property1 : value1;
property2 : value2;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline-CSS</title>
<style type="text/css">
h1{
color:red;
}
.main-text{
color:blue;
font-size:10px;
text-align:center;
}
#mydiv{
background-color:#eee;
with:150px;
height:150px;
}
</style>
</head>
<body>
<h1 style="">This is inlinecss</h1>
<p class = "main-text">
RjtechyG
</p>
<div id ="mydiv">THIS IS DIV SECTION</div>
</body>
</html>
External CSS in Hindi
External css में css की अलग file होती है और हमे सभी css style इस में लिखनी होती है और इस file को हम document page में externally link कर सकते है||
external css को create करने के बाद save की जाती css के लिए specific folder में और इस css का extension जो होता है वह .css (style.css) होता है!. इस external created file को web document में link करना होता है कैसे css file को add करते है वह app निचे example में देख सकते है!.
Example:
<head>
<link rel="stylesheet" href="style.css" />
</head>
External css को tags के बीच में element का इस्तेमाल करके add किया जाता है!.
