ওয়েব পেজে বিভিন্ন ভাবে সিএসএস স্টাইল কোড ব্যবহার করা যায়। বিভিন্ন পদ্ধতি বিভিন্ন ক্ষেত্রে ব্যবহার করা সুবিধাজনক।
৩ টি পদ্ধতিতে কোন ওয়েব পেজে সিএসএস স্টাইল কোড ব্যবহার করা যায়। এগুলো হল -
কেবল মাত্র একটি এইচটিএমএল এলিমেন্টে কোন সিএসএস স্টাইল কোড ব্যবহার করার জন্য বা কোন এইচটিএমএল এলিমেন্টে ভিন্ন ভিন্ন স্টাইল ব্যবহার করার জন্য এই পদ্ধতি ব্যবহার করা হয়। তবে এই পদ্ধতিতে ভুল হওয়ার সম্ভাবনা বেশী থাকে।
ইনলাইন স্টাইল ব্যবহার করার জন্য, যে এইচটিএমএল এলিমেন্টে স্টাইল করা হবে, ঐ ট্যাগের সাথে style এট্রিবিউট ব্যবহার করতে হয়। style এট্রিবিউট যে কোন সিএসএস প্রপার্টির সাথে ব্যবহার করা যায়।
style এট্রিবিউট ব্যবহার করে নিচে একটি উদাহরণ দেখুন।
<h2 style="color:teal;margin-left:30px;">This is a heading.</h2> <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
যখন একই স্টাইল কোড একাধিক ওয়েব পেজ বা এইচটিএমএল ডকুমেন্ট ব্যবহার করার প্রয়োজন হয় তখন এক্সটারনাল স্টাইল সীট পদ্ধতি ব্যবহার করাই উত্তম। প্রতিটি ওয়েব পেজেই অবশ্যই <link> ট্যাগের মাঝে href আত্ত্রিবুত ব্যবহার করে এক্সটারনাল স্টাইল সীট যুক্ত করে দিতে হয়। এক্ষেত্রে <link> ট্যাগটি অবশ্যই <head> . . . </head> ট্যাগ অর্থাৎ head সেকশনের মাঝে রাখতে হয়।
নিচে একটি উদাহরণ দেখুন।
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> <body> <p> websschool.com is a free bangla tuitorial website. </p> </body>
সিএসএস স্টাইল সীটে কোন এইচটিএমএল ট্যাগ থাকবে না। স্টাইল সীটকে একটি .css এক্সটেনশন যুক্ত "mystyle" নামে একটি file এ সংরক্ষণ বা save করা হয়েছে। ওপরের এইচটিএমএল কোডের জন্য নিচে mystyle.css স্টাইল সীটের নমুনা দেয়া হল -
body { background-color: gray; } p { color: red; font-size: 20px; text-decoration: underline; }
নোট - <link> ট্যাগ ব্যবহার করে স্টাইল সিটকে <body> ... </body> ট্যাগের মাঝে ব্যবহার করা হলেও বেশিরভাগ সিএসএস স্টাইল কোড কাজ করবে, কিন্তু তাও এভাবে ব্যবহার করা উচিৎ না।
নোট - সিএসএস প্রপার্টি গুলোর মান বা value এবং একক বা unit এর মাঝে কোন ফাকা স্থান বা space রাখবেন না, কারন তা ইন্টারনেট এক্সপ্লোরার এ সমর্থন করলেও ফায়ারফক্স বা অপেরা এর আগের সংস্করণে সমর্থন করে না।
যদি এক ধরনের স্টাইল শুধুমাত্র একটি ওয়েব পেজ বা এইচটিএমএল ডকুমেন্টে ব্যবহার করার জন্য প্রয়োজন হয় তবে সেক্ষেত্রে ইন্টারনাল স্টাইল পদ্ধতি ব্যবহার করাই উত্তম। ইন্টারনাল স্টাইল সীট প্রকাশ করা হয় এইচটিএমএল ডকুমেন্টের <head> ট্যাগের ভেতরে, <style> ট্যাগ ব্যবহার করে।
নিচে এর একটি উদাহরণ দেখুন।
<head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
একই ওয়েব পেজে একাধিক পদ্ধতিতে স্টাইল কোড ব্যবহার করা যায়। আবার একটি এইচটিএমএল ডকুমেন্টই একাধিক external স্টাইল সীট ব্যবহার করা যায়।
নিচে এর একটি উদাহরণ দেখুন।
<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> h1 { color: lime; } </style> </head> <body> <h1> This is a heading. </h1> <p> This is a paragraph. </p> </body> </html>