Learn CSS from scratch. Chapter 1 explains Introduction to CSS & Basic Styling with mini projects and practice exercises for students.
Chapter 1: Introduction to CSS (CSS পরিচিতি)
CSS (Cascading Style Sheets) হলো ওয়েবপেজকে style দেওয়ার জন্য ব্যবহৃত language। এই chapter এ আমরা শিখব CSS basics, Inline, Internal এবং External CSS কিভাবে কাজ করে। Students will learn how to change text color, font size, and add background color.
Introduction (পরিচিতি)
CSS এর full form হলো Cascading Style Sheets।
- HTML দিয়ে আমরা web page এর structure বানাই।
- CSS দিয়ে web page কে সুন্দর, colorful এবং interactive করা যায়।
Example (HTML without CSS):
<h1>Welcome to My Website</h1>
<p>This is my first web page!</p>Output:
Welcome to My Website
This is my first web page!
দেখা যাচ্ছে, page plain। CSS দিলে page অনেক সুন্দর হবে।
Why CSS? (কেন CSS দরকার?)
- Text color change করতে
- Background color দিতে
- Font change করতে
- Page layout সুন্দর করতে
- Buttons, links, tables design করতে
3 Ways to Write CSS (CSS লেখার 3 ধরন)
1️⃣ Inline CSS
HTML element এর ভিতরে style attribute ব্যবহার করা হয়।
<p style="color: blue; font-size: 18px;">Hello! I am blue.</p>2️⃣ Internal CSS
HTML file এর <head> section এ <style> tag ব্যবহার করা হয়।
<head>
<style>
h1 {
color: red;
text-align: center;
}
p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a colorful paragraph.</p>
</body>3️⃣ External CSS
আলাদা .css file বানানো হয় এবং HTML file এ link করা হয়।
style.css
h1 {
color: purple;
text-align: center;
}
p {
color: orange;
font-size: 16px;
}HTML এ link করা:
<head>
<link rel="stylesheet" href="style.css">
</head>Student-friendly Tips (ছাত্রদের জন্য টিপস)
- CSS লেখার পর browser এ run করে output দেখো।
- Color, font, alignment সব test করো।
- Experiment করা খুবই মজা! 😄
Mini Practice (ছোট চ্যালেঞ্জ)
- H1 এর color green করো
- Paragraph font-size 20px করো
- Background color yellow করো
<h1>My First Heading</h1>
<p>This is my first paragraph!</p>Expected Output:
- Heading green color
- Paragraph font-size 20px
- Page background yellow
By the end of this chapter, students will understand what CSS is, how to apply it in different ways, and will be ready to move on to selectors, colors, and more advanced styling techniques in the next chapter.
Leave a Reply