CSS কি? CSS কত প্রকার ও কি কি? বিস্তারিত।

0
89
CSS কি? CSS এর প্রকারভেদসহ সকল বিস্তারিত।
CSS কি? CSS এর প্রকারভেদসহ সকল বিস্তারিত।

আপনি কি জানতে চান CSS কি ? ওয়েব ডিজাইন শিখার জন্য CSS এর কোন বিকল্প নেই। CSS এর উপর নির্ভর করেই একটি ওয়েব পেজের গঠন, আকার, আকৃতি, অবস্থান,আয়তন নির্ধারিত হয়। আজকে আমরা css সম্পর্কে আলোচনা করবো । css কি এবং CSS এর ইতিহাস, প্রকারভেদ সহ সকল বিষয় নিয়ে বিস্তারিত লেখা হয়েছে। চলুন শুরু করে ফেলি।

CSS কি?

CSS সম্পর্কে জানার আগে আপনার অবশ্যই HTML সম্পর্কে জানতে হবে। তা না হলে আপনি বুঝতে পারবেন না। CSS সম্পর্কে জানার আগে আপনার উচিৎ আগের পোষ্ট গুলো পড়ে নেওয়া। নিচে ক্লিক করে পোষ্ট গুলো আগে পড়ে নিতে পারেন তারপর CSS পড়তে শুরু করুন। আর যদি নিচের বিষয়গুলো আগে থেকেই জানা থাকে তাহলে তো খুব ভাল।

CSS এর পূর্ণরূপ কি? CSS এর পুরো নাম হল Cascading Style Sheets যাকে সংক্ষেপে CSS ্বলা হয়। HTML দ্বারা একটি ওয়েবসাইটের গঠন সাজিয়ে নেওয়া যায় কিন্তু সেই সাজিয়ে নেওয়া ওয়েবসাইটকে সুন্দরভাবে রুপদান করতে গেলে CSS ব্যাবহার করতেই হবে।

CSS ব্যতীত একটি ওয়েবসাইট পরিপূর্ণ হয় না। আরো সহজভাবে বলতে চাইলে একটি উদাহরণ দিতে হবে। ধরুন , আপনি একটি বাড়ী করবেন। বাড়ি করার জন্য কি কি দরকার ? ইট লাগবে, বালু লাগবে,সিমেন্ট লাগবে, রড লাগবে আরো ইত্যাদি।

প্রথমে নির্ধারণ করা হবে বাড়ীটি দেখতে কেমন হবে, কয়টি ঘর করা হবে, কেমন যায়গা প্রয়োজন বা কোন যায়গার ভিতর করতে হবে বিভিন্ন বিষয়ের প্রতি নজর রাখতে হবে তারপর সেই বাড়ীটি গাঁথা হয় ।

ঠিক তেমনি HTML দিয়ে একটি ওয়েবসাইটে কয়টি সেকশন তৈরি করা হবে, কি ধরনের ওয়েবসাইট হবে এটার উপর নির্ভর করে HTML দিয়ে ওয়েবসাইটের গঠন করা সম্ভব হয়।

আবার, একটি বাড়ী গাঁথার পর সেই বাড়ীতে আরো প্রচুর কাজ অবশিষ্ট থাকে । বাড়ীটিতে রং না করা পর্যন্ত বাড়িটি সুন্দর হবে? অবশ্যই হবে না। রং করেই বাড়ির সৌন্দর্য ফুটিয়ে তোলা সম্ভব হয়।

ঠিক তেমনি HTML দিয়ে ওয়েবসাইট এর গঠনটি সাজিয়ে নেওয়ার পর CSS দিয়ে ওয়েবসাইট টির সৌন্দর্য ফুটিয়ে তোলা হয়। অর্থাৎ, CSS দিয়ে ওয়েবসাইট এর ডিজাইন, কালার, দেখতে কেমন হবে এগুলো সাজানো যায়। আশা করছি CSS কি? এটি বুঝতে সক্ষম হয়েছেন।

CSS এর ইতিহাসঃ

