What is CSS & How dose it work? Bangla Tutorials Part-1

সিএসএস কি এবং কেন ? 

সিএসএস বলতে স্টাইল শীট কে বোঝায় ( Cascading Style Sheets -ক্যাসকেডিং স্টাইল শীট ) এটি এইচটিএমএল ওয়েব ডকুমেন্ট গঠন এবং সৈান্দর্য বৃদ্ধির জন্য ব্যবহৃত হয় যেমন- শিরোনাম এবং বিভিন্ন অনুচ্ছেদ গুলিকে সংজ্ঞায়িত করে এবং ওয়েবসাইট এর বিভিন্ন চিত্র, ভিডিও এবং অন্যান্য মিডিয়া এম্বেড করার অনুমতি দিয়ে থাকে। এইচটি এম এল কোড গুলো ওয়েব ব্রাউজারে কি রকম এবং কোন ডিজাইনে প্রকাশিত হবে , সিএস এস এর মাধ্যমে সেই ভাবই প্রকাশ করা যায়। HTML কোড গুলোর সাথে সিএসএস এর (CSS) Code গুলো যুক্ত হয়ে প্রকাশিত হয়। CSS Code গুলো আলাদা ফাইল এ রাখা যায় এবং সেই কোড গুলো HTML Page এর সাথে লিংক করে সংযুক্ত করা হয়। CSS Page এর Code গুলোর মাধ্যমে সবচেয়ে বড় সুবিধা একি কোড বারবার লিখতে হয় না।

HTML এবং CSS Code গুলো টাইপ বা লিখতে হলে যে সকল সফ্টওয়ার গুলো প্রয়োজন তা নিম্নরুপ:

Notepad or Notepad ++ আরো উন্নতমানের ইডিটর যেমন- Adobe Dreamweaver, html kit । এখন আমি সাজেস্ট করব Notepad ++ টি ব্যবহার করবেন এটি খুবি সহজ।তারপর তৈরিকৃত সিএসএস ফাইলটি style.css এই Extension এ সেইভ করবেন। তারপর কোড গুলো লেখার পর যে কোন একটি ইন্টারনেট ব্রাউজারে রান বা ওপেন করবেন- Mozilla Firefox, Google Chrome, Internet Explore etc.

সিএসএস ফাইল এর বেসিক গঠন বিন্যাস:

সিএসএস ফাইল এর বেসিক গঠন বিন্যাস কে দুটি অংশে ভাক করা যায়- একটি হলো সিলেক্টর (Selector) অন্যটি হলো (Declaration) নিম্নে চিত্রের মাধ্যমে দেখানো হলো-


আমি এটি আরো ভালো ভাবে বুঝিয়ে দিচ্ছি- সিলেক্টর হচ্ছে HTML এলিমেন্ট যেমন- <p>……..</p> or <h2>……..</h2> etc ডিকলারেশন আবার দুটি ভাক রয়েছে যেমন- Declaration={Property:Value} এখানে একের অদিক ডিকলারেশন (Declaration) থাকতে পারে। আরেকটু সহজ করে দিচ্ছি- <html tag> { Property:Value ;}

CSS ব্যবহার পদ্ধতি:

HTML ডকুমেন্টে স্টাইল শীট ব্যবহারের তিনটি পদ্ধতি রয়েছে যেমন- 1. Internal CSS , 2. External CSS , 3. Inline CSS । একটি HTML পেইজে হেড (head) ট্যাগের ভিতর স্টাইল ট্যাগ (style tag) দিয়ে সিএসএস (css) কোড যোগ করে স্টাইল করা যায়- এটি হচ্ছে Internal CSS যেমন- । আরেকটি হচ্ছে সিএসএস কোড গুলো আলাদা ফাইল তৈরি করে (head) ট্যাগের ভিতর লিংক (Link) ট্যাগ দিয়ে সংযুক্ত করা হয়- এটি হচ্ছে External CSS । এবং এইচটি এম এল এর প্রতিটি এলিমেন্টের সাথে একক ভাবে স্টাইল নির্ধারন করা যায় তাকে বলে Inline CSS।

CSS ব্যবহার পদ্ধতির তিনটি উদাহরন দেওয়া হলো:

1. Internal CSS- (head) ট্যাগের ভিতর:

<!DOCTYPE html>

<html>

<head>

<style> h1 {font-size:20px; color:blue;} </style>

</head>

<body>

<h1> This is Test Page </h1>

</body>

</html>

2. External CSS-

এখানে একটি মুল বিষয় হলো- সিএসএস যে আলাদা একটি ফাইল তৈরি করব, আর সেইভ করব হলো যেমন- ‍style.css (Extension) সেই আলাদা ফাইলটির ভিতরে এই স্টাইলটি দেখাতে হবে।

