25 KiB

Raw Blame History Unescape Escape

Terrarium Project Part 2: CSS পরিচিতি

স্কেচনোট: Tomomi Imura

আপনার HTML টেরারিয়ামটি মনে আছে, যা দেখতে বেশ সাধারণ ছিল? CSS এর মাধ্যমে আমরা সেই সাধারণ কাঠামোকে চমৎকার কিছুতে রূপান্তরিত করব।

যদি HTML একটি বাড়ির ফ্রেম তৈরির মতো হয়, তাহলে CSS হলো সেই সবকিছু যা বাড়িটিকে বাসযোগ্য করে তোলে - রঙের পছন্দ, আসবাবপত্রের বিন্যাস, আলোর ব্যবস্থা এবং কক্ষগুলোর মধ্যে সংযোগ। ভাবুন কীভাবে ভার্সাই প্রাসাদ একটি সাধারণ শিকার লজ থেকে শুরু করে সাজসজ্জা এবং বিন্যাসের যত্নের মাধ্যমে বিশ্বের অন্যতম চমৎকার ভবনে রূপান্তরিত হয়েছে।

আজ আমরা আপনার টেরারিয়ামকে কার্যকরী থেকে পরিপাটি করে তুলব। আপনি শিখবেন কীভাবে উপাদানগুলোকে সঠিকভাবে স্থাপন করতে হয়, লেআউটগুলোকে বিভিন্ন স্ক্রিন সাইজের সাথে মানিয়ে নিতে হয় এবং এমন ভিজ্যুয়াল আকর্ষণ তৈরি করতে হয় যা ওয়েবসাইটকে আকর্ষণীয় করে তোলে।

এই পাঠের শেষে, আপনি দেখবেন কীভাবে কৌশলগত CSS স্টাইলিং আপনার প্রকল্পকে নাটকীয়ভাবে উন্নত করতে পারে। চলুন আপনার টেরারিয়ামে কিছু স্টাইল যোগ করি।

প্রি-লেকচার কুইজ

CSS এর সাথে শুরু করা

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

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

💡 প্রো টিপ: CSS নতুন বৈশিষ্ট্য এবং সক্ষমতার সাথে ক্রমাগত বিকশিত হচ্ছে। প্রোডাকশন প্রকল্পে ব্যবহার করার আগে নতুন CSS বৈশিষ্ট্যের জন্য ব্রাউজার সাপোর্ট যাচাই করতে সর্বদা CanIUse.com চেক করুন।

এই পাঠে আমরা যা অর্জন করব:

সম্পূর্ণ ভিজ্যুয়াল ডিজাইন তৈরি করা আপনার টেরারিয়ামের জন্য আধুনিক CSS কৌশল ব্যবহার করে
অন্বেষণ করা মৌলিক ধারণাগুলো যেমন ক্যাসকেড, উত্তরাধিকার এবং CSS সিলেক্টর
বাস্তবায়ন করা প্রতিক্রিয়াশীল অবস্থান এবং লেআউট কৌশল
নির্মাণ করা টেরারিয়াম কন্টেইনার CSS আকৃতি এবং স্টাইলিং ব্যবহার করে

পূর্বশর্ত

আপনার টেরারিয়ামের HTML কাঠামোটি আগের পাঠ থেকে সম্পন্ন করা উচিত এবং এটি স্টাইল করার জন্য প্রস্তুত থাকা উচিত।

📺 ভিডিও রিসোর্স: এই সহায়ক ভিডিও ওয়াকথ্রু দেখুন

আপনার CSS ফাইল সেট আপ করা

স্টাইলিং শুরু করার আগে, আমাদের HTML এর সাথে CSS সংযুক্ত করতে হবে। এই সংযোগটি ব্রাউজারকে জানায় কোথায় আমাদের টেরারিয়ামের জন্য স্টাইলিং নির্দেশাবলী খুঁজে পাওয়া যাবে।

আপনার টেরারিয়াম ফোল্ডারে একটি নতুন ফাইল তৈরি করুন যার নাম দিন style.css, তারপর এটি আপনার HTML ডকুমেন্টের <head> সেকশনে লিঙ্ক করুন:

