এটি 18 পর্বের HTML বেসিক ট্রেনিং ফ্রি বিষয়ক টিউনের 17 পর্ব

আসালামু আলাইকুম/নমস্কার । কেমন আছেন সবাই । আশা করি সবাই ভাল আছেন । আমি ভাল । আজকে আমরা শিকব কি করে এইচটিএমএলকে Css( Cascading Style Sheets ) দিয়ে স্টাইল করা যায় । চলুন শুরু করি ।

বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় HTML দিয়ে, ডিজাইন তৈরি করা হয় CSS দিয়ে, আর টেক্সট জমা রাখা হয় ডাটাবেজে। তাই কোন পেজকে আকর্ষণীয় করে তোলার পাশাপাশি ব্যবহার বান্ধব করে তোলার জন্য CSS ( Cascading Style Sheets ) এর ভূমিকা খুবই গুরুত্বপূর্ণ।

HTML দ্বারা তৈরি পেজে তিন পদ্ধতিতে CSS যুক্ত করা যায়।

এক্সটার্নাল স্টাইল সিট (External Style Sheet )
ইনটার্নাল স্টাইল সিট (Internal Style Sheet)
ইনলাইন স্টাইল সিট (Inline Style Sheet

আমি প্রথমে সবার নিচে ইনলাইন স্টাইল সিট নিয়ে বিস্তারিত আলোচনা করব । তারপর একে একে উপরের গুলো নিয়ে ।

ইন-লাইন স্টাইল শীট

ইনলাইন সিএসএস হচ্ছে সিএসএস style কে এইচটিএমএল কোড এর ভিতরে ব্যবহার করার নিয়ম। এক্সটার্নাল বা ইন্টারনাল সিএসএস হতে ইনলাইন সিএসএস এর প্রাধান্য বেশি। এর অর্থ হচ্ছে একসটার্নাল বা ইন্টারনাল সিএসএস দ্বারা স্টাইল নির্দেশিত থাকলেও আপনি স্টাইল override করতে পারেন। এ পদ্ধতিতে এইচ টি এম এল এর প্রতিটা ট্যাগের এট্রিবিউটস হিসেবে style এট্রিবিউটস যুক্ত করে এর মধ্যে সি এস এস এর জন্য প্রয়োজনীয় Declaration সমূহ যুক্ত করা হয়। যেমন<p style=”color:#066; font-family:Tahoma; text-align:left;”>

তাহলে চলুন আমারা ইনলাইন সিএসএস দিয়ে একটি এইচটিএমএল কোড লিখি
<html>
<head>
<title>inline css</title>
</head>
<body >

<p style=”background: blue; color: white;”>আমাদের তৈরি করা ইনলাইন css দ্বারা প্রথম এইচটিএমএল । যার background color নীল এবং তার font color সাদা । </p>

</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত মত দেখাবে।

আপনার ব্রাউজার এ প্রদর্শন:-

আমাদের তৈরি করা ইনলাইন css দ্বারা প্রথম এইচটিএমএল । যার background color নীল এবং তার font color সাদা ।

এবার আমরা ইনটার্নাল স্টাইল সিট নিয়ে আলোচনা করব ।

ইনটার্নাল স্টাইল সিট:–

এ পদ্ধতিতে <head>………….</head> এর মধ্যে <style>..</style> বা স্টাইল ট্যাগ ব্যাবহার করা হয়। এবং <style>….</style> এর মধ্যেই সি এস এস এর জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ রাখা হয়। তার মানে হল যখন আপনারা ইন্টারনাল সিএসএস ব্যবহার করবেন তখন অবশ্যই একটা নতুন ট্যাগ যোগ করতে হবে যেটা হচ্ছে <style> tag এবং যা HTML <head> ট্যাগ এর ভিতরে রাখতে হবে।

যেমন:–

<html>
<head>
<style>
</style>
</head>
<body>
<p>Your frist comment</p>
</body>
</html>

এমত অবস্থায় পেজে নতুন কিছু দেখাবে না। এই style ট্যাগ টি শুধু ব্রাউজার কে বলবে যে তারা এই পেজে নতুন কিছু CSS element যোগ করতে যাচ্ছে ।
তাহলে চলুন ইনটার্নাল স্টাইল সিট দিয়ে একটি এইচটিএমএল কোড লিখি ।

<html>
<head>
<style>
p {color: red;font-size:30px }
body {background-color: green; }
</style>
</head>
<body>
<p>আমাদের তৈরি করা ইন্টারনাল সিএসএস দ্বারা প্রথম এইচটিএমএল । যার background color সবুজ এবং তার font color সাদা </p>
</body>
</html>

আপনার ব্রাউজার এ প্রদর্শন:-

আমাদের তৈরি করা ইন্টারনাল সিএসএস দ্বারা প্রথম এইচটিএমএল । যার background color সবুজ এবং তার font color সাদা

এবার আমরা এক্সটার্নাল স্টাইল সিট নিয়ে আলোচনা করব ।

এক্সটার্নাল স্টাইল শীট–

এ পদ্ধতিতে সি এস এস এর জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ আলাদা স্ক্রিপ্টে রাখা হয় এবং স্ক্রিপ্টটিকে বা স্টাইল শীটটিকে style.css বা এর অনুরূপ নামে save করা হয়। <head>………….</head> এর মধ্যে <link rel=”stylesheet” type=”text/css” href=”css.css”> যুক্ত করে এক্সটার্নাল স্টাইল শীট এর সাথে এইচ টি এম এল এর লিংক তৈরি করা হয়।

যে কোন ওয়েব সাইটের অধিকাংশ পেজই একই ডিজাইনের হয়। এক্ষেত্রে এক্সটার্নাল স্টাইল শীট ব্যবহার করলে প্রতিটা পেজের জন্য আলাদা স্টাইল শীটের প্রয়োজন হয় না।

তাহলে চলুন এক্সটার্নাল সিএসএস দিয়ে কি করে css link দিয়ে এইচটিএমএল কে প্রকাশ করা যায় তা দেখি ।

প্রথমে আমরা নোটপ্যাড নিব তারপর নিচের সিএসএস কোড টি নোটপ্যাড এ লিখবো।

body{ background-color: green;}
p { color: blue; }
h3{ color: white; }

তারপর সিএসএস ফাইলটিকে style.css দিয়ে সেভ করব । তারপর একটি নতুন একটি ফোল্ডার করে সেই ফোল্ডার এ ভিতর style.css ফাইলটিকে রেখে দিন ।

এখন আবার নতুন একটি নোটপ্যাড নিন কারন আমাদের এখন এইচটিএমএল ফাইল তৈরী করে সিএসএস ফাইলটির সাথে লিংক দিতে হবে । এইচটিএমএল দিয়ে কি করে লিঙ্ক দিবেন তা ভাল করে দেখেন নিচের এইচটিএমএল কোডটি ।

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
<h3> www.pchelpcenterbd.com </h3>
<p> pc helpcenter bd is one of the best tech site in bagladesh. </p>
</body>
</html>

এবার এইচটিএমএল ফাইল টিকে index.html লিখে সেভ করে style.css যে ফোল্ডার এ রেখেছিলেন সেই ফোল্ডার এ index.html ফাইলটি কে রাখুন । এবার আপনার এইচটিএমএল ফাইল টিকে ব্রাউজারে এ খুলুন করুন এবং পরিবর্তন লক্ষ্য করুন। দেখুন নিচের ছবির মত আসছে ।

আজ আর লিখছি না । এ পর্যন্ত । পরের পর্বে আবার দেখা হবে । ধন্যবাদান্তে