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>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
উদাহরণ
অভ্যন্তরীণ লিঙ্কিং
<!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>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
উদাহরণ
বাহ্যিক লিঙ্কিং
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>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয় -
নিচে style.css −
p { text-decoration: overline; text-transform: capitalize; }