১৯৯৬ সালের ১৭ই ডিসেম্বর প্রথম CSS প্রকাশ করা হয়েছিল। CSS এর কয়টি ভার্সন রয়েছে? CSS এর ভার্সন সমূহ নিচে উল্লেখ করা হল।

  1. CSS 1
  2. CSS 2
  3. CSS 2.1
  4. CSS 3

CSS 3 হল বর্তমান ভার্সন অর্থাৎ সর্বশেষ ভার্সন যা এখন পর্যন্ত ব্যবহৃত হচ্ছে। CSS 3 ব্যাবহার করার করে সব ওয়েবসাইট  তৈরি করা হচ্ছে। সুতরাং, CSS 3 হল CSS এ্রর বর্তমান ভার্সন যা সবাই ব্যাবহার করতেছে। এখন পর্যন্ত CSS এর নতুন কোন ভার্সন বের হয়নি তবে ভবিষ্যতে হতেই পারে।

CSS কত প্রকার ও কি কি? জেনে নিন-

CSS সাধারণত তিন প্রকার অর্থাৎ আপনি ৩ ভাবে CSS লিখতে পারবেন। CSS এর প্রকার সমূহ-

  • Internal CSS.
  • External CSS.
  • Inline CSS.

Internal CSS –

Internal CSS হল এমন একটি stylesheet যা একটি পেজের head সেকশনের মধ্যে লিখতে হবে এবং এটি  style এলিমেন্ট দিয়ে শুরু করা হয় ।

example of internal css
example of internal css

উপরের ছবিটিতে খেয়াল করুন একটি এইচটিএমএল পেজের ভিতরে head ট্যাগ এর মধ্যে style এলিমেন্ট নিয়ে তার মধ্যে কিছু ডিজাইন লেখা রয়েছে। এই পদ্ধতি অনুসরণ করে ডিজাইন করাকেই Internal css বলা হয়। এই ধরনের css খুব কম পরিমাণে ব্যাবহার করা হয় এবং সেই পদ্ধতিকে আদর্শ পদ্ধতি হিসাবে ধরা যায় না।

External CSS –

External css এমন এক প্রকারের css যাকে একটি আলাদা ফাইল হিসাবে তৈরি করা যায় এবং সেই আলাদা ফাইলকে HTML এ head ট্যাগ এর ভিতরে যুক্ত করে দিতে হয়।  External css ফাইলের শেষে অবশ্যই .css এক্সটেনশন থাকে।

example of external css
example of external css

এবার এই ছবিটিতে আরো একবার খেয়াল করে দেখুন head ট্যাগ এর মধ্যে External css টি যুক্ত করে দেওয়া রয়েছে। এখানে Href এর পর style.css লেখা রয়েছে। কারণ, ঐটা হচ্ছে css ফাইলটির নাম যে নামে ফাইলটি তৈরি করা হয়েছিল ।

তারপর সেই ফাইল এ css ব্যাবহার করা পুরোপুরি ভাবে সম্ভব । এভাবেই External css ব্যাবহার করতে হয়। এই পদ্ধতিটি হচ্ছে উত্তম পদ্ধতি এবং এই পদ্ধতি অনুসরণ করেই ওয়েবসাইটে css  করা হয়ে থাকে।

Inline CSS –

একটি এইচটিএমএল এলিমেন্ট এর ভিতর নির্দিষ্ট করে ডিজাইন করার জন্য inline css ব্যাবহার করা যায়। এই ধরনের css  সাধারণত খুব কম পরিমাণে ব্যাবহার হয়ে থাকে।

example of inline css
example of inline css

এখানে খেয়াল করুন, একটি এইচটিএমএল ট্যাগের মধ্যে style দেওয়া রয়েছে । এ পদ্ধতিতেই inline css ব্যবহৃত হয়। তবে এইচটিএমএল এর ভিতরে এভাবে css দেওয়া ভাল উপায় হতে পারে না।

কিভাবে CSS ফাইল তৈরি করে?

css ফাইল তৈরি করা মোটেও কঠিন কোন বিষয় নয় । মুহূর্তের মধ্যেই খুব সহজে একটি css ফাইল তৈরি করা সম্ভব। কিন্তু প্রথমে আপনাকে নজর রাখতে হবে আপনার কম্পিউটারে Hide extensions for known files type এই অপশনটি থেকে টিকমার্ক তুলে দেওয়া আছে কি না?

