CSS কী? CSS সুবিধা ও অসুবিধা। HTML এর সাথে CSS যুক্ত করার নিয়ম

MD. Aiub 2

Welcome to Creationbangla-24. কেমন আছেন বন্ধুরা? আশা করি মহান আল্লাহ্ তা'য়ালার অশেষ রহমতে ভালো আছেন। আপনারা অবশ্যই Title দেখে বুঝতে পেরেছেন এই পেজে কী বিষয় নিয়ে আলোচনা করতে যাচ্ছি। তো আপনাদের জানিয়ে রাখি এটি একটি শিক্ষা বিষয়ক সাইট। এই site এ আমি নির্দিষ্ট কিছু বিষয় নিয়ে ধারাবাহিক ভাবে লিখব। আপনাদের একটি কথা না বললেই নয় যে, এই Page টি ভালোভাবে বুঝার জন্য এবং Page টি থেকে উপকৃত হওয়ার জন্য সম্পূর্ণ Page টি মনযোগ সহকারে পড়বেন। এখন এই পেজটিতে আপনাদের সাথে আলোচনা করতে যাচ্ছি "CSS" সম্পর্কে এবং আপনাদের সাথে আছি আমি Md.Aiub তো চলুন বন্ধুরা শুরু করা যাক।


what is css
    এক নজরে পাঠ্য সূচি:
  1. CSS কী?
  2. HTML এ CSS যুক্ত করার নিয়ম
  3. External Style Sheet
  4. Internal Style Sheet
  5. Inline Style
  6. CSS এর গঠনরীতি
  7. CSS এর সুবিধা
  8. CSS এর অসুবিধা

CSS কী?

CSS হলো Cascading Style Sheet এর সংক্ষিপ্তরূপ। CSS এর জনক হলেন Hakon Wium Lie. CSS প্রথমে হ্যাকন ওয়িয়াম লি কর্তৃক প্রস্তাবিত হয়েছিল ১৯৯৪ সালের ১০ই অক্টোবর। প্রাথমিক মুক্তি পায় ১৭ই ডিসেম্বর ১৯৯৬ সালে। CSS এর ফাইল এক্সটেনশন হলো .css CSS এর ইন্টারনেট মিডিয়া টাইপ text/css
CSS বিবরণীসমূহ ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) কর্তৃক নিয়ন্ত্রিত হয়। CSS ফাইলের জন্য W3C এর CSS বৈধতা নির্ণয় সেবা রয়েছে। HTML ছাড়াও XHTML,XML, SVG এবং XUL ইত্যাদি মার্কআপ ভাষায় CSS ব্যবহার করা যায়। Cascading Style Sheets (CSS) হলো একটি ভাষা যা দিয়ে কোন ডকুমেন্ট কিভাবে দেখানো হবে বা সোজা কথায় ডকুমেন্টের স্টাইল নিয়ন্ত্রণ করা সম্ভব। কিন্তু আমরা যদি একটি ভালো মানের ওয়েবসাইট তৈরি করতে চাই, তাহলে CSS সম্পর্কে ভালোভাবে জানতে হবে। একটি HTML ফাইলের বিভিন্ন উপাদান গুলো কিভাবে দেখাবে যেমন রঙ, ফন্ট সাইজ, মার্জিন, প্যাডিং ইত্যাদি CSS দিয়ে নির্ধারণ করা হয়।

কীভাবে HTML এ CSS যুক্ত করতে হয়?

তিনটি পদ্ধতিতে HTML এর সাথে CSS যুক্ত করা যায়। যথা:
  1. External style sheet
  2. Internal style sheet
  3. Inline style
