Post No:12
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন।
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
সিএসএসকে সহজ করে উপস্থাপন করে হল:
সিএসএস খুবই সহজ, আপনাদের সুবিধার্থে সিএসএস 10টা ক্যাটাগরিতে ভাগ করা হয়েছে যদিও এর কোন ক্যাটাগরাইজ করা নেই। তবে আমরা যদি 10টা ক্যাটাগরি ভালো করে শিখতে পারি আমাদেরকে সিএসএস শেখার জন্য অন্য কোথাও যেতে হবে না। চলুন দেখা যাক আমরা 10টা ক্যাটাগরিতে কি কি শিখবো এক নজরে দেখে নিই।
- Typography (Color, Text, Font, icon)
টাইপোগ্রাফি-তে আমরা কালার, টেক্সট, ফন্ট, আইকন-এর ব্যবহার শিখবো।
- CSS Box type (Height, Width, Margin, Padding, Box-shadow)
সিএসএস বক্স-টাইপ এ হাইট, উইড্থ, প্যাডিং, মার্জিন, বাক্স-শ্যাডো ব্যবহার শিখবো।
- CSS Selector (ID, Class, Nth-child, Nested, Pseudo)
সিএসএস সিলেক্টর-এ আইডি, ক্লাস, এন্টিএইচ-চাইল্ড, নেস্টেড, এবং সুডোর ব্যবহার শিখবো।
- CSS Display (Inline, Block, Flex-box)
সিএসএস ডিসপ্লে-তে ইনলিনে, ব্লক ফ্লেক্স-বাক্স এর ব্যবহার শিখবো।
- CSS list-style (List Css, Menu, Dropdown Menu, Megamenu)
সিএসএস লিস্ট-স্টাইল এ লিস্ট-স্টাইল, মেনু, ড্রপ-ডাউন মেনু, মেগা-মেনু করা শিখবো।
- Position (Position Absolute, Relative, Fixed)
পজিশন-এ পজিশন অ্যাবসলিউট, রিলেটিভ, ফিক্সড-এর ব্যবহার শিখবো।
- Before, after, and hover (Before, After and Hover Animation)
বিফোর, আফটার এন্ড হোভার-এ বিফোর, আফটার এবং হোভার-এর ব্যবহার শিখবো।
- Layout and Grid (Float, Clear, and Bootstrap Grid)
লেআউট, এবং গ্রিড-এ ফ্লোট, ক্লিয়ার, এবং বোস্ট্রপ গ্রিড-এর ব্যবহার শিখবো।
- Form & Table (Form, Table, Css with Bootstrap)
ফর্ম এন্ড টেবিল-এ ফর্ম, টেবিল সিএসএস এনং বুটস্ট্র্যাপ দিয়ে করা শিখবো।
- Responsive (Details About Responsive CSS)
রেস্পন্সিভ-এ আমরা ডেস্কটপ, ল্যাপটপ, ট্যাবলেট, ফোন সকল ডিভাইস-এ কিভাবে রেস্পন্সিভ করে এ টু জেড সব দেখবো।
Typography-তে color, text, font, icon নিয়ে ডিটেলস এ দেখবো। **CSS Box type-**এ আমরা যা দেখবো height, width, margin, Row padding, এবং box-shadow। **CSS Selector-**এ আমরা যা দেখবো id, class, Nth-child, Nested, pseudo। **CSS Display-**এ আমরা যা দেখবো Inline, Blog, Flex-box। **CSS Position-**এ আমরা যা দেখবো position, Absolute, Relative, Fixed। **Before, After, and hover-**এ আমরা যা দেখবো before, after, before-after hover, hover and hover Animation। **Layout and Grid-**এ আমরা যা দেখবো float left, right, clear, bootstrap grid, Container, row, colume। **Form & Table-**এ আমরা যা দেখবো CSS form with bootstrap form, table with bootstrap। **Responsive-**এ আমরা যা দেখবো এ আমরা কোনোকিছু বাকি রাখবো না। নোকিয়া ১১১০ মোবাইলে দিয়েও যদি আমাদের ওয়েবসাইট ভিজিট করে তবুও ভেঙ্গে যাবে না।
Good News:
আপনাদের জন্য গুডনিউজ হচ্ছে যে 10টা ক্যাটাগরির সাথে যেমন কালার, টেক্সট, ফন্ট, রেস্পন্সিভ, ডিসপ্লে ফ্লাক্স, এই সবগুলোর সাথে বুটস্ট্রাপ দেখবো আমরা। এতে করে আপনারা ১০টা ক্যাটাগরি শেষ করার সাথে সাথে ফুল সিএসএস, সিএসএস প্রপার্টি, এন্ড বুটস্ট্র্যাপ টাও শিখতে পারবেন। দুইটাকে আমরা কম্বাইন করে শিখবো।
CSS কি? সিএসএস কিভাবে কাজ করে? এগুলো অজানা থাকলে আপনারা পূর্বের ব্লগটি দেখতে পারেন। পূর্বের ব্লগ-এ ডিটেলস এ সিএসএস সম্পর্কে বলা হয়েছে। ব্লগ-লিংক
সিএসএস সাধারণত 3 ধরণের:
ইনলাইন সিএসএস (Inline CSS)
ইন্টারনাল সিএসএস (Internal CSS)
এক্সটার্নাল সিএসএস. (External CSS)
1. ইনলাইন সিএসএস:
সিএসএস ইনলাইন করার অর্থ হল বহিরাগত সিএসএসের পরিবর্তে একটি এইচটিএমএল ফাইলে সিএসএস স্থাপন করা। যেহেতু ইনলাইন সিএসএস একটি এইচটিএমএল উপাদানে একটি অনন্য শৈলী প্রয়োগের অনুমতি দেয়, তাই এর ব্যবহার সীমিত কিন্তু অনন্য বৈশিষ্ট্য তৈরির জন্য উপকারী।
নিচে দেখুন ইনলাইন সিএসএস ⇓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post No 11</title>
</head>
<body>
<h1 style="color: white; background-color: green; font-size: 100px;">Sorobindu Academy</h1>
<h2 style="color: rgb(255, 0, 0); font-size: 50px;">Sorobindu Academy</h2>
<h3 style="color: rgb(0, 0, 0); font-size: 50px;background-color: red;">Sorobindu Academy</h3>
<h4>Sorobindu academy</h4>
<h5>Sorobindu academy</h5>
<h6>Sorobindu academy</h6>
</body>
</html>
উপরে ইমেজটি লক্ষ্য করুন h1 ট্যাগ-এ color: white; background-color: green; font-size: 100px এবং h2 ট্যাগ-এ color: red; font-size: 50px; দেয়া হয়েছে। h3 ট্যাগ-এ font-size: 70px; background-color: red; দিয়েছি। মূলত এভাবেই ইনলাইন সিএসএস লেখা হয়। এইচটিএমএল যেকোনো ট্যাগ-এ আমরা স্টাইল <style></style> এট্রিবিউট নিয়ে (=" ") সমান সাইন নিয়ে ডাবল কোটেশন-এর ভিতরে সিএসএস প্রপার্টি ব্যাবহার করবো, প্রপার্টি নাম দিয়ে তার ভ্যালু দেব।
Output Result View ⇓
2. ইন্টার নাল সিএসএস (Internal CSS) Use:
একটি অভ্যন্তরীণ CSS একটি একক HTML পৃষ্ঠার জন্য একটি শৈলী সংজ্ঞায়িত করতে ব্যবহৃত হয়। একটি অভ্যন্তরীণ CSS একটি HTML পৃষ্ঠার <head> বিভাগে একটি <style> উপাদানের মধ্যে সংজ্ঞায়িত করা হয়।
এইচটিএমএল ফাইল এ হেডিং ট্যাগের ভিতর স্টাইল ট্যাগ নিয়ে সিলেক্টর এর মাধ্যমে ধরে সিএসএস করাকেই ইন্টারনাল সিএসএস বলা হয়।
HTML এর সাথে ইন্টারনাল CSS ⇓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post no:11</title>
<style>
h1{
color: red;
font-size: 50px;
background-color: green;
}
</style>
</head>
<body>
<h1>sorobindu academy</h1>
<h2>sorobindu academy</h2>
<h3>sorobindu academy</h3>
<h4>Sorobindu academy</h4>
<h5>Sorobindu academy</h5>
<h6>Sorobindu academy</h6>
</body>
</html>
এইচটিএমএল ফাইল-এ হেডিং ট্যাগ-এর ভিতরে স্টাইল <style></style> এট্রিবিউট নিয়ে h1 ট্যাগ কে ধরে { সেকেন্ড ব্রাকেট-এর ভিতর } color: red; font-size: 50px; background-color: green; দিয়েছি। এইটাকে ইন্টারনাল সিএসএস বলে।
Output Result View ⇓
3. এক্সটার্নাল সিএসএস (External CSS) :
একটি বহিরাগত স্টাইল শীট হল একটি পৃথক CSS ফাইল যা ওয়েবপৃষ্ঠার প্রধান অংশের মধ্যে একটি লিঙ্ক তৈরি করে অ্যাক্সেস করা যেতে পারে। একাধিক ওয়েবপেজ স্টাইলশীট অ্যাক্সেস করতে একই লিঙ্ক ব্যবহার করতে পারে। একটি বহিরাগত স্টাইল শীটের লিঙ্কটি পৃষ্ঠার প্রধান অংশের মধ্যে স্থাপন করা হয়।
HTML File ⇓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post no:11</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>sorobindu academy</h1>
<h2>sorobindu academy</h2>
<h3>sorobindu academy</h3>
<h4>Sorobindu academy</h4>
<h5>Sorobindu academy</h5>
<h6>Sorobindu academy</h6>
</body>
</html>
<link rel=”stylesheet” href=”style.css”> আমি লিংক ট্যাগ নিয়ে সিএসএস লিংক করলাম। এভাবেই মূলত বাহির-এর সিএসএস ফাইলকে লিংক করা হয়।
বাহির থেকে লিংক করানো সিএসএস ফাইল ⇓।
h1{
color: red;
}
h2{
background-color:green ;
}
h3{
font-size:50px;
}
h4{
background-color: reds;
}
h6{
font-size: 30px;
background-color:blue ;
}
div{
font-size: 40px;
color: red;
background-color: green;
}
নিচে লক্ষ্য করুন আমার আউটপুট রেজাল্ট সব ঠিক আছে। মানে আমার সিএসএস প্রপার্টি গুলো কাজ করছে। এভাবেই সিএসএস কাজ করে।
Output Result View ⇓
আজকে এতটুকুই, আপনারা যা দেখলেন প্রাকটিস করেন। নেক্সট এ আমরা সিএসএস-এর অন্যান্য প্রপার্টি গুলো নিয়ে দেখবো। ভালো থাকবেন সবাই।
ব্লগটি পড়ার জন্য ধন্যবাদ