সিএসএস সিম্ফোনীঃ পর্ব-২
ওয়েব ডিজাইনিং এর জগতে সি এস এস এক অনন্য নাম, এর রয়েছে বহুবিধ সুবিধা যার কারণে বর্তমানকালের প্রায় সব সাইটগুলোতেই সি এস এস ব্যবহার করা হয়। বন্ধুরা, সি এস এস সিম্ফোনীর ২য় পর্বে সবাইকে স্বাগত জানাচ্ছি। আজ এ পর্বে আমরা সিএসএস লেখার নিয়ম নিয়ে আলোচনা করব।
প্রথমেই বলে রাখা ভালো, সি এস এস স্টাইল শিট এক্সটারনাল অর্থাৎ এইচ টি এম এল ডকুমেন্ট বা মূল ওয়েব পেইজের বাইরে আলাদা একটি ফাইল হিসেবে থাকতে পারে,আবার মূল এইচ টি এম এল ফাইল বা ওয়েব পেইজেও ডিক্লেয়ার করা যেতে পারে। আবার আপনি চাইলে এইচ টি এম এল ট্যাগের মধ্যেও এটি ডিক্লেয়ার করতে পারেন। সুতরাং, বলা যায় সি এস এস তিনভাবে ডিক্লেয়ার করা যায়।
১) এক্সটার্নাল শিট বা বাহ্যিকভাবে আলাদা ফাইল হিসেবে- এক্ষেত্রে আলাদা একটি ফাইল যা css এক্সটেনশানবিশিষ্ট, এমন একটি ফাইলে স্টাইলগুলো ডিক্লেয়ার করা হয়। ডিক্লেয়ার করা স্টাইলগুলো ওয়েব পেইজ বা এইচ টি এম এল ডকুমেন্টে এইচ টি এম এল ট্যাগে প্রযুক্ত হয়।
২) ইন্টার্নাল সি এস এস- এক্ষেত্রে সি এস এস স্টাইল ডিক্লেয়ার করা হয় এইচ টি এম এল ফাইলের শুরুতে <head> ট্যাগের মধ্যে।
৩) ইনলাইন সি এস এস- এক্ষেত্রে প্রতিটি ট্যাগের মধ্যে শুধুমাত্রে ঐ ট্যাগের জন্য সি এস এস ডিক্লেয়ার করা হয়।
আপনারা হয়তো ভাবছেন, স্টাইল জিনিসটা কিরকম? আসলে সি এস এস এ স্টাইল বলতে মূলত প্রতিটি ট্যাগের মান কেমন হবে তা নির্ধারণ করাকে বোঝায়। যেমন, <h1> একটি এইচ টি এম এল ট্যাগ যার মাধ্যমে শিরোনাম বা হেডিং বোঝানো হয়। অর্থাৎ <h1> এবং </h1> এর মাঝে যা লেখা হবে তা পেইজের শিরোনাম হিসেবে থাকবে।
যেমন
<html>
<head>
</head>
<body>
<h1> WELCOME </h1>
</body>
</html>
এ লেখাটি রান করলে নিচের মত পাওয়া যাবে।
সি এস এস এর কাজ হল এই শিরোনামটি যা এইচ টি এম এল ট্যাগের মাধ্যমে নির্ধারন করা হল, একে পেইজের কোথায় বসাতে হবে,এর রঙ কি হবে, ফন্ট বা সাইজ কত হবে, এগুলো নির্ধারন করা। শুধু তাই নয়, পেইজের ব্যাকগ্রাউন্ড কালার কি হবে, ব্যাকগ্রাউন্ডে কোনো ছবি থাকবে কিনা, বা পেইজে যত লেখা আছে তার দেখতে কেমন হবে ইত্যাদি নির্ধারন করা। অর্থাৎ, একটি পেইজের Outlook বিষয়ক যাবতীয় বৈশিষ্ট্য সি এস এস এর মাধ্যমে নির্ধারন করা হয়। আসুন তাহলে দেখি, আমরা যে শিরোনামটি নির্ধারন করলাম এটিতে কিভাবে সি এস এস এর মাধ্যমে পরিবর্তন ঘটানো যায়।
যে নোটপ্যাডে উপরের কোডটি লিখেছেন তা আবার খুলুন। এবারে এই কোডটিতে নিচের মত আরো কিছু কোড লিখুন <head> ও </head> ট্যাগের মধ্যে।
<html>
<head>
<style type=”text/css”>
h1 {color:blue;text-align:center}
</style>
</head>
<body>
<h1> WELCOME </h1>
</body>
</html>
এখন সেভ করে রান করে দেখুন তো কি হয়?
আসুন, কোডটি বিশ্লেষন করে দেখি।
প্রথমে দেখুন, <head > ও </head> ট্যাগের মধ্যে <style type=”text/css”> লেখা হয়েছে। এর মাধ্যমে ঘোষনা দেয়া হয়েছে যে এই ফাইলে সি এস এস ব্যবহার করা হচ্ছে এবং তা এখানেই ডিক্লেয়ার করা হচ্ছে। এর পরে h1 {color:blue;text-align:center} লেখা হয়েছে,যার মাধ্যমে বোঝানো হয়েছে, এই ফাইলের <body> ট্যাগের মধ্যে যত কন্টেন্ট আছে তাতে যদি কোনো <h1> ট্যাগ বিশিষ্ট কোনো লেখা অর্থাৎ কোনো শিরোনাম থাকে তবে তার color হবে blue,শিরোনামটির text align হবে center অর্থাৎ শিরোনামটি পেইজের মাঝে অবস্থান করবে। উল্লেখ্য এখানে color,text-align হল h1 এর প্রপার্টি বা বৈশিষ্ট্য যাদের মান যথাক্রমে blue এবং center নির্ধারন করা হয়েছে {color:blue;text-align:center} অংশের মাধ্যমে। এখন আপনি <h1> ট্যাগবিশিষ্ট যত লেখাই লিখুন না কেন, সবগুলোই এই বৈশিষ্ট্যপ্রাপ্ত হবে, কারন, সি এস এস এ আমরা তা ডিক্লেয়ার করে দিয়েছি <h1> ট্যাগের জন্য। যেমন,নিচের কোডটি দেখুন,
<html>
<head>
<style type=”text/css”>
h1 {color:blue;text-align:center}
</style>
</head>
<body>
<h1> WELCOME </h1>
<br>
<h1> HOW ARE YOU ? </h1>
<br>
<h1> WELL DONE </h1>
</body>
</html>
ভাবুনতো, এর রেজাল্ট আপনার ব্রাউজারে কেমন আসতে পারে। সবাইকে ধন্যবাদ। চর্চা করতে থাকুন আর থাকুন বিজ্ঞান ও প্রযুক্তির সাথে।
এরকম আরও কিছু পোস্টঃ
- সিএসএস সিম্ফোনীঃ পর্ব ৩
- সিএসএস সিম্ফোনীঃ পর্ব ৪
- সিএসএস সিম্ফোনীঃ পর্ব ৫
- সিএসএস সিম্ফোনীঃ পর্ব ৬
- জাভাস্ক্রিপ্ট টিউটোরিয়ালঃ প্রাথমিক ধারনা
লেখাটি পছন্দের তালিকায় যুক্ত করুন ☼
লেখাটি পছন্দ হলে বন্ধুদের সাথে শেয়ার করুন। শেয়ার করার জন্য উপরের বাটনে ক্লিক করুন
পরবর্তী আপডেট পেতে চাইলে আর.এস.এস ফীড অথবা ই-মেইল এর মাধ্যমে সাবস্ক্রাইব করুন
বিজ্ঞান প্রযুক্তি ডট কম এর ফেইসবুক পেইজ বা গ্রুপ অথবা টুইটার প্রোফাইলে যোগ দিন
লেখকঃ মিঠু সম্পর্কে কিছু কথা...
মিঠু বিজ্ঞান প্রযুক্তি ডট কম এর একজন অতিথি লেখক। তিনি রাজশাহী প্রকৌশল ও প্রযূক্তি বিশ্ববিদ্যালয়ের পুরকৌশল বিভাগের একজন ছাত্র। প্রোগ্রামিং এবং গ্রাফিক্স ডিজাইনিং এ তার আগ্রহ বেশি। গেইমিং তার নেশা।
কাজে লাগবে ধন্যবাদ ভাই
আপনাকেও ধন্যবাদ।