আসসালামুয়ালাইকুম। আশাকরি সবাই আল্লাহর রহমতে ভালো আছেন। এর আগে HTML COLOR সম্পর্কে আলোচনা করছি:
আজ আপনাদেরকে HTML STYLE বা CSS এর সাথে পরিচয় করিয়ে দিব।
HTML ডকুমেন্টটে Styles দেওয়ার জন্য CSS ব্যবহৃত হয়। তিন ভাবে CSS ব্যবহার করা যায়।
প্রত্যেকটি HTML elements এর মধ্যে আলাদা ভাবে style attribute যোগ করে style দিতে হলে HTML এর যে উপাদানকে স্টাইল করা হবে তার Opening ট্যাগের মধ্যে style attribute যোগ করতে হবে। নিচের উদাহরন একটু ভালো ভাবে লক্ষ্য করলেই সহজেই style attribute যোগ করে আপনার HTML এর যে উপাদান গুলোতে ভিবিন্ন স্টাইল দিতে পারবেন।
ছবিটি বড় করে দেখতে এখানে ক্লিক করুন। এখানে আমরা body ট্যাগের মধ্যে
<body style="background-color:#FAEBD7;">
দিয়ে background-color Attribute যোগ করে পুরো HTML Document টির ব্যাকগ্রাউন্ডের রঙ নির্বাচন করে দিয়েছি। Attribute গুলো Opening Tag এর মধ্যে লিখতে হয়। আপনারা যেকোন রঙ দিতে পারবেন, শুধু মাত্র রঙের কোড গুলো পরিবর্তন করে। রঙের কোডের পরিবর্তে নাম ও ব্যবহার করা যায়। যেমনঃ
<p style=color:Green">
এ লেখা গুলো সবুজ রঙের</p> উপাদানটি দিয়ে আমরা এ P ট্যাগের ভিতরের সব লেখার রঙ সবুজ করে দিয়েছি। আরো অনেক গুলো Attribute বা বৈশিষ্ট যোগ করা যায় ট্যাগের ভিতরে। একের অধিক Attribute যোগ করতে Opening Tag এর মধ্যে সবগুলো Attribute একের পর এক সেমিকোলন (;) দিয়ে লিখতে হয়। যা
<p style="font-size:25px; color:Green">
এ লেখাগুলোর ফন্ট সাইজ 25 পিক্সেল এবং সবুজ </p> ট্যাগ লক্ষ্য করলে বুঝতে পারা যায়। এখানে আমরা এ P Tag এর লেখা গুলোকে সবুজ রঙের এবং 25 পিক্সেল বড় করতে চাই, তাই আমরা Attribute গুলো একের পর এক সেমিকোলন দিয়ে (;) লিখছি। এ ভাবে আরো অনেক গুলো Attribute যোগ করা যায়।প্রত্যেকটি HTML elements এর মধ্যে আলাদা ভাবে style attribute যোগ করে style দেওয়ার মধ্যে একটা সুবিধা হচ্ছে এটি শুধু মাত্র ঐ ট্যাগেই কাজ করবে যে ট্যাগে Attribute গুলো বসানো হবে। অন্য ট্যাগে কাজ করবে না।
ছবিটি বড় করে দেখতে এখানে ক্লিক করুন।
HTML head section এ style element গুলো ব্যবহার করে Styles দেওয়ার জন্য head section এ style type এর টাইপ ঠিক করে দিতে হবে। যা লেখা হয় <style> ট্যাগ ব্যবহার করে লেখা হয়।
<style type="text/css">……………</style>
তার পর যে যে ট্যাগের জন্য style দেওয়া হবে যে গুলো লিখে style Attribute গুলো একটি ব্র্যাকেটের মধ্যে (দ্বিতীয় ব্র্যাকেট) লিখতে হয়। একটি ট্যাগের জন্য একের অধিক style Attribute দেওয়া যাবে। যা ; (কমা ) দ্বারা আলাদা করা হয়। এবং style Attribute গুলো লেখা শেষ হলে <style> ট্যাগ শেষ করতে হয়।
HTML head section এ style element গুলো ব্যবহার করে Styles দেওয়ার মধ্যে একটি প্রধান শুবিধা হচ্ছে একটি ট্যাগের জন্য Attribute লিখলে তা সব ট্যাগেই কাজ করবে। উদাহরন হিসেবে বলা যেতে পারে যে, আমরা h1 ট্যাগের জন্য যদি HTML head section এ style element গুলো লিখি তা সকল h1 ট্যাগের জন্যই কাজ করবে। যদি h2 এর জন্য লিখি তা সব h2 ট্যাগের জন্য কাজ করবে। এভাবে সকল ট্যাগের জন্যই কাজ করবে। উপরের উদাহরন লক্ষ্য করতে আপনারা তা সহজেই বুঝতে পারবেন।
আলাদা একটি style sheet ফাইলের মাধ্যমে স্টাইল দেওয়ার জন্য আপনাকে আলাধা একটি CSS ফাইল তৈরি করতে হবে যা আপনার HTML ফাইলটি যে ফোল্ডারে রাখবেন যে ফোল্ডারে রাখতে হবে। অন্য ফোল্ডারে রাখলে ও সমস্যা হবে না, তবে সঠিক ভাবে লিঙ্ক তৈরি করে দিতে হবে। এখন HTML ফাইলটি যে ফোল্ডারে রাখবেন যে ফোল্ডারে রেখে প্র্যাকটিস করুন। style sheet এর যেকোন নাম দেওয়া যায় রবে এক্সটেনশন . CSS দিতে হবে।
তাহলে দেখি কিভাবে কি করবঃ
বড় করে দেখতে এখানে ক্লিক করুন।
প্রথমে CSS Code গুলো একটি নোট প্যডে পেস্ট করুন। test.css নামে বা যেকোন নামে সেভ করুন।
এবার HTML Code গুলো আরেকটি নোটপ্যাডে পেস্ট করে test.html বা যেকোন নাম দিয়ে সেভ করুন। এবার test.html টি ব্রাউজার দিয়ে খুলুন। তাহলে উপরের ফলাফলের মত আপনার ব্রাউজারে দেখতে পাবেন।
এএক্সটার্নাল CSS ফাইল দিয়ে স্টাইল দেওয়ার জন্য HTML ফাইলটির সাথে লিঙ্ক করে দিতে হয়। যা Head Section এ করতে হয়। কোড গুলো লক্ষ্য করুন।
<head>
<link rel="stylesheet"
type="text/css" href="test.css" />
</head>
উপরের কোড গুলো দিয়ে আমরা এএক্সটার্নাল CSS ফাইল এর সাথে আমাদের HTML ফাইলটিকে সংযুক্ত করে দিয়েছি। <link rel="stylesheet" দ্বারা বুঝানো হচ্ছে যে HTML ফাইলটি একটি stylesheet ফাইলের সাথে যুক্ত। এবং নিচে type="text/css" href="test.css" /> কোড গুলো দিয়ে ফাইলের সোর্স দিখিয়ে দেওয়া হয়েছে। এবং ফাইলের টাইফ দিতে হয় text/css
CSS ফাইলের মধ্যে আমরা
body{background-color #B0E0E6;}
দিয়ে পুরো HTML ফাইলের বডি ব্যকগ্রাউন্ডের রঙ নির্দিষ্ট করে দিয়েছি। এখানে রঙের কোড ব্যবহার করছি তবে রঙের নাম ও ব্যবহার করা যাবে।
h1{font-size:25pt; color:blue;}
দিয়ে HTML ট্যাগ h1 এর সাইজ ও রঙ নির্দিষ্ট করে দিয়েছি। এখন যত গুলো h1 ট্যাগ আমরা ব্যবহার করব সব গুলোর সাইজ হবে 25pt এবং কালার বা রঙ হবে নীল। আগে যেখানে প্রত্যেক h1 ট্যাগ এর জন্য আলাধা আলাদা ভাবে কোড লিখতে হত এখন একটি এএক্সটার্নাল CSS ফাইলে লিখে সব গুলোতে সহজেই ব্যবহার করা যায়। একই ভাবে h2 ও p ট্যাগের জন্য ও CSS ফাইলটি ব্যবহৃত হয়েছে।আলাদা একটি style sheet ফাইলের মাধ্যমে স্টাইল কোড গুলো একটি CSS ফাইল লিখে অনেক গুলো HTML ডকুমেন্টে ব্যবহার করা যায়। আর এটিই CSS আসল ব্যবহার। CSS সম্পর্কে পরবর্তিতে ইনশাহআল্লাহ বিস্তারিত আলোচনা করব।
ধন্যবাদ সবাইকে। সাথে অগ্রিম নববর্ষের শুভেচ্ছা।
পরবর্তী পর্ব গুলোঃ
আমি জাকির হোসাইন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 224 টি টিউন ও 1487 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 5 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
পৃথিবীতে অল্পকয়েক দিনের জন্য অনেকেই আসে, হেঁটে খেলে চলে যায়। এর মধ্যে অল্প কয়েক জনই পায়ের চাপ রেখে যায়।ওদের একজন হতে ইচ্ছে করে। প্রযুক্তির আরেকটি সেরা ব্লগ টেকটুইটস। আপনাদের স্বাগতম, যেখানে প্রতিটি বন্ধুর অংশ গ্রহনে গড়ে উঠেছে একটি পরিবার। আপনাদের পছন্দ হবে আশা করি। ফেসবুকে আমি - ?জাকির!
