CSS Class 01 Review আশা করি আপনার এই ক্লাস রিভিউটি পড়লে সব কিছু ক্লিয়ার হয়ে যাবেন।
Class Date: 27-01-22
Class recording: Here
চলুন তাহলে শুরু করা যাক
- CSS কি?
- CSS হলো একটি একটি ল্যাঙ্গুয়েজ । যার পূর্নরুপ হলো Cascading Style Sheet.
C = Cascading
S = Style
S = Sheet
- কেন CSS দরকার?
- আমরা সবাই html শিখেছি। মোটামুটি আমরা একটি কংকাল টাইপের ওয়েবসাইটের তৈরি করতে পারি HTML ব্যবহার করে। চলেন তাহলে আমরা একটু রাজমিস্ত্রী হয়ে যাই 😀। আমরা একটি বিল্ডিং এর কাজ ধরি। এখন প্রথমে আমাদের রড দিয়ে কলাম বানাতে
হবে। এরপর আমাদের ইট বালু সিমেন্ট দিয়ে কলাম গুলো ভরার করতে হবে। এরপর কিন্তুু আমাদের মোটামুটি একটা বিল্ডিং হয়ে যাবে। এরপর আমরা কি করব? এরপর রং করবো তাই না, দরকার হলে টাইলস লাগাবো, জানালা লাগাবো, এখন জানালা কোথায় লাগাবো সেগুলো কিন্তু আমরা করে থাকি। আসলে আমরা এই আজাইরা পেচাল কেন পারতাছি বলেন। এই যে আমরা যতক্ষন পর্যন্ত ইট বালু সিমেন্ট আর দিয়ে কলাম গুলো তৈরি করছি এটা হলো HTML. আর CSS হলো এই কোথায় রং করব, কোথায় টাইলস লাগাবো, কোথায় জানালা রাখবো, জানালা বড় হবে নাকি ছোট হবে এই জিনিস গুলো।
যদি বলতে যাই CSS হলো একটি ওয়েবসাইট এর রং চং করে, লেখাগুলো ছোট হবে নাকি বড় হবে এমন সব কাজ গুলো করে থাকে। এক কথায় ডিজাইন করে CSS। আশা করি বুঝতে পেরেছেন।
এই ভিডিওটি দেখলে সব ক্লিয়ার হয়ে যাবেন 👇
- CSS কিভাবে লেখা যায়?
- চলুন তাহলে দেখা যাক আসলে CSS কিভাবে লেখা যায়। CSS আমরা ৩ ভাবে লেখতে পারি যেমন : ১। inline css ২।internal css ৩। External css
চলুন দেখা যাক কোনটা কিভাবে লিখতে হয়।
inline css লেখার নিয়ম হলো, চাইলে আমরা tag এর ভিতরে css লেখতে পারি। আর এই লেখতে পারাকে inline css বলে। নিচের উদাহরণ টি একটু দেখেন 👇
<h1 style=” color:red ; “>আমি লাল মিয়া<h1/>
যদি একটু দেখে থাকেন h1 এর ভিতরে style নামে কিছু একটা দেখতে পাচ্ছেন, এরপর একটা
ইকুয়াল বা সমান চিহ্ন এরপর একটা কোটেশন, এরপর লেখছি color এরপর দিয়েছি ক্লোন, এরপর লেখছি red এরপর সেমিক্লোন এরপর আবার কোটেশন। এটা হলো লেখাটা লাল করে ফেলবে। আপনি যদি inline css লেখতে চান তাহলে style এই attribute ব্যবহার করতে হবে। নিয়মন হলো style=” ” এটা আশা করি বুঝাতে পেরেছি।
এরপর internal css , এটা লিখতে হয় head tag এর ভিতরে, head tag এর ভিতরে style নামে একটি ডাবল ট্যাগ নিতে হয়
<style></style> এমন। এটার ভিতরে আমরা css লিখতে পারবো।
আরেকটি হলো external css এটি হলো নতুন বা আলাদা file এ css লেখা। আপনি যেভাবে html ফাইল তৈরি করেছেন। সেভাবে css ফাইলও তৈরি করতে পারবেন। css এর extension হলো
. css
এরপরেও যদি না বুঝে থাকেন তাহলে নিচের ভিডিওটি দেখতে পারেন
external file linklink করা যায় কিভাবে তার ভিডিও দেখুন 👇
- CSS selectors কি?
- Selector শুনে বুঝা যাচ্ছে এটির সাথে সিলেক্ট করা একটা ব্যাপার আছে, আসলে তাই। চলেন তাহলে দেখা যাক কিভাবে selector কাজ করে। আমরা ৩ ভাবে selector ব্যআহার করতে পারি, একটা হলো ট্যাগের নাম ধরে, আরেকটা হলো id ব্যবহার করে, আরেকটা হলো class ব্যআহার করে।
আমরা তো জানি css তিন ভাবে লেখা যায়। প্রথম inline css এই পদ্ধতিতে selector এর
প্রয়োজন হয় না, যখন আমরা internal css বা external css লিখতে যাবো তখন লাগবে। internal css এ লিখবো চলেন, ধরেন আমরা একটি ওয়েবসাইট এ তৈরি করেছি, এখন আমাদের একটি ওয়েবসাইটে h2 কিন্তু অনেক থাকতে পারে, এখন ধরেন আমাদের ওয়েবসাইটে লেখা আছে, “জসীম ভাই” আর “খালিদ ভাই” , জসীম ভাই এটা আছে ধরেন h2 ট্যাগে, খালিদ ভাই এটাও আছে h2 ট্যাগে। এখন আমরা চাচ্ছি “জসীম ভাই” এই লেখাটি হবে লাল কালার, আর “খালিদ ভাই” এই লেখাটি হবে সবুজ কালার। এখন আমরা যদি h2 কে red কালার দেই তাহলে খালিদ ভাই ও লাল জসীম ভাইও লাল হয়ে যাবে। কিন্তুু আমরা তো এটা চাই নাই, এহন কি ভাই আকাম হইছে না একটা?
না আমরা এই আকাম করবো না, তাহলে সমাধান কি? সমাধান হলো selector।
বলছিলাম না ৩ ভাবে select করা যায়। একটি ছিল tag ধরে, দেখলেন ই তো Tag ধরে select
করলে কি আকাম হয়, এটা করবো না বেশি,
আর দুইটা ছিল না id আর class
এই দুইটা নিয়েই আমরা css লেখার সময় খেলা ধুলা করবো
id নিয়ে চলুন খেলা করি,
ঐ যে মনে আছে খালিদ ভাই আর জসীম ভাইয়ের কথা? এখন খালিদ ভাইকে চাচ্ছি সবুজ কালার করতে, এখন একটি id দিব আইডি হচ্ছে একটি selector,
ধরুন, একটি ক্লাসে অনেকগুলো ছাত্র ছাত্রী আছে সবাই তো ছাত্র ছাত্রী , প্রতিজনের কিন্তুু একটা রোল নাম্বার আছে, রোল ১ বললে কিন্তুু শুধু ১ রোল যার সেই দাড়াবো আর কেউ কিন্তুু দাড়াবে না, একই ভাবে যদি আমরা খালিদ ভাইয়ের যে নাম টা ঐটায় যদি একটা id দিয়ে দেই তাহলে কিন্তুু আমরা খালিদ ভাইকে সবুজ কালার করে
দিতে পারবো। ধরেন খালিদ ভাইয়ের id দিলাম khalid উদাহরণ : <h2 id=”khalid” >খালিদ ভাই </h2>
#khalid লিখে যা বলবো এখন খালিদ ভাই কিন্তুু তাই করবে, খালিদ ভাইকে যদি বলি #khalid লাল হও, লাল হয়ে যাবে, যদি বলি খালিদ আরামে দাড়াও, সোজা হও, সে কিন্তুু তাই করবে, এক কথা id ধরে যেহেতু ডাক দিয়েছি, এখন তাকে যা করতে বলবো তাই করবে।
id দিয়ে যখন কাউকে select করবো তখন # দিয়ে ধরতে হয়। এমন #khalid ( আপনি যে নামে আইডি দিবেন)
এবার আসি Class
class এবং id একই, তবে একটু ভিন্নতা আছে।
উদাহরণ : <h2 class=”josim”>জসীম ভাই</h2>
class দিয়ে select করলে . (ডট) দিয়ে ধরতে হবে।
এখন যদি আমরা এই josim নামের ক্লাসটি ধরে ডাক দেই তাহলে কিন্তুু কাজ করবে, এবং এটা যদি class না হয় id হতো তাহলে ডাক দিলেও কিন্তুু আসতো। তাহলে পার্থক্য টা কি?
একটু নিচে খেয়াল করুন :
<h2 id=”josim hossain “> জসীম ভাই </h2>
<h2 class=” josim hossain> জসীম ভাই </h2>
উপরে দেখছেন একটি id আর একটি class
class এ যখন আমি josim বলে ডাক দিবো, সে কাজ করবে, আবার যখন hossain বলে ডাক দিব তখনও কাজ করবে। 
কিন্তুু কিন্তুু id তে এমন টা হবে না, josim বলে ডাকলেও শুনবে না, hossain বলে ডাকলেও কাজ করবে না। id হয় unique, এটা আর কোথাও দিতে পারবেন না, যেমন ক্লাসে ১ রোল কিন্তুু ২ জনের হয় না এক জনেরই হয়, id এর ক্ষেত্রেও তাই। আশা করি বুঝতে পেরেছেন।
এরপরেও যদি না বুঝে থাকেন তাহলে নিচের ভিডিওটি দেখতে পারেন, সব পানির মত হয়ে যাবে।
- CSS Properties কি?
নিচের ছবিটি দেখলে বুঝে যাবেন
CSS Properties list দেখুন এই লিংকে
https://www.tutorialrepublic.com/css-reference/css3-properties.php
- Text কি বা কেন ব্যবহার করতে হয়?
Text হলো লেখা, আমাদের ওয়েবসাইটে যে লেখাগুলো থাকে, সেগুলোকে রং চং এইদিক ঐদিক নেওয়া, উপরে নিচে নেওয়া, এই কাজ গুলো করতে হয়। সেগুলো করার জন্য কিছু জিনিস রয়েছে CSS এ
আমরা যখন কোনো লেখা, বাম পাশে নিতে চাই তখন
text-align:left; ( এটা নরমালি থাকে বাম দিকে )
যখন আমরা লেখা মাঝখানে নিতে চাইবো তখন
text-align:center ; দিব।
যখন আমরা ডান পাশে নিতে চাইবো তখন
text-align:right; দিব। এই ভাবে আমরা লেখা
যেদিক খুশি ঐদিকে নিতে পারবো।
ভিডিওটি দেখতে পারেন,
✔ যদি আমরা কোনো লেখার নিচে আন্ডারলাইন দিতে চাই তাহলে text-decoration:underline দিবো।
✔ যদি আমরা কোনো লেখার উপরে ওভারলাইন দিতে চাই তাহলে
text-decoration: overline দিবো।
✔ যদি আমরা কোনো লেখার মাঝখানে থেকে কেটে ফেলতে চাই তাহলে text-decoration: line-through দিবো
ভিডিওটি দেখতে পারেন 👇
✔ যদি আমরা কোনো লেখা গুলো সব বড় হাতের হয়ে যাবে তাহলে text-text-transform:uppercase দিবো
✔ যদি আমরা কোনো লেখা গুলো সব ছোট হাতের হয়ে যাবে তাহলে text-text-transform:lowercase দিবো
✔ যদি আমরা কোনো লেখা গুলোর প্রতিটা word এর প্রথম অক্ষর বড় হাতের হয়ে যাবে তাহলে text-text-transform:capitalize দিবো
ভিডিওটি দেখতে পারেন 👇
✔ যদি আমরা কোনো লেখার চাই একটা letter থেকে আরেকটা letter এর মাঝে ফাকা রাখতে
তাহলে letter-spacing: (যত পিক্সেল দিবেন ততই কাজ করবে )।
✔ যদি আমরা কোনো লেখার চাই একটা word থেকে আরেকটা word এর মাঝে ফাকা রাখতে তাহলে word-spacing: (যত পিক্সেল দিবেন ততই কাজ করবে )।
✔ যদি আমরা কোনো লেখার চাই একটা line থেকে আরেকটা line এর মাঝে ফাকা রাখতে তাহলে line-height: (যত পিক্সেল দিবেন ততই কাজ করবে )।
✔ যদি আমরা কোনো লেখার পিছনে shadow বা ছায়ার মত কিছু দিতে চাই তাহলে text-shadow দিবো ।
ভিডিওটা দেখলে সব ক্লিয়ার হয়ে যাবেন 👇
- Color কি বা কেন ব্যবহার করতে হয়?
- আমরা যে কোনো লেখাকে কালার করার জন্য color property ব্যবহার করি, যেমন color:white;
আমরা তিন ভাবে কালার দিতে পারি, color এর নাম ব্যবহার করে, hex code ব্যবহার করে, RGB কোড ব্যবহার করে।
color : white; [ কালারের নাম ব্যবহার করে ]
color : #fff; [ hex code ব্যবহার করে ]
color : rgba(255, 255, 255) [RGB code ব্যবহার করে ]
এই ভাবে দিতে পারবেন, ভিডিও টি দেখলে
ক্লিয়ার হয়ে যাবেন
- Background কি বা কেন?
background এই প্রোপার্টি টা ব্যবহার করা হয় যে কোন কিছুর background কালার বা কিছু দেওয়ার জন্য।
ধরুন আমি একটা লেখার পিছনে লাল কালার দিতে চাচ্ছি, তখন আমাদের এই background property টা ব্যবহার করতে হবে। যেমন background:red;
লেখার পিছনে লাল হয়ে যাবে। এই টুকুই, এই গুলো আসলে বুঝার বিষয়, আপনি করতে করতে সব কিছুই বুঝে যাবেন।
- CSS image কি বা কেন?
css image, আমরা তো html এ img দিয়ে ছবি আনতে পারতাম, তাহলে css আবার image কি?
আপনি যদি চান কিছুর পেছনে ছবি দিবেন। তাহলে background-image এই প্রোপার্টি টি ব্যবহার করে আমরা ছবি আনতে পারবো।
এমন হবে দেখুন background-image: url(” ছবির লিংক “);
এবার চলুন দেখি ছবির জন্য কি কি আছে
background-image: url(” “);
background-size : cover ;
background-repeat: no-reapet;
background-possition: center;
এই প্রোপার্টি গুলো কিভাবে কাজ করে,
✔ background-image এটায় ছবি আনে
✔background-size এটা background এর সাইজ কেমন হবে তা নির্ধারন করবে।
✔ background-repeat এটার কাজ হলো ছবি পেছনে বার বার রিপিট করবে না। আপনি এটা না দিলে তখন কি হবে? যখন আপনি ওয়েবসাইট জুম আউট করবেন তখন দেখবেন ছবি বার বার রিপিট করতাছে।
✔ background-possition: এটা নির্ধারন করে, ছবির পজিশন কোথায় হবে।
ভিডিওটি দেখতে পারেন
- CSS Box Model কি?
CSS box model এটা আমাদের কাজের জন্য অনেক বেশি ব্যবহার করা হয়। এই মডেলটা
বুঝতে পারলে আপনি অনেক কিছুই বুঝে যাবেন।
আপনি হয় div এই শব্দটার সাথে একটু হলেও পরিচিত। যদি না হয়ে থাকেন তাহলে বলছি এটা আসলে কি
div হলো একটি html tag এর নাম, এমন দেখতে <div></div>
এই div সব চেয়ে বেশি ব্যবহার করবেন একটি ওয়েবসাইট বানাতে গেলে। div হলো একটি ব্লক লেভেল ট্যাগ। এটাকে একটা box মনে করতে পারেন। আপনি ধরে নেন div একরা বাক্স এটার ভিতরে আপনি যা খুশি তাই রাখতে পারেন।
নিচের উদাহরন টা দেখুন
<div>
<h1></h1>
<h2></h2>
</div>
এখানে দেখুন একটা div নিয়েছি তার ভিতরে দুইটা heading ট্যাগ নিয়েছি। তার মানে div হলো একটি বাক্স, এই বাক্সের ভিতরে আমরা সব কিছু রাখতে পারি। আমরা চাইলে ঐ heading tag এর মতো div এর ভিতরে আরো একটি div নিতে পারবো।
যত খুশি তত নিতে পারবো, একটার ভিতরে আর একটা এই ভাবে৷
ভিডিওটি দেখলে আপনি বুঝে যাবেন আসলে box model কিভাবে কাজ করে
- CSS Border কি বা কেন ব্যবহার করা হয়?
Border বুঝতেই তো পারতেছেন border কি
কিভাবে কাজ করে তাই না? আমরা যদি কোনো কিছুর বর্ডার দিতে চাই তাহলে আমরা border এই প্রোপার্টিটা ব্যবহার করবো।
border: 1 px solid white ;
এতক্ষণ দেখলেন শিরোনাম এখন দেখবেন বিস্তারিত খবর লিখছি আমি জসীম হোসাইন 😄😄
- OK! আমরা দেখলাম border এরপর দেখলাম 1 px এটা হলো আপনি কতটুকু মোটা বর্ডার দিতে চাচ্ছেন, এরপর দেখতে পাচ্ছি solid এটা হচ্ছে বর্ডারের ধরন, বর্ডারের কিছু ধরন রয়েছে
- dotted
- solid
- double
- dashed
Solid এর জায়গায় এগুলো দিয়ে দেখুন বর্ডারের ধরন পরিবর্তন হয়ে যাবে। এরপর হলো color আপনি যে কালার দিতে চান।
✔ আপনি যদি চান শুধু উপরে border দিবেন আর কোথাও না তাহলে এই ভাবে দিবে border-top: 1px solid red ;
✔ আপনি যদি চান শুধু নিচে border দিবেন আর কোথাও না তাহলে এই ভাবে দিবে border-border-bottom: 1px solid red ;
✔ আপনি যদি চান শুধু বামে border দিবেন আর কোথাও না তাহলে এই ভাবে দিবে border-border-left: 1px solid red ;
✔ আপনি যদি চান শুধু ডানে border দিবেন আর কোথাও না তাহলে এই ভাবে দিবে border-border-right: 1px solid red ;
এখন আপনি যদি চান border এর কোনা গুলো
একটু বাকা করে দিবে তাহলে border-radius: ( যত px দিতে চান )
ভিডিওটি দেখুন সব ক্লিয়ার হয়ে যাবে
- Height, Width কি?
- Height, width কি এটা আপনার জানেন আসলে কিভাবে কাজ করে।
Height হচ্ছে উচ্চতা, Width হলো প্রস্থ,
ধরেন আপনি একটা বক্সের খাড়াখড়ি ভাবে একটা উচ্চতা দিতে চাচ্ছেন তখন height ব্যবহার করবেন। যখন আপনি পাশে বা দৈর্ঘ্যে বাড়াতে চাইবেন তখন width ব্যবহার করবেন।
যেমন height:200px; এই ভাবে। width: 200px এই ভাবে ব্যবহার করবেন।
ভিডিও টি দেখুন বুঝে যাবেন
Written by: মোঃ জসীম হোসাইন
Happy Programing 🥰🥰
0 Comments