External Style Sheet: একই Style একের অধিক HTML ফাইলে যুক্ত করার জন্য External style sheet ব্যবহার করা হয়। আমরা যতো ওয়েবসাইট দেখি, সব গুলোই External style sheet দিয়ে তৈরি করা। একটি CSS ফাইল তৈরি করে সব Style ঐ CSS ফাইলে লেখা হয়। তারপর তা এইচটিএমএল ফাইলে যুক্ত করা হয়। External style sheet এর সুবিধা হচ্ছে একই সাথে সব গুলো ওয়েব পেইজে স্টাইল দেওয়া বা স্টাইল পরিবর্তন করা যায়, সময় কম লাগে ও কাজ কমে যায়। External style sheet HTML ফাইলে যুক্ত করার জন্য <head> ট্যাগ এর ভেতর নিচের মত করে লেখা হয়।
<head> <linkrel="stylesheet" type="text/css" href="style.css"> </head>

Internal Style Sheet: একটি নির্দিষ্ট HTML ফাইলে স্টাইল দেওয়ার জন্য Internal Style Sheet ব্যবহার করা হয়। Internal Style Sheet ব্যবহার করলে যতগুলো ওয়েব পেইজ থাকবে সব গুলোর জন্য আলাদা আলাদা ভাবে CSS কোড লিখতে হবে।
Internal Style Sheet আবার তিনভাবে প্রয়োগ করা যায়। যথা:
1.Tag Name Selector: আপনি যদি Tag Name use করে CSS প্রয়োগ করেন, তবে ঐ নামে যতগুলো ট্যাগ থাকবে সবগুলোর ট্যাগের উপর CSS প্রয়োগ হবে।
2.Class Selector: আপনি যদি একটি Class use করে CSS প্রয়োগ করেন, তবে ঐ Class এর আওতাভূক্ত যতগুলো ট্যাগ থাকবে সবগুলোর ট্যাগের উপর CSS প্রয়োগ হবে। আর Class ব্যবহার করে CSS প্রয়োগ করতে চাইলে অবশ্যই Class এর পূর্বে একটি . ব্যবহার করতে হবে।
3.ID Selector: আপনি যদি ID use করে CSS প্রয়োগ করেন, তবে ঐ ID অনুযায়ী একটি মাত্র ট্যাগের উপর CSS প্রয়োগ হবে। কেননা ID একটি ট্যাগের অদ্বিতীয় পরিচয় বহন করে। আর ID ব্যবহার করে CSS প্রয়োগ করতে চাইলে অবশ্যই ID এর পূর্বে একটি # ব্যবহার করতে হবে।
Internal Style Sheet ওয়েবপেইজ বা এইচটিএমএল পেইজের <head> ট্যাগ এর ভেতর লিখতে হয়। তার জন্য <head> ট্যাগ এর ভেতর <style> নামে আরেকটা ট্যাগ ব্যবহার করতে হবে এবং এই ট্যাগের মাঝে CSS code গুলো লিখতে হবে। একটি HTML ফাইলে Internal Style Sheet ব্যবহার করতে চাইলে নিচের মতো করে কোড লিখতে হবে।
<head>
<style>
body{color:blue;}
.myclass {background:red;}
#myID {background:red;}
</style>
</head>

Inline style: HTML এর একটা নির্দিষ্ট Element এ স্টাইল করার জন্য Inline Styles ব্যবহার করা হয়। তবে এটা HTML ফাইলে স্টাইল দেওয়ার জন্য খুব একটা ভালো উপায় নয়। একটি HTML ট্যাগ এর ভেতর Inline Style করতে চাইলে ঐ ট্যাগের ভিতর style এট্রিবিউট ব্যবহার করতে হবে এবং এর মাঝে CSS code গুলো লিখতে হবে। একটি HTML ফাইলে Inline Style ব্যবহার করতে চাইলে নিচের মতো করে কোড লিখতে হবে।
<p style="color:green; font-size:14px"> This is a paragraph. </p>

CSS এর Syntax

