যখন আমরা blogging বা web designing এর কাজ করে থাকি,
তখন আমরা, HTML, CSS, JavaScript, PHP ইত্যাদি বিষয়ের সাথে পরিচিত হয়ে থাকি।
তবে, HTML কি এবিষয়ে আমি আগেই আপনাদের বলেছি।
আর তাই, web designing এর জগতের অনেক গুরুত্বপূর্ণ প্রশ্ন “CSS মানে কি ?“, এর উত্তর আজকের এই আর্টিকেলে আমি দিবো।
আজকে আমরা কি শিখবো ?
- CSS কাকে বলে ? (What Is CSS)
- CSS এর কাজ কি ?
- এর লাভ ও সুবিধা কি কি ?
- CSS এর ব্যবহার গুলো কি ?
- HTML এবং CSS এর পার্থক্য
- CSS কিভাবে শিখব ?
CSS আসার আগে, যেকোনো ওয়েব ডকুমেন্ট (web document) এর কোনো structure, style বা design ছিলোনা।
মানে, যখন একটি ওয়েবসাইট বা ওয়েব পেজের মধ্যে ভিসিট করা হতো, তখন সেখানে কেবল উশৃঙ্খল TEXT ছাড়া কিছুই থাকতোনা।
আর তাই, এই সাধারণ টেক্সট (text) গুলো পড়তে কারো ভালো লাগতোনা।
তবে, এই সমস্যার সমাধান করতে গিয়ে HTML style tags এর বিকাশ হলো।
কিন্তু এর দাড়াও এই সমস্যার সমাধান করা গেলোনা।
আর তাই এই স্টাইল ট্যাগ টিকে আরো অধিক উন্নত করে একটি আলাদা রকমের ওয়েব ডকুমেন্ট ভাষার (web document language) এর বিকাশ করা হলো।
আর এই আধুনিক ওয়েব ডকুমেন্ট ভাষাটির নাম হলো “CSS”.
চলুন, সি এস এস কি বা কাকে বলে, (CSS in Bengali) বিষয়টি আরো ভালো করে জেনেনেই।
সি এস এস (CSS) কি ? (What Is CSS in Bangla)
CSS এর পূর্ণরূপ হলো “Cascading Style Sheets“.
সি এস এস (CSS) আসলে একটি আধুনিক ল্যাঙ্গুয়েজ (language) যার মাধ্যমে একটি web document / website এর design, style, layout বা structure তৈরি করা যেতে পারে।
এই web document language টিকে W3C – World Wide Web Consortium দ্বারা বিকশিত করা হয়েছে।
CSS এর ব্যবহার করা হয় একটি ওয়েব পেজ বা ওয়েবসাইট কে সাজানোর জন্য।
এই সি এস এস ভাষার মাধ্যমে আপনি একটি ওয়েব পেজের color, font, size of text, spacing between elements, background images or background colors, আলাদা আলাদা স্ক্রিন সাইজ এর ডিভাইস এর জন্য আলাদা আলাদা ওয়েব পেজ ডিসপ্লে সাইজ এবং আরো নানান বিষয় গুলো নিয়ন্ত্রণ করতে পারবেন।
মনে রাখবেন, একটি webpage কে তৈরি করার ক্ষেত্রে HTML এবং CSS, দুজনেরি গুরুত্বপূর্ণ ভূমিকা রয়েছে।
HTML এর মাধ্যমে webpage টিকে আকার দেওয়া হয় এবং CSS এর মাধ্যমে webpage টিকে নতুন এবং আকর্ষণীয় রূপ দেওয়া হয়।
CSS এবং HTML এর ব্যবহার কিন্তু একসাথেই হয়ে থাকে।
তবে, CSS ছাড়া HTML এর ব্যবহার সম্ভব। তবে, HTML ছাড়া CSS এর ব্যবহার করা যাবেনা।
CSS একটি অনেক সহজ সরল computer language যেটাকে সহজেই শেখা যেতে পারে।
HTML এবং CSS codes গুলোকে লিখার জন্য নোটপ্যাড (notepad) এর মতো একটি text editor এর প্রয়োজন হয়ে থাকে।
একটি সাধারণ ওয়েবসাইটকে আকর্ষণীয় রং-রূপ দেয়ার জন্য CSS codes এর ব্যবহার করাটা জরুরি।
তাহলে বুঝলেন তো, “CSS কি” ? ও “CSS কাকে বলে” ?
CSS এর প্রকারভেদ – (Types of CSS in Bengali)
CSS এর বিভিন্ন আলাদা আলাদা প্রকার রয়েছে।
- Internal style sheet
- External style sheet
- Inline CSS codes
চলুন, বিষয় গুলো একটি বিস্তারিত ভাবে জেনেনেই।
Internal stylesheet কি ?
Internal বা embedded CSS এর ক্ষেত্রে আমাদের webpage এর head section <head> এর মধ্যে <style> যোগ করতে হয়।
এই CSS styling এর প্রক্রিয়া ব্যবহার করে, একটি single page এর design করাটা অনেক সহজ কাজ হয়ে দাঁড়ায়।
তবে, যদি ওয়েবসাইটে প্রচুর ওয়েবপেজ রয়েছে, তাহলে এই প্রক্রিয়া ব্যবহার করে প্রত্যেকটি পেজের <head> section এর মধ্যে <style> যোগ করাটা তেমন সুবিধাজনক না।
এতে, প্রচুর সময় লেগে যাবে।
External CSS কাকে বলে ?
CSS এর এই প্রক্রিয়াতে, একটি text editor এর মাধ্যমে CSS codes লিখে সেই ফাইল টিকে .css extension এর সাথে save করে দেওয়া হয়।
এর পর, যেই ওয়েবপেজের মধ্যে style sheet apply করতে হয়, সেখানে HTML এর সাহায্যে CSS file টিকে link করে দেওয়া হয়।
CSS file টিকে link করার জন্যে, ওয়েব পেজের <head> সেকশন এর মধ্যে <link> tag এর ব্যবহার করা হয়।
ওয়েবপেজ এর বাইরের একটি CSS file লিংক করে ব্যবহার করা হয় বলেই,
এই style sheet এর প্রক্রিয়াকে “external CSS” বলা হয়।
Inline CSS কি ?
HTML এর যেকোনো single / specific element গুলোকে style করার জন্য CSS এর এই প্রকার ব্যবহার করা হয়।
এক্ষেত্রে, আপনার কেবল প্রয়োজনীয় HTML tag এর মধ্যেই style attribute যোগ করতে হয়।
ধরুন, আপনি আপনার ওয়েবসাইটের sidebar এর মধ্যে থাকা কেবল text এর size বা color চেঞ্জ করতে চাচ্ছেন,
এক্ষেত্রে, আপনি কেবল website এর sidebar এর সাথে জড়িত HTML tag এর মধ্যে CSS code apply করলেই কাজ হয়ে যাবে।
এমনিতে, web designing এর ক্ষেত্রে প্রত্যেকটি CSS এর প্রকার ব্যবহার হয়েই থাকে।
CSS এর কাজ কি ? কেন ব্যবহার করা হয় সি এস এস
ওপরে যদি আপনারা ভালো করে মন দিয়ে বিষয় গুলো পড়েছেন, তাহলে অবশই বুঝতে পেরেছেন যে,
CSS এর কাজ হলো, “একটি ওয়েবপেজের মধ্যে স্টাইল (style) ও ডিজাইন (design) যোগ করা”।
Webpage এর page layout, text color, font এবং text style formatting ইত্যাদি সবটাই CSS এর মাধ্যমে করা হয়।
বলতে গেলে, সি এস এস হলো অনেক শক্তিশালী ও আধুনিক style sheet language, যেটার ব্যবহার করে আপনার ওয়েব পেজে থাকা content গুলোর looks ও style নিয়ন্ত্রণ করতে পারি।
ধরুন, আপনি একটি ওয়েবসাইট তৈরি করেছেন।
এখন, আপনি চাচ্ছেন আপনার ওয়েবসাইটের আর্টিকেল টাইটেল এর রং বদলাতে এবং সাইজ চেঞ্জ করতে।
এক্ষেত্রে, আপনি সহজেই কেবল কিছু সাধারণ CSS codes এর ব্যবহার করে, নিজের ওয়েবসাইটের article title এর size এবং color বদলে দিতে পারবেন।
এভাবেই, title এবং content এর মধ্যে padding যোগ করা, paragraph এর মধ্যে space / padding ইত্যাদি এই ধরণের styling গুলো CSS এর মাধ্যমে সহজেই করা সম্ভব।
Web designing এর ক্ষেত্রে CSS এর গুরুত্ব কতটা বেশি, সেটা আপনারা কেবল তখন বুঝতে পারবেন, যখন CSS এর লাভ ও সুবিধে গুলো ভালো করে বুঝতে পারবেন।
সি এস এস (CSS) এর লাভ ও সুবিধা গুলো
- সহজেই স্টাইলিং – CSS এর মাধ্যমে অনেক সহজেই যেকোনো ওয়েবপেজ style ও design করা সম্ভব। আপনি একবার যেকোনো CSS code লিখে সেই কোডটিকে প্রয়োজন হিসেবে আলাদা আলাদা HTML property গুলোতে ব্যবহার করতে পারবেন। তাছাড়া, লিখে নেওয়া কোড গুলোকে অন্যান্য ওয়েবপেজ বা ওয়েবসাইটের মধ্যে ব্যবহার করতে পারবেন।
- পেজ লোড টাইম কম রাখে – CSS এর মাধ্যমে page design করতে প্রচুর কম codes এর ব্যবহার হয়ে থাকে। তাই, যতটা কম পরিমানে codes একটি webpage এর মধ্যে ব্যবহার হয়ে থাকবে, সেই পেজের লোডিং স্পিড ও ভালো থাকবে।
- সহজ ব্যবহার – আপনি সম্পূর্ণ ওয়েবসাইটের জন্য কেবল একটি stylesheet এর মধ্যে CSS rules set করতে পারবেন। মানে, সম্পূর্ণ ওয়েবসাইট ডিজাইন ও স্টাইল করার জন্য প্রত্যেকটি কোড কেবল একটি মাত্র stylesheet file তৈরি করলেই হয়ে যাবে। ফলে, সম্পূর্ণ ওয়েবসাইটের CSS code একটি জায়গাতেই থেকে যায়।
- Responsive design – কেবল HTML এর ব্যবহার করে একটি ওয়েবসাইট আলাদা আলাদা screen size এর device এর জন্য optimize করা সম্ভব না। তবে, CSS এর Media Queries Rules ব্যবহার করে, আপনি যেকোনো ওয়েবসাইট কে আলাদা আলাদা device screen size এর জন্য responsive বানিয়ে নিতে পারবেন
CSS কিভাবে শিখব ?
CSS শেখার জন্য মূলত আপনাকে একটি Web designing এর course বা HTML এর course করতে হয়।
এমনিতে, আপনারা চাইলে আলাদা করে কেবল CSS অবশই শিখতে পারবেন।
সি এস এস (CSS) কিভাবে শিখব, এই প্রশ্নের উত্তর কিন্তু অনেক।
তবে, ইন্টারনেটের কাছে যেকোনো প্রশ্ন বা সমস্যার সমাধান আমরা পেয়েই যাই।
তাই, যদি আপনারা গুগলে “How to learn CSS in Bangla” লিখে সার্চ করে দেখেন,
তাহলে অবশই বিভিন্ন ওয়েবসাইট পেয়ে যাবেন।
তবে, ইন্টারনেট থেকে গুরুত্বপূর্ণ ও সঠিক তথ্য খুঁজে বের করাটাও এক সমস্যার ব্যাপার।
তাই, আপনারা সোজা এমন কিছু ওয়েবসাইটের সাহায্য নিজে CSS শিখতে পারেন, যেগুলো বিস্বাসী এবং যেখান থেকে আপনারা সঠিক তথ্য পেয়ে যেতে পারবেন।
Best websites to learn CSS online
- W3schools.com
- Codecademy.com
- Tutorialspoint.com
- Css-tricks.com
- Javatpoint.com
- Csstutorial.net
- Cssbasics.com
Online CSS course জয়েন করুন
ইন্টারনেটে বিভিন্ন অনলাইন কোর্স প্লাটফর্ম রয়েছে, যেগুলোর মাধ্যমে আপনারা professionally ও সম্পূর্ণ সঠিক ভাবে CSS শিখতে পারবেন।
বর্তমান সময়ে e-learning বা online learning জনপ্রিয়তা প্রচুর বেরে গেছে।
তাই, আপনি অল্প খোঁজ খবর নিলেই বিভিন্ন অনলাইন ফ্রি ও পেইড কোর্স পেয়ে যাবেন সি এস এস শেখার জন্য।
তবে, যদি আপনারা সামান্য টাকা দিয়ে সম্পূর্ণ প্রফেশনাল ভাবে CSS course করতে চাচ্ছেন,
তাহলে আমি আপনাদের Udemy এর ব্যবহার করার পরামর্শ দিবো।
YouTube এর মাধ্যমে CSS শিখুন
YouTube হলো সব থেকে জনপ্রিয় একটি online video portal যেখানে আমরা যেকোনো ধরণের videos পেয়ে থাকি।
তাই, যদি আপনারা YouTube এর মধ্যে CSS course সার্চ করে দেখেন,
তাহলে প্রচুর ফ্রি সি এস এস কোর্স অবশই পেয়ে যাবেন।
আমি পরামর্শ দিবো, সোজা CSS course সার্চ না করে আপনারা web designing বা HTML course এর বিষয়ে সার্চ করুন।
এগুলোর মধ্যেই CSS ও রয়েছে।
CSS এবং HTML এর মধ্যে পার্থক্য কি ?
- HTML এর কাজ হলো HTML elements এর মাধ্যমে ওয়েবসাইট / ওয়েবপেজ এর গঠন (structure) তৈরি করা। তবে, CSS এর কাজ হলো html element গুলোর design এবং style বদলানো বা যোগ করা।
- HTML file এর মধ্যে CSS ব্যবহার করা সম্ভব। তবে, CSS style sheet এর মধ্যে html ব্যবহার করা সম্ভব না।
- এইচ টি এম এল (HTML) এর কোনো সংজ্ঞায়িত পদ্ধতি নেই। তবে, CSS এর ক্ষেত্রে এর ৩ টি আলাদা আলাদা সংজ্ঞায়িত পদ্ধতি রয়েছে। যেমন, Inline CSS code, Internal এবং external stylesheet.
- HTML মানে হলো “Hyper Text Markup Language”. তবে, CSS মানে হলো “Cascading Style Sheets”.
আমাদের শেষ কথা,
তাহলে বন্ধুরা, আশা করছি আজকের আর্টিকেলের মাধ্যমে আপনারা সি এস এস (CSS) এর বিষয়ে সম্পূর্ণটা বুঝতে পেরেছেন।
CSS মানে কি (About CSS in Bengali), বিষয়টি নিয়ে যদি আপনার মনে কোনো ধরণের প্রশ্ন বা পরামর্শ থাকে,
তাহলে নিচে কমেন্টের মাধ্যমে জানিয়ে দিবেন।
আমার সব সময় এটাই চেষ্টা রয়েছে যাতে আমি আপনাদের সম্পূর্ণ সঠিক ও কাজের তথ্য প্রদান করতে পারি।
তাই, আর্টিকেলটি ভালো লেগে থাকলে share অবশই করবেন।
