HTML পেজে CSS ইনক্লুড করার তিনটি উপায় রয়েছে। এগুলো হলো:
- ইনলাইন
এখানে আমরা এলিমেন্টের style অ্যাট্রিবিউটে CSS স্টাইলস স্পেসিফাই করি। তবে, ফাইলগুলো মডুলারাইজ করার জন্য ইন্টারনাল বা এক্সটার্নাল লিংকিং রিকমেন্ড করা হয়।
- ইন্টারনাল
আমরা HTML ডকুমেন্টের <head> এর ভিতরে <style> ট্যাগে আমাদের CSS স্পেসিফিকেশন ইনক্লুড করতে পারি।
- এক্সটার্নাল
আমরা .css ফাইলগুলো লোকালি বা সার্ভারে প্লেস করে <link> ট্যাগ ব্যবহার করে লিংক করতে পারি। এক্সটার্নাল লিংকিং ব্যবহার করে ফাইলগুলো রিফ্যাক্টরিং করা আমাদের একটি কমন CSS ফাইল রাখতে দেয় যা একাধিক ওয়েবপেজে ব্যবহার করা যায়।
সিনট্যাক্স
HTML-এ CSS ফাইল ইনক্লুড করার সিনট্যাক্স নিম্নরূপ:
/*inline*/ <element style="/*declarations*/"></element> /*internal*/ <head> <style> /*declarations*/ </style> </head> /*external*/ <head> <link rel="stylesheet" href="#location"> </head>
উদাহরণ
নিচের উদাহরণগুলো ইলাস্ট্রেট করে কিভাবে CSS ফাইলগুলো HTML পেজে ইনক্লুড করা হয়:
ইনলাইন CSS
<!DOCTYPE html> <html> <head> </head> <body> <div style="background-color:mistyrose; height: 50px;"></div> <p style="letter-spacing: 16px; font-size: 1.3em;"> <u>Demo text here</u> </p> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয়:
ইন্টারনাল লিংকিং
<!DOCTYPE html> <html> <head> <style> table, table *{ border: 5px double green; margin: auto; padding: 20px; } tr { box-shadow: 0 0 0 3px red; } td { border-color: blue; } </style> </head> <body> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয়:
এক্সটার্নাল লিংকিং
HTML ফাইল
<!DOCTYPE html> <html> <head> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <div> <div></div> <div> <div></div> </div> <div></div> </div> </body> </html>
CSS ফাইল
div { margin: auto; padding: 15px; width: 33%; border: 2px solid; border-radius: 50%; } div > div { border-color: green; } div > div > div { border-color: red; }
আউটপুট
এটি নিম্নলিখিত আউটপুট দেয়:
