HTML নথিতে CSS সহ

HTML নথিতে CSS অন্তর্ভুক্ত করতে, আমরা হয় সেগুলিকে অভ্যন্তরীণভাবে অন্তর্ভুক্ত করতে পারি, ইনলাইন করতে পারি বা একটি বহিরাগত ফাইল লিঙ্ক করতে পারি।

সিনট্যাক্স

HTML-এ CSS ফাইলগুলি অন্তর্ভুক্ত করার জন্য সিনট্যাক্স নিম্নরূপ

/*inline*/
<element style="/*declarations*/"></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel="stylesheet" href="#location">
</head>

উদাহরণ

নিম্নলিখিত উদাহরণগুলি HTML নথিতে CSS ফাইলের লিঙ্কিং দেখায়

ইনলাইন CSS

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family: Forte;">Demo text</p>
<p style="background-color: lightblue;">This is Demo text</p>
<img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;">
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয় -

HTML নথিতে CSS সহ

উদাহরণ

অভ্যন্তরীণ লিঙ্কিং

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   padding: 15px;
   width: 33%;
   border: 2px solid;
   border-radius: 5%;
}
div > div {
   border-color: transparent;
   box-shadow: inset 0 0 6px red;
}
div > div > div {
   border-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয় -

HTML নথিতে CSS সহ

উদাহরণ

বাহ্যিক লিঙ্কিং

CSS-এ, আপনি একটি বাহ্যিক CSS ফাইলও অন্তর্ভুক্ত করতে পারেন এবং এতে CSS শৈলী স্থাপন করতে পারেন। নীচের উদাহরণে দেখানো হিসাবে HTML ফাইল থেকে একই উল্লেখ করা যেতে পারে -

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Demo text</p>
<p>Demo text again</p>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট দেয় -

HTML নথিতে CSS সহ

নিচে style.css −

p {
   text-decoration: overline;
   text-transform: capitalize;
}