<link rel="stylesheet" href="./style.css" />

এই কোডটি যা করে:

সংযোগ তৈরি করে আপনার HTML এবং CSS ফাইলগুলোর মধ্যে
ব্রাউজারকে বলে style.css থেকে স্টাইল লোড এবং প্রয়োগ করতে
ব্যবহার করে rel="stylesheet" অ্যাট্রিবিউট যা নির্দেশ করে এটি একটি CSS ফাইল
রেফারেন্স করে ফাইল পাথ href="./style.css" এর মাধ্যমে

CSS ক্যাসকেড বোঝা

কখনো ভেবেছেন কেন CSS কে "Cascading" Style Sheets বলা হয়? স্টাইলগুলো একটি জলপ্রপাতের মতো নিচে নেমে আসে এবং কখনও কখনও তারা একে অপরের সাথে সংঘর্ষ করে।

ভাবুন কীভাবে সামরিক কমান্ড কাঠামো কাজ করে - একটি সাধারণ আদেশ হতে পারে "সব সৈন্য সবুজ পোশাক পরবে," কিন্তু আপনার ইউনিটের জন্য একটি নির্দিষ্ট আদেশ হতে পারে "অনুষ্ঠানের জন্য নীল পোশাক পরুন।" আরও নির্দিষ্ট নির্দেশনা অগ্রাধিকার পায়। CSS একই যুক্তি অনুসরণ করে, এবং এই শ্রেণিবিন্যাস বোঝা ডিবাগিংকে অনেক সহজ করে তোলে।

ক্যাসকেড অগ্রাধিকার নিয়ে পরীক্ষা-নিরীক্ষা

চলুন একটি স্টাইল সংঘর্ষ তৈরি করে ক্যাসকেডের কার্যকারিতা দেখি। প্রথমে আপনার <h1> ট্যাগে একটি ইনলাইন স্টাইল যোগ করুন:

<h1 style="color: red">My Terrarium</h1>

এই কোডটি যা করে:

প্রয়োগ করে একটি লাল রঙ সরাসরি <h1> উপাদানে ইনলাইন স্টাইলিং ব্যবহার করে
ব্যবহার করে style অ্যাট্রিবিউট HTML এর মধ্যে CSS এম্বেড করতে
তৈরি করে এই নির্দিষ্ট উপাদানের জন্য সর্বোচ্চ অগ্রাধিকার স্টাইল নিয়ম

এরপর, আপনার style.css ফাইলে এই নিয়মটি যোগ করুন:

h1 {
  color: blue;
}

উপরের কোডে আমরা:

সংজ্ঞায়িত করেছি একটি CSS নিয়ম যা সব <h1> উপাদানকে লক্ষ্য করে
সেট করেছি টেক্সটের রঙ নীল একটি এক্সটার্নাল স্টাইলশিট ব্যবহার করে
তৈরি করেছি একটি নিম্ন অগ্রাধিকার নিয়ম ইনলাইন স্টাইলের তুলনায়

✅ জ্ঞান যাচাই: আপনার ওয়েব অ্যাপে কোন রঙ প্রদর্শিত হয়? কেন সেই রঙটি জয়ী হয়? এমন পরিস্থিতি কি আপনি ভাবতে পারেন যেখানে আপনি স্টাইলগুলোকে ওভাররাইড করতে চাইবেন?

💡 CSS অগ্রাধিকার ক্রম (উচ্চ থেকে নিম্ন):

ইনলাইন স্টাইল (style attribute)

IDs (#myId)

Classes (.myClass) এবং attributes

Element selectors (h1, div, p)

ব্রাউজারের ডিফল্ট

CSS উত্তরাধিকার কার্যক্রমে

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

তবে, সবকিছু উত্তরাধিকার সূত্রে পাওয়া যায় না। ফন্ট এবং রঙের মতো টেক্সট স্টাইলগুলো উত্তরাধিকার সূত্রে পাওয়া যায়, কিন্তু মার্জিন এবং বর্ডারের মতো লেআউট বৈশিষ্ট্যগুলো উত্তরাধিকার সূত্রে পাওয়া যায় না। যেমন সন্তানরা শারীরিক বৈশিষ্ট্য উত্তরাধিকার সূত্রে পেতে পারে কিন্তু তাদের বাবা-মায়ের ফ্যাশন পছন্দ নয়।

ফন্ট উত্তরাধিকার পর্যবেক্ষণ

চলুন <body> উপাদানে একটি ফন্ট ফ্যামিলি সেট করে উত্তরাধিকার পর্যব চলুন টেরারিয়াম জারটি ধাপে ধাপে তৈরি করি। প্রতিটি অংশে absolute পজিশনিং এবং responsive ডিজাইনের জন্য শতাংশ-ভিত্তিক সাইজিং ব্যবহার করা হয়েছে:

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

টেরারিয়াম নির্মাণ বোঝা:

ব্যবহার করে শতাংশ-ভিত্তিক ডাইমেনশন, যা সব স্ক্রিন সাইজে স্কেলিং নিশ্চিত করে
পজিশন করে উপাদানগুলোকে সঠিকভাবে স্ট্যাক এবং অ্যালাইন করার জন্য
প্রয়োগ করে বিভিন্ন অপাসিটি মান, যা গ্লাসের স্বচ্ছতার প্রভাব তৈরি করে
ইমপ্লিমেন্ট করে z-index লেয়ারিং, যাতে গাছগুলো জারের ভিতরে দেখা যায়
যোগ করে সূক্ষ্ম বক্স-শ্যাডো এবং পরিশীলিত বর্ডার-রেডিয়াস, যা আরও বাস্তবসম্মত চেহারা দেয়

শতাংশ-ভিত্তিক Responsive ডিজাইন

দেখুন কিভাবে সব ডাইমেনশন পিক্সেল মানের পরিবর্তে শতাংশ ব্যবহার করা হয়েছে:

কেন এটি গুরুত্বপূর্ণ:

নিশ্চিত করে যে টেরারিয়াম যেকোনো স্ক্রিন সাইজে প্রোপোরশনালি স্কেল করে
রক্ষা করে জারের উপাদানগুলোর ভিজ্যুয়াল সম্পর্ক
প্রদান করে মোবাইল ফোন থেকে বড় ডেস্কটপ মনিটর পর্যন্ত একটি কনসিস্টেন্ট অভিজ্ঞতা
অনুমতি দেয় ডিজাইন ভিজ্যুয়াল লেআউট ভেঙে না গিয়ে মানিয়ে নিতে

CSS ইউনিটের ব্যবহার

আমরা বর্ডার-রেডিয়াসের জন্য rem ইউনিট ব্যবহার করছি, যা রুট ফন্ট সাইজের সাথে স্কেল করে। এটি আরও অ্যাক্সেসযোগ্য ডিজাইন তৈরি করে, যা ব্যবহারকারীর ফন্ট পছন্দকে সম্মান করে। CSS relative units সম্পর্কে আরও জানুন অফিসিয়াল স্পেসিফিকেশনে।

✅ ভিজ্যুয়াল পরীক্ষা: এই মানগুলো পরিবর্তন করে প্রভাবগুলো পর্যবেক্ষণ করুন:

জারের অপাসিটি 0.5 থেকে 0.8 করুন – এটি কাচের চেহারায় কীভাবে প্রভাব ফেলে?
মাটির রঙ #3a241d থেকে #8B4513 করুন – এর ভিজ্যুয়াল প্রভাব কী?
মাটির z-index 2 করুন – লেয়ারিংয়ে কী ঘটে?

GitHub Copilot Agent Challenge 🚀

Agent মোড ব্যবহার করে নিম্নলিখিত চ্যালেঞ্জ সম্পন্ন করুন:

বর্ণনা: একটি CSS অ্যানিমেশন তৈরি করুন যা টেরারিয়ামের গাছগুলোকে হালকা বাতাসে দুলতে দেখায়। এটি CSS অ্যানিমেশন, ট্রান্সফর্ম এবং কীফ্রেম অনুশীলন করতে সাহায্য করবে এবং টেরারিয়ামের ভিজ্যুয়াল আকর্ষণ বাড়াবে।

প্রম্পট: CSS কীফ্রেম অ্যানিমেশন যোগ করুন, যাতে টেরারিয়ামের গাছগুলো হালকা বাতাসে একপাশ থেকে অন্যপাশে দুলতে থাকে। একটি দুলানোর অ্যানিমেশন তৈরি করুন, যা প্রতিটি গাছকে সামান্য (২-৩ ডিগ্রি) বামে এবং ডানে ঘোরায়, ৩-৪ সেকেন্ডের সময়কাল সহ। এটি যেন অনন্তকাল ধরে লুপ করে এবং প্রাকৃতিক গতির জন্য একটি ইজিং ফাংশন প্রয়োগ করে।

agent mode সম্পর্কে আরও জানুন এখানে।

🚀 চ্যালেঞ্জ: কাচের প্রতিফলন যোগ করা

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

আপনি সূক্ষ্ম হাইলাইট তৈরি করবেন, যা কাচের পৃষ্ঠে আলো প্রতিফলিত হওয়ার মতো দেখাবে। এই পদ্ধতি রেনেসাঁ চিত্রশিল্পী যেমন Jan van Eyck কিভাবে আলো এবং প্রতিফলন ব্যবহার করে আঁকা কাচকে ত্রিমাত্রিক দেখাতেন তার মতো। আপনি যা অর্জন করতে চান তা হলো:

আপনার চ্যালেঞ্জ:

তৈরি করুন সূক্ষ্ম সাদা বা হালকা রঙের ডিম্বাকৃতির আকৃতি কাচের প্রতিফলনের জন্য
কৌশলগতভাবে পজিশন করুন জারের বাম পাশে
প্রয়োগ করুন যথাযথ অপাসিটি এবং ব্লার প্রভাব, যাতে বাস্তবসম্মত আলো প্রতিফলন হয়
ব্যবহার করুন border-radius অর্গানিক, বুদবুদ-সদৃশ আকৃতি তৈরি করতে
পরীক্ষা করুন গ্রেডিয়েন্ট বা বক্স-শ্যাডো দিয়ে আরও বাস্তবতার জন্য

পোস্ট-লেকচার কুইজ

আপনার CSS জ্ঞান বাড়ান

CSS প্রথমে জটিল মনে হতে পারে, তবে এই মূল ধারণাগুলো বোঝা আরও উন্নত কৌশলের জন্য একটি শক্ত ভিত্তি প্রদান করে।

আপনার পরবর্তী CSS শেখার ক্ষেত্রগুলো:

Flexbox - উপাদানগুলোর অ্যালাইনমেন্ট এবং ডিস্ট্রিবিউশন সহজ করে
CSS Grid - জটিল লেআউট তৈরি করার জন্য শক্তিশালী টুল প্রদান করে
CSS Variables - পুনরাবৃত্তি কমায় এবং মেইনটেইনেবিলিটি উন্নত করে
Responsive design - নিশ্চিত করে সাইটগুলো বিভিন্ন স্ক্রিন সাইজে ভালোভাবে কাজ করে

ইন্টারঅ্যাকটিভ লার্নিং রিসোর্স

এই আকর্ষণীয়, হাতে-কলমে গেমগুলো দিয়ে এই ধারণাগুলো অনুশীলন করুন:

🐸 Flexbox Froggy - মজার চ্যালেঞ্জের মাধ্যমে Flexbox আয়ত্ত করুন
🌱 Grid Garden - ভার্চুয়াল গাজর চাষ করে CSS Grid শিখুন
🎯 CSS Battle - কোডিং চ্যালেঞ্জের মাধ্যমে আপনার CSS দক্ষতা পরীক্ষা করুন

অতিরিক্ত শেখা

CSS এর মৌলিক বিষয়গুলো সম্পর্কে বিস্তারিত জানতে এই Microsoft Learn মডিউল সম্পূর্ণ করুন: Style your HTML app with CSS

অ্যাসাইনমেন্ট

CSS Refactoring

অস্বীকৃতি:
এই নথিটি AI অনুবাদ পরিষেবা Co-op Translator ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে সৃষ্ট কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যার জন্য আমরা দায়ী থাকব না।

25 KiB Raw Blame History Unescape Escape