সি এস এস কি (What is CSS in Bangla) | CSS কোথায় এবং কিভাবে শিখবেন? : বন্ধুরা আমরা যখন Blogging বা Web Designing এর কাজ করে থাকি. তখন আমরা, HTML, CSS, JavaScript, PHP ইত্যাদি বিষয়ের সাথে পরিচিত হয়ে থাকি. আমরা HTML কি এ বিষয়ে কম বেশি জানি. সংক্ষেপে বলি আমরা যখন কোন Website তৈরী করি তখন প্রথমে Markup অথবা HTML Code লিখে থাকি.
কিন্তু এই HTML কোডগুলোতে যদি কোন Style দেওয়া না হয় তাহলে HTML ফাইলটি পরিপুর্ণতা পায় না বা আমাদের ডিজাইন মত হয় না বা যেভাবে HTML কোডগুলো লেখা হয়েছে সেভাবেই দেখাবে। কিন্তু আমরা যদি HTML ফাইলকে আমাদের ডিজাইন মত দেখাতে চাই তাহলে আমাদেরকে অবশ্যই CSS ব্যবহার করতে হবে। যার ফলে আমরা কোন ট্যাগকে ইচ্ছা মত কালার, ফন্ট সাইজ ইত্যাদি নির্ধারণ করে দিতে পারব.
আর তাই Web Designing এর জগতের অনেক গুরুত্বপূর্ণ প্রশ্ন “CSS মানে কি ?“, এর উত্তর আজকের এই Article এ আমরা জানবো.CSS আসার আগে কোনো ওয়েব ডকুমেন্ট (Web Document) এর কোনো Structure, Style বা Design ছিলো না.ফলে যখন একটি ওয়েবসাইট বা ওয়েব পেজের মধ্যে Visit করা হতো, তখন সেখানে কেবল উশৃঙ্খল TEXT ছাড়া কিছুই থাকতোনা.আর তাই, এই সাধারণ টেক্সট (Text) গুলো পড়তে কারো ভালো লাগতোনা.
তবে এই সমস্যার সমাধান করতে গিয়ে HTML Style Tags এর বিকাশ হলো.কিন্তু এর দ্বারা ও এই সমস্যার সমাধান করা গেলো না.আর তাই এই স্টাইল Tag টি কে আরো অধিক উন্নত করে একটি আলাদা রকমের ওয়েব ডকুমেন্ট ভাষার (Web Document Language) এর বিকাশ করা হলো.আর এই আধুনিক Web Document ভাষাটির নাম হলো “CSS”.এবার চলুন CSS কি বা কাকে বলে? বিষয়টি আরো ভালো করে জেনেনেই.
Table of Contents
সি এস এস কি – What is CSS in Bangla
বন্ধুরা CSS আসলে একটি আধুনিক ভাষা যার মাধ্যমে একটি Web Document / Website এর Design, Style, Layout বা Structure তৈরি করা যেতে পারে.এই Web Document Language টিকে W3C – World Wide Web Consortium দ্বারা বিকশিত করা হয়েছে.CSS এর ব্যবহার করা হয় একটি Web Page বা Website কে সাজানোর জন্য.
এই CSS ভাষার মাধ্যমে আপনি একটি ওয়েব পেজের Colour, Front, Size of Text, Spacing Between Elements, Background Images or Background Colors, আলাদা আলাদা Screen Size এর ডিভাইস এর জন্য আলাদা আলাদা ওয়েব পেজ Display সাইজ এবং আরো নানান বিষয় গুলো নিয়ন্ত্রণ করতে পারবেন.
মনে রাখবেন, একটি Web Page কে তৈরি করার ক্ষেত্রে HTML এবং CSS, দুজনের ই গুরুত্বপূর্ণ ভূমিকা রয়েছে.HTML এর মাধ্যমে Web Page টিকে আকার দেওয়া হয় এবং CSS এর মাধ্যমে Web Page টি কে নতুন এবং আকর্ষণীয় রূপ দেওয়া হয়.CSS এবং HTML এর ব্যবহার কিন্তু একসাথেই হয়ে থাকে.
তবে, CSS ছাড়া HTML এর ব্যবহার সম্ভব. তবে, HTML ছাড়া CSS এর ব্যবহার করা যাবেনা.CSS একটি অনেক সহজ সরল Computer Language যেটাকে সহজেই শেখা যেতে পারে.HTML এবং CSS Codes গুলোকে লিখার জন্য নোটপ্যাড (Notepad) এর মতো একটি Text Editor এর প্রয়োজন হয়ে থাকে.
একটি সাধারণ Website কে আকর্ষণীয় রং-রূপ দেয়ার জন্য CSS Codes এর ব্যবহার করাটা জরুরি.এখন মোটামুটি বুঝলেন তো, “CSS কি” ? ও “CSS কাকে বলে” ? ও What is CSS in Bangla তাহলে চলুন CSC সমন্ধে Details এ জানি .
CSS এর পুরো নাম কি?
CSS এর পূর্ণরূপ হলো “Cascading Style Sheets“.
CSS এর প্রকারভেদ – Types of CSS in Bangla
CSS এর আলাদা আলাদা বিভিন্ন প্রকার রয়েছে. আমরা CSS কে ৩ প্রকারের লিখতে পারি, যেমন :-
- Internal Style Sheet
- External Style Sheet
- Inline CSS Codes
এখন চলুন বিষয় গুলো কে একটি বিস্তারিত ভাবে জেনে নেই
১. Internal Style Sheet কি ?
বন্ধুরা Internal বা Embedded CSS এর ক্ষেত্রে আমাদের Web Page এর Head Section <Head> এর মধ্যে <Style> যোগ করতে হয়.এই CSS Styling এর প্রক্রিয়া ব্যবহার করে, একটি Single Page এর Design করাটা অনেক সহজ কাজ হয়ে দাঁড়ায়.তবে, যদি Website এ প্রচুর Web Page রয়েছে, তাহলে এই প্রক্রিয়া ব্যবহার করে প্রত্যেকটি পেজের <Head> Section এর মধ্যে <Style> যোগ করাটা তেমন সুবিধাজনক নয়.এতে করে প্রচুর সময় খরচ হয়ে যাবে.
২. External CSS কাকে বলে ?
CSS এর এই প্রক্রিয়াতে, একটি Text Editor এর মাধ্যমে CSS Codes লিখে সেই File টিকে CSS Extension এর সাথে Save করে দেওয়া হয়.এর পর, যেই Web Page এর মধ্যে Style Sheet apply করতে হয়, সেখানে HTML এর সাহায্যে CSS File টিকে Link করে দেওয়া হয়.CSS File টিকে Link করার জন্যে, Web Page এর <Head> Section এর মধ্যে <Link> Tag এর ব্যবহার করা হয়.Web Page এর বাইরের একটি CSS File লিংক করে ব্যবহার করা হয় বলেইএই style sheet এর প্রক্রিয়াকে “External CSS” বলা হয়.
৩. Inline CSS কি ?
HTML এর যেকোনো Single / Specific Element গুলোকে Style করার জন্য CSS এর এই প্রকার ব্যবহার করা হয়.এক্ষেত্রে, আপনার কেবল প্রয়োজনীয় HTML Tag এর মধ্যেই Style Attribute যোগ করতে হয়.ধরুন, আপনি আপনার Website এর Sidebar এর মধ্যে থাকা কেবল Text এর Size বা Color Change করতে চাইচ্ছেন, এক্ষেত্রে আপনি কেবল Website এর Sidebar এর সাথে জড়িত HTML Tag এর মধ্যে CSS Code Apply করলেই কাজ হয়ে যাবে.এমনিতে, Web Designing এর ক্ষেত্রে প্রত্যেকটি CSS এর প্রকার ব্যবহার হয়েই থাকে.
CSS এবং HTML এর মধ্যে পার্থক্য কি ?
- বন্ধুরা HTML এর কাজ হলো HTML Elements এর মাধ্যমে Website / Web Page এর গঠন (Structure) তৈরি করা। তবে, CSS এর কাজ হলো HTML Element গুলোর Design এবং Style বদলানো বা যোগ করা.
- HTML এর কোনো সংজ্ঞায়িত পদ্ধতি নেই। তবে CSS এর ক্ষেত্রে এর ৩ টি আলাদা আলাদা সংজ্ঞায়িত পদ্ধতি রয়েছে। যেমন, Inline CSS Code, Internal এবং External Style Sheet.
- HTML মানে হলো “Hyper Text Markup Language”. তবে, CSS মানে হলো “Cascading Style Sheets”.
- HTML File এর মধ্যে CSS ব্যবহার করা সম্ভব। তবে, CSS Style Sheet এর মধ্যে HTML ব্যবহার করা সম্ভব না.
CSS এর সুবিধা কি ? – Benefits of CSS in Bangla
ক) Page Load Time কম রাখে
CSS এর মাধ্যমে Page Design করতে প্রচুর কম Codes এর ব্যবহার হয়ে থাকে। তাই, যতটা কম পরিমানে Codes একটি Web Page এর মধ্যে ব্যবহার হয়ে থাকবে, সেই পেজের Loading Speed ও ভালো থাকবে.
খ) সহজ Styling
বন্ধুরা CSS এর মাধ্যমে অনেক সহজেই যেকোনো Webpage এর Style ও Design করা সম্ভব. আপনি একবার যেকোনো CSS Code লিখে সেই কোডটিকে প্রয়োজন হিসেবে আলাদা আলাদা HTML Property গুলোতে ব্যবহার করতে পারবে. তাছাড়া, লিখে নেওয়া Code গুলোকে অন্যান্য ওয়েবপেজ বা Website এর মধ্যে ব্যবহার করতে পারবেন.
গ) Responsive design
কেবল HTML এর ব্যবহার করে একটি Website আলাদা আলাদা Screen Size এর Device এর জন্য Optimize করা সম্ভব না. তবে, CSS এর Media Queries Rules ব্যবহার করে, আপনি যেকোনো Website কে আলাদা আলাদা Device Screen Size এর জন্য Responsive বানিয়ে নিতে পারবেন.
ঘ) সহজ ব্যবহার
আপনি সম্পূর্ণ Website এর জন্য কেবল একটি style Sheet এর মধ্যে CSS Rules Set করতে পারবেন। মানে, সম্পূর্ণ ওয়েবসাইট Design ও Style করার জন্য প্রত্যেকটি কোড কেবল একটি মাত্র Style Sheet File তৈরি করলেই হয়ে যাবে। ফলে, সম্পূর্ণ Website এর CSS Code একটি জায়গাতেই থেকে যায়.
CSS কোথায় এবং কিভাবে শিখবেন ?
বন্ধুরা CSS শেখার জন্য মূলত আপনাকে একটি Web Designing এর Course বা HTML এর Course করতে হয়.এমনিতেও আপনারা চাইলে আলাদা করে কেবল CSS অবশই শিখতে পারবেন.যদি বলেন সি এস এস (CSS) কিভাবে শিখব, এই প্রশ্নের উত্তর কিন্তু অনেক আছে.তার জন্য ইন্টারনেটের কাছ থেকে যেকোনো প্রশ্ন বা সমস্যার সমাধান আমরা পেয়েই যাই.তাই যদি আপনারা Google এ “How to learn CSS in Bangla” লিখে Search করেন,তাহলে অবশই অনেক Website আপনারা পেয়ে যাবেন.
তবে ইন্টারনেট থেকে গুরুত্বপূর্ণ ও সঠিক তথ্য খুঁজে বের করাটাও এক সমস্যার ব্যাপার.তাই আপনারা সোজা এমন কিছু Website এর সাহায্য নিজে CSS শিখতে পারেন, যেগুলো বিস্বাসী এবং যেখান থেকে আপনারা সঠিক তথ্য পেয়ে যেতে পারবেন. যেমন :-
Online CSS Course এর মাধ্যমে
বন্ধুরা ইন্টারনেটে বিভিন্ন অনলাইন কোর্স Platform রয়েছে, যেগুলোর মাধ্যমে আপনারা Professionally ও সম্পূর্ণ সঠিক ভাবে CSS শিখতে পারবেন.বর্তমান সময়ে e-learning বা Online Learning জনপ্রিয়তা প্রচুর বেড়ে গেছে.
তাই আপনি অল্প খোঁজ খবর নিলেই বিভিন্ন Online Free ও Paid Course পেয়ে যাবেন CSS শেখার জন্য.তবে যদি আপনারা সামান্য টাকা দিয়ে সম্পূর্ণ Professional ভাবে CSS Course করতে চাইচ্ছেন তাহলে আমি আপনাদের Udemy এর ব্যবহার করার পরামর্শ দিবো.
YouTube এর মাধ্যমে
YouTube হলো সব থেকে জনপ্রিয় একটি Online Video Portal যেখানে আমরা যেকোনো ধরণের Videos পেয়ে থাকি.তাই যদি আপনারা YouTube এর মধ্যে CSS Course Search করে দেখেন তাহলে প্রচুর Free CSS Course অবশই পেয়ে যাবেন.আমি পরামর্শ দেবো সোজা CSS Course Search না করে আপনারা Web Designing বা HTML Course এর বিষয়ে Search করুন.এগুলোর মধ্যেই CSS Course ও রয়েছে.
CSS এর কাজ কি ?
ওপরে যদি আপনারা ভালো করে মন দিয়ে বিষয় গুলো পড়েছেন, তাহলে অবশই বুঝতে পেরেছেন যে :-
- বন্ধুরা CSS এর কাজ হলো, “একটি Web Page এর মধ্যে Style ও Design যোগ করা”.
- Web Page এর Page Layout, Text Color, Font এবং Text Style Formatting ইত্যাদি সবটাই CSS এর মাধ্যমে করা হয়.
- বলতে গেলে, সিস হলো অনেক শক্তিশালী ও আধুনিক Style Sheet Language, যার ব্যবহার করে আপনার Web Page এ থাকা content গুলোর looks ও style নিয়ন্ত্রণ করতে পারি.
- বিছুটি পাতার উপকারিতা, ব্যবহার এবং পার্শ্ব প্রতিক্রিয়া
- তুলসী পাতার উপকারিতা, ব্যবহার এবং ক্ষতিকর দিক
কেন CSS এর ব্যবহার করবেন?
ধরুন, আপনি একটি Website তৈরি করেছেন.এখন, আপনি চাইচ্ছেন আপনার ওয়েবসাইটের Article টির Title এর রং বদলাতে এবং Size চেঞ্জ করতে.এক্ষেত্রে, আপনি সহজেই কেবল কিছু সাধারণ CSS Codes এর ব্যবহার করে, নিজের ওয়েবসাইটের Article Title এর Size এবং Color বদলে দিতে পারবেন. এভাবেই, Title এবং Content এর মধ্যে Padding যোগ করা, Paragraph এর মধ্যে Space / Padding ইত্যাদি এই ধরণের Styling গুলো CSS এর মাধ্যমে সহজেই করা সম্ভব.
আমাদের শেষ কথা
তাই বন্ধুরা, আমি আশা করি আপনি অবশ্যই একটি Article পছন্দ করেছেন (সি এস এস কি (What is CSS in Bangla) | CSS কোথায় এবং কিভাবে শিখবেন?)। আমি সর্বদা এই কামনা করি যে আপনি সর্বদা সঠিক তথ্য পান। এই পোস্টটি সম্পর্কে আপনার যদি কোনও সন্দেহ থাকে তবে আপনাকে অবশ্যই নীচে মন্তব্য করে আমাদের জানান। শেষ অবধি, যদি আপনি Article পছন্দ করেন (What is CSS in Bangla), তবে অবশ্যই Article টি সমস্ত Social Media Platforms এবং আপনার বন্ধুদের সাথে Share করুন।