উদাহরন স্বরুপ – .h1{font-size:20px; color:blue;}
<!DOCTYPE html>

<html>

<head>  

            <link rel=”stylesheet” type= “text/css” href=”style.css”/>  

</head>

<body>   

          <h1> This is Test Page </h1>

<body>

</html>

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

3. Inline CSS – এইচটি এম এল এর প্রতিটি এলিমেন্টের সাথে একক ভাবে স্টাইল নির্ধারন করা:

<!DOCTYPE html >

<html>

<head>

            <link rel=”stylesheet” type= “text/css” href=”style.css”/>  

</head>

<body>

                 <h1 style=”font-size:20px; color:blue;”> This is Test Page </h1>

</body>

</html>

নোট: এখানে External CSS টি সবচেয়ে কার্যউপযোগি কারন, এই পেইজটি আলাদাভাবে করে নিতে হয়। সিএসএস এর সমস্ত কোড এই সিএসএস পেইজের ভিতরেই থাকে। এখান থেকে নিয়ন্ত্রন করা খুবি সহজ। আর ইনলাইন পেইজের সুবিদা হচ্ছে External এবং Internal CSS কে ওভাররাইড (Override) করা যায়। আমি পরামর্শ দিব আপনারা External CSS টি ব্যবহার করবেন।

HTML Markup Language:

HTML হচ্ছে Hyper Text Markup Language এটি মুলত Markup Language যেটির সাহায্যে আমরা একটি ওয়েব সাইটের মারকাপ তৈরি করতে পারি মারকাপ অর্থ হচ্ছে একটি ওয়েব সাইটের বেসিক স্টর্কচার বা গঠন তৈরি করা- যেমন আমরা যখন একটি বাড়ি তৈরি করি তখন কিন্তু প্রথমে একটি স্টর্কচার বা বিত্তিপ্রস্তর স্থাপন করা হয়- যেমন ধরুন-

বিল্ডিং বা বাড়ির ভিত্তিপ্রস্তর স্থাপন করার পর আমাকে বিল্ডিং এর ওয়াল তৈরি করতে হবে, ছাদ দিতে হবে , রং করতে হবে এবং ঘরের ভিতরে আরো বিভিন্ন সাজ-সজ্জা করে সাজাতে হবে নিচের ছবিটি দেখলে বুঝতে পারবেন-

এখন দেখুন প্রথমে যখন একটি ওয়েবসাইট তৈরি করবেন তখন এরকম একটি মারকাপ বা স্টর্কচার তৈরি করতে হবে। ওয়েবসাইট এর স্টর্কচারটি আপনি তৈরি করবেন HTML Code টাইপ করে – HTML মুলত কিছু কোড এবং বিভিন্ন ট্যাগ এট্রিবিউট এর মাধ্যমে ওয়েবসাইট এর স্টর্কচারটি তৈরি করা হয়- যেমন ধরুন

<!DOCTYPE html>

<html>

<head> <title> This is test Page </title> </head>

<body>

<h1> এখানে আরো বিভিন্ন ধরনে কোড টাইপ করতে হবে </h1>

</body>

</html>

তারপর ওয়েবসাইট এর স্টর্কচারটি তৈরি করার পর আপনি নিজের ইচ্ছে মতো ওয়েবসাইটটি ডিজাইন করবেন, বিভিন্ন রকমের টেক্সট ব্যবহার করে এর কালার টেক্সট টি কে বল্ট এবং বড় ছোট করা ইত্যাদি আরো বিভিন্ন রকমের কন্টেন্ট যেমন – ভিডিও, ছবি, অডিও ইত্যাদি এগুলো ব্যবহার করে বিভিন্ন ভাবে সিএসএস কোড দিয়ে ডিজাইন এবং সাজাতে হবে। নিচের ছবিটি দেখলে ব্যপারটি বুঝতে পারবেন- নিচে কিছু সিএসএস কোড দেখানো হল যেমন-

<p style=”color:red; font-size:20px” > This is test Page </p>

উপরের ছবিটিতে এটিই বুঝানো হচ্ছে যে- HTML Code টাইপ করে আমি স্টর্কচার বা বিত্তিপ্রস্তর স্থাপন করব, তারপর সিএসএস কোড দিয়ে আমি স্টর্কচার বা বিত্তিপ্রস্তর টি সাজাব বা ডিজাইন করব।

নোটঃ আজকের ক্লাস এই পর্যন্তই  তারপর  CSS Class Part-2  তে CSS এর বিভিন্ন Property বা বৈশিষ্ঠ্য নিয়ে আলোচনা করবো, আশা করি সবাই ক্লাসটি মনোযোগ দিয়ে দেখবেন।

Leave a Reply

Your email address will not be published. Required fields are marked *

COVID-19

Leave News