CSS এর নিয়ম নীতি গুলো একটি Selector এবং একটি Declaration block নিয়ে গঠিত। আর এই Declaration block হিসাবে Second brackets বা Curly braces ব্যবহার করা হয়।
Declaration এর আবার দুইটি অংশ রয়েছে সেগুলো হলো Property এবং Value. এই Property এবং Value কে : কোলন দ্বারা একত্রিত করতে হয়। একটি Declaration block এর মাঝে একাধিক Declaration থাকতে পারে। আর এই একাধিক Declaration কে একটি ; সেমিকোলন দ্বারা বিচ্ছিন্ন করতে হয়।
Selector Declaration Declaration
p { color: blue; font-size: 12px;}
↑ ↑ ↑ ↑
Property Value Property Value

CSS এর সুবিধা ও অসুবিধা

CSS এর সুবিধা গুলোর পাশাপাশি বেশ কিছু অসুবিধাও রয়েছে। নিম্নে তা বর্ণনা করা হলো।
    CSS এর সুবিধা
  1. একটি মাত্র style sheet লিখে ওয়েবসাইটের সবগুলো পেজ স্টাইল করা যায়।
  2. External style sheet ব্যবহার করে একাধিক ওয়েবসাইট স্টাইল করা যায়
  3. একই Style sheet বার বার লিখতে হয় না, ফলে সময় কম লাগে।
  4. CSS বড় ওয়েবসাইটগুলির রক্ষণাবেক্ষণের সাথে সম্পর্কিত ঝুঁকি হ্রাস করে।
  5. আপনি একটি স্টাইল শীট সম্পাদনা করে একটি সম্পূর্ণ ওয়েবসাইটের চেহারা পরিবর্তন করতে পারবেন বা অনেক বড় পরিবর্তন আনতে পারবেন। সেই পরিবর্তন automatically হবে।
  6. Document এ কোড যত কম হবে ততো দ্রুত লোড হবে। আর একই স্টাইল শীট যেহেতু বার বার লিখতে হয় না তাই Document এ Code কম থাকে।
  7. স্টাইল শীট Document কে বিভিন্ন ধরণের ডিভাইসে উপস্থাপনের জন্য অনুকূল পরিবেশ তৈরি করে দেয়। কেননা বিভিন্ন ডিভাইসের পর্দা বিভিন্ন রকমের বা বিভিন্ন সাইজের হতে পারে।
  8. CSS গোপনে আপনার website কে SEO বান্ধব করে তোলে।
  9. Search Engine কে Document মূল্যায়ন করতে সহায়তা করে। Ranking, Indexing, Crawl করতেও সহায়তা করে।
  10. বিভিন্ন ভাবে বিন্যস্ত ও উপস্থাপনের মাধ্যমে ওয়েবসাইটকে আকর্ষণীয় করে তোলা যায়।
    CSS এর অসুবিধা
  1. Cross Browser এর জটিলতার কারণে ডকেমেন্ট গুলো সব ব্রাউজারে একই ভাবে প্রদর্শন না করার সম্ভাবনা থাকে।
  2. অন্য কোনো Source এর URL ব্যবহার করে External Style Sheet ব্যবহার করলে, যদি ঐ URL টি পরিবর্তন করা হয় তবে External Style Sheet টি অকার্যকর হয়ে পরবে।
  3. CSS একটি উন্মুক্ত পাঠ্য-ভিত্তিক সিস্টেম, CSS এর অন্তর্নির্মিত সুরক্ষা নেই যা এটিকে ওভাররাইড করা থেকে রক্ষা করবে।
  4. CSS সহজেই অ্যাক্সেসযোগ্য। ফলে দুর্ঘটনা বা দুষ্কর্মের কারণে আপনার সম্পূর্ণ ওয়েবসাইটের ডকুমেন্ট গুলো প্রদর্শন এবং ফর্ম্যাটকে ব্যাহত করতে পারে।
  5. CSS ব্যবহার করার সময় CSS-2 ও CSS-3 এর level Mix হওয়ার সম্ভাবনা বেশী থাকে।

ًপ্রিয় পাঠক বন্ধুরা,
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "CSS Properties" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...


Tags

2 Comments

Post a Comment

Previous Post Next Post