নতুন উইন্ডোজ দেওয়ার পর সাধারণত Hide extensions for known files type অপশন এ টিকমার্কটি দেওয়ায় থাকে। তাই ম্যানুয়ালি এটাকে তুলে দিতে হয় । তাছাড়া css file তৈরি করা সম্ভব নয়।

এটি কিভাবে করে? এই কাজটি করার জন্য প্রথমে আপনার কম্পিউটারের control panel এ চলে যেতে হবে। control panel এ যেতে হলে সার্চ বারে control panel লিখে সার্চ করতে হবে ।

computer control panel
computer control panel

তারপর control panel এ ক্লিক করে ফেলুন। সেখান থেকে Appearance and personalisation অপশন এ ক্লিক করে দিন।

Appearance and personalisation
Appearance and personalisation

এখন folder option এ ক্লিক করে দিন।

folder option
folder option

folder option এ ক্লিক করে উপরে view অপশনে ক্লিক করে ফেলুন এবং সেখান থেকে অবশ্যই নিচে দেখানো অপশন থেকে টিকমার্ক তুলে দিতে হবে । তারপর apply এবং ok তে ক্লিক দিন।

Hide extensions for known files type
Hide extensions for known files type

এখন CSS ফাইল  তৈরি করার পালা। CSS এর আলাদা একটা এক্সটেনশন আছে যার নাম .css । এখন আপনি প্রশ্ন করতে পারেন যে, এক্সটেনশন কি ? এক্সটেনশন অপারেটিং সিস্টেমকে সুন্দরকরে বুঝিয়ে দেয় ফাইলটি কোন ধরনের সফটওয়্যার এ খোলা হবে। যেমনঃ অডিও গানের শেষে .mp3 ভিডিও গানের শেষে .mp4 দেখতে পাওয়া যায় ।

কিন্তু কেন ? মানে .mp3 এটি শুধু শোনার জন্য ফলে এটি অডিও সফটওয়্যার এ খুলে যায় এবং .mp4 এটি দেখার জন্য ফলে এটি ভিডিও প্লেয়ার এ খুলে যায়। ঠিক একই রকম হল css file ।

এখন CSS ফাইল তৈরি করতে হলে আপনাকে ফাইল এর শেষে .css দিয়ে ফাইলটি তৈরি করতে হবে। প্রথমে মাউস এর ডান বাটন এ ক্লিক করে new নামে একটি অপশন দেখতে পাবেন সেখান থেকে Text document তৈরি করা হয় এবং খেয়াল করুন ফাইল টির শেষে .txt আছে।

.txt কে পরিবর্তন করে .css দিয়ে ফাইলটি সেভ করুন। যেমনঃ style.css  । বেস ! css তৈরি হয়ে গেল। এভাবেই css ফাইল তৈরি করতে হয়।

CSS কিভাবে  শিখবো?

css কি খুবই কঠিন ? css কিভাবে শিখবো! css কিভাবে করবো?  শুধু এগুলোই নয় এমন আরো প্রশ্ন রয়েছে যেমন, css কি আমার দ্বারা সম্ভব? আমি এগুলা পারবো না আরও ইত্যাদি।

কিন্তু আপনি জানেন ! মনের জোর অনেক বড় একটি শক্তি? আপনি অবশ্যই পারবেন। আপনি চাইলে অনলাইনে কাজ শিখতে পারেন। যেমনঃ w3schools  এখান থেকে আপনি শিখে নিতে পারবেন অথবা youtube এ অনেক ভিডিও রয়েছে যা আপনার জিবন বদলে দেওয়ার সক্ষমতা রয়েছে ।

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

আরো পড়ুন –

আজকে পোস্টের টপিক ছিল CSS কি? CSS কত প্রকার এবং বিস্তারিত। আশা করছিল সকল বিষয় ভালভাবে বুঝতে পেরেছেন। পোষ্টটি ভাল লাগলে শেয়ার করুন এবং আপনার কিছু জানার থাকলে নিচে কমেন্ট করুন।

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.