HTML Stylesheet In Hindi - HTML

Webpage को design करने के लिए inline, internal और external css का इस्तेमाल किया जाता है | इन तीन प्रकार के CSS को एक साथ भी इस्तेमाल किया जा सकता है |

Inline CSS in HTML

inline CSS ये 'style' attribute द्वारा दी जाती है |

Inline CSS ये सिर्फ उसी element पर apply होती है जिस element पर उसे दिया जाता है |

Inline CSS ये अलग-अलग element के लिए अलग-अलग दी जाती है |

style attribute को <head> element पर या <body> element पर define किया जा सकता है |

<body style="background-color:yellow;">
<h1 style="font-size:10px;">Header 1.1</h1>
<h1 style="background-color:red;">Header 1.2</h1>
<h1 style="color:red;">Header 1.3</h1>
<h1 style="font-weight:normal;">Header 1.4</h1>
</body>

Output :

Output के लिए यहाँ click करे |

'style' के बारे में अधिक जानने के लिए यहाँ click करे |

Internal CSS in HTML

Internal CSS ये '<style>' element द्वारा दी जाती है |

Internal CSS ये एक Webpage के सभी elements के लिए होती है | <style> element ये <head> element के अन्दर होती है |

<head>
<style>
body{
background-color:yellow;
}
h1{
background-color:blue;
}
.myclass{
color:red;
}
#myid{
font-weight:normal;
}
</style>
</head>
<body>
<h1>h1{background-color:blue;}</h1>
<h1 class="myclass">.myclass{color:red;}</h1>
<h1 id="myid">#myid{font-weight:normal;}</h1>
</body>

Output :

Output के लिए यहाँ click करे |

External CSS in HTML

External CSS ये '.css' इस extension file द्वारा दी जाती है |

External CSS को webpage पर import करने के लिए <link> element का इस्तेमाल किया जाता है और <link> element को <head > element के अन्दर define किया जाता है |

External CSS का इस्तेमाल एक से ज्यादा webpages पर किया जाता है |

styles.css(external css)

body{
background-color:yellow;
}
h1{
background-color:blue;
}
.myclass{
color:red;
}
#myid{
font-weight:normal;
}

<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>h1{background-color:blue;}</h1>
<h1 class="myclass">.myclass{color:red;}</h1>
<h1 id="myid">#myid{font-weight:normal;}</h1>
</body>

Output :

Output के लिए यहाँ click करे |