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

This entry is part 9 of 13 in the series সিএসএস

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

১. External Style Sheet,

২. Internal Style Sheet,

৩. Inline Style Sheet.

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

External Style Sheet

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

[html]
<link rel=”stylesheet” type=”text/css” href=”style.css” />
[/html]

Internal Style Sheet

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

[html]
<html>

<head>

body{

background-color: #e3e3e3;

font-family: Tahoma;

font-size: 12px;

color: inheit;

}

</style>

</head>
<body>
Body section….
</body>
</html>
[/html]

Inline Style Sheet

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

[html]
<html>

<h2 style=”font-family:Tahoma, color:green”>This is HEADING</h2>

<p style=”text-align:center;”>This is Paragraph</p>

</body>

</html>
[/html]

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

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

Series Navigation<< সিএসএস টিউটোরিয়ালঃ ৭ম পর্ব(সিলেক্টরস পার্ট-৪)সিএসএস টিউটোরিয়ালঃ ৮ম পর্ব(ফন্ট এবং ফন্ট সাইজ) >>

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

ভাল হয়েছে

chalie jan

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

আরিফুল ইসলাম শাওন says:
January 26, 2013 at 11:00 am
হুম এক্সটারনাল স্টাইল সীট সবার জন্য ভাল এবং এটাই ওয়েব স্টান্ডার্ড। তবে অনেকেই সিঙ্গাল পেজের সাইট হলে ইন্টার্নাল স্টাইল সীট ইউজ করেন, যা মতেও ঠিক না। এতে ওয়েব পেজে লোডিং টাইম ইঙ্ক্রিজ হয়। আর হা, ছোট ছোট লোকাল ইলিমেন্ট(যা সব পেজে থাকে না) কে স্টাইলাইজ করতে ইনলাইন স্টাইল এট্ট্রিবিউট স্টাইল ইউজ করা ভাল, যেমনঃ
[html]
<p style="text-align:center; color:red;">
This is paragraph
</p>
[/html]
🙂
Reply