সিএসএস টিউটোরিয়ালঃ ৩য় পর্ব(স্টাইলসীটের ধরন)

4
581 বার দেখা হয়েছে।

সিএসএস নিয়ে ধারাবাহিক টিউটোরিয়ালের এই পর্বে দেখবো এবং জানবো বিভিন্ন ধরনের সিএসএস সীট নিয়ে। সিএসএস এ ৩ ধরণের স্টাইলসীট রয়েছেঃ

১. External Style Sheet,

২. Internal Style Sheet,

৩. Inline Style Sheet.

এগুলো ক্ষেত্র বিশেষে একেকটা একেক সময়ে বা কখনও প্রয়োজনে একই সাথে ব্যবহার করা হয়। নিচে উপরের কোন স্টাইলসীটের কোডিং কিভাবে লিখতে হয় তা উল্লেখ করা হলঃ

External Style Sheet

এইচটিএমএল ডকুমেন্ট এর হেড(<head></head>) সেকশনের ভিতরে এটাকে লিঙ্ক করে কাজ করতে হয়। মূলত, আলদা style.css ফাইলে সিএসএস এর জন্য সব কোড লিখে, শুধু মাত্র এইচটিএমএল ডকে লিঙ্ক করে দিলেই কাজ করবে। আপনি চাইলে নিজের ইচ্ছা মত স্টাইল শীটের নাম দিতে পারবেন। যেভাবে লিঙ্ক করবেন…

Internal Style Sheet

এইচটিএমএল ডকুমেন্ট এর হেড(<head></head>) সেকশনের ভিতরে একটাকে এমবেড করে কাজ করতে হবে। Internal Style Sheet ও ভার্টিকেলভাবে সিএসএস কোডিং লিখাই ভাল। যেভাবে কোড লিখবেন…

Inline Style Sheet

Inline মানে লাইনের মাঝে। মনে রাখতে হবে এইচটিএমএল ডকুমেন্ট এর বডি(<body> </body>) সেকশনে ইলিমেন্ট/ট্যাগ যেমনঃ body, h1, h2, p, span ইত্যাদি এর ভিতরে style অ্যাট্রিবিউট ডিক্লেয়ার করে যে কোডিং লিখা হয় এটাই হল Inline Style Sheet। মনে রাখবেন, Inline Style Sheet হরিজন্টাল ভাবে লিখাই উতম। নিচে Inline Style Sheet এর কোডিং ফরমেটটি লক্ষ করুনঃ

পরবর্তি পর্বে আসছে CSS এর বিভিন্ন সিলেক্টর নিয়ে। সেই পর্যন্ত সবাই ভাল থাকুন সুস্থ থাকুন!

আর হ্যাঁ,  বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপেপেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন। :)

Series Navigation<< সিএসএস টিউটোরিয়ালঃ ২য় পর্ব(গঠন এবং কোডিং এর পদ্ধতি)সিএসএস টিউটোরিয়ালঃ ৪র্থ পর্ব(সিলেক্টরস পার্ট-১) >>
Print Friendly, PDF & Email

4 COMMENTS

  1. External Style Sheet টাই নতুনদের জন্য সহজ। যেহেতু External Style Sheet এ css আর html দুটো আলাদা ফাইলে থাকে তাই ব্যাপারটা ইজি হয়ে যায় 😉

    • হুম এক্সটারনাল স্টাইল সীট সবার জন্য ভাল এবং এটাই ওয়েব স্টান্ডার্ড। তবে অনেকেই সিঙ্গাল পেজের সাইট হলে ইন্টার্নাল স্টাইল সীট ইউজ করেন, যা মতেও ঠিক না। এতে ওয়েব পেজে লোডিং টাইম ইঙ্ক্রিজ হয়। আর হা, ছোট ছোট লোকাল ইলিমেন্ট(যা সব পেজে থাকে না) কে স্টাইলাইজ করতে ইনলাইন স্টাইল এট্ট্রিবিউট স্টাইল ইউজ করা ভাল, যেমনঃ

      🙂

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.