CSS Tutorial for Beginners (Level 1)

Introduction

আপনি যদি HTML শিখে থাকেন, তাহলে এখন আপনার পরবর্তী ধাপ হলো CSS শেখা।

HTML ওয়েব পেজের Structure তৈরি করে, আর CSS সেই Structure-কে সুন্দর, আকর্ষণীয় এবং Professional করে তোলে।

এই Guide-এ আমরা CSS-এর একদম Basic থেকে শুরু করব। এই একটি পোস্ট শেষ করলে আপনি CSS-এর Foundation ভালোভাবে বুঝতে পারবেন এবং এরপর Flexbox, Grid, Responsive Design ও অন্যান্য Mid-Level CSS Topics শেখার জন্য প্রস্তুত হয়ে যাবেন।

What You'll Learn

Prerequisites

এই Guide শুরু করার আগে আপনার নিচের বিষয়গুলো জানা উচিত—

• HTML Elements
• Attributes
• Basic HTML Structure

যদি এগুলো না জানা থাকে, তাহলে আগে আমাদের HTML Beginner Guide পড়ে আসুন।

---

1. CSS Introduction

আপনি যদি HTML শিখে থাকেন, তাহলে এখন CSS শেখার সময়।

HTML ওয়েব পেজের Structure তৈরি করে, আর CSS (Cascading Style Sheets) সেই Structure-কে সুন্দর করে।

সহজভাবে বললে—
• HTML বলে কী দেখাবে।
• CSS বলে কীভাবে দেখাবে।

উদাহরণ হিসেবে, HTML দিয়ে আপনি একটি Heading তৈরি করতে পারেন।

              <h1>Welcome to Osila</h1>
        

Browser-এ এটি সাধারণ একটি Heading হিসেবে দেখা যাবে।

এখন যদি CSS যোগ করেন—

            h1{ 
                color: blue; 
                font-size: 40px; 
            }
        

তাহলে Heading-এর রঙ নীল হবে এবং আকার বড় হবে।

অর্থাৎ, CSS HTML-এর Content পরিবর্তন করে না, বরং তার Design পরিবর্তন করে।

CSS দিয়ে কী করা যায়?

CSS ব্যবহার করে আপনি—

• Text-এর Color পরিবর্তন করতে পারেন।
• Font পরিবর্তন করতে পারেন।
• Background যোগ করতে পারেন।
• Margin ও Padding নিয়ন্ত্রণ করতে পারেন।
• Button ও Card Design করতে পারেন।
• Responsive Layout তৈরি করতে পারেন।
• Animation ও Hover Effect যোগ করতে পারেন।

HTML : Structure তৈরি করে, Content তৈরি করে;
CSS : Design করে, Content সুন্দর করে

Summary

• CSS-এর পূর্ণরূপ Cascading Style Sheets।
• CSS HTML-এর Design নিয়ন্ত্রণ করে।
• HTML এবং CSS একসাথে ব্যবহার করে সুন্দর ওয়েবসাইট তৈরি করা হয়।

---

2. CSS Syntax

CSS লিখতে একটি নির্দিষ্ট নিয়ম অনুসরণ করতে হয়। এই নিয়মকেই CSS Syntax বলা হয়।

একটি সাধারণ CSS Syntax দেখতে এমন হয়—

          selector{ property: value; }
        

এখন প্রতিটি অংশ সহজভাবে বুঝে নেওয়া যাক।

Selector

Selector বলে দেয় কোন HTML Element-এর Style পরিবর্তন করা হবে। উদাহরণ—

          h1{ 

          }
        

এখানে h1 হলো Selector।
অর্থাৎ, সব <h1> Element-এর জন্য CSS প্রয়োগ হবে।

Property

Property বলে কী পরিবর্তন করতে চান। উদাহরণ—

color অথবা font-size

Value

Value বলে Property-এর মান কত হবে।

উদাহরণ — color: blue;

এখানে—
• color হলো Property।
• blue হলো Value।

একটি সম্পূর্ণ উদাহরণ

            h1{ 
              color: blue; font-size: 40px; 
            }
          

এখানে—
• h1 → Selector
• color → Property
• blue → Value
• font-size → Property
• 40px → Value

CSS Syntax-এর গুরুত্বপূর্ণ চিহ্ন

CSS লেখার সময় কয়েকটি চিহ্ন সবসময় ব্যবহার করা হয়।

{ } → Style-এর শুরু ও শেষ বোঝায়।
: → Property এবং Value আলাদা করে।
; → প্রতিটি CSS Rule শেষ করে।

Summary

• CSS লেখার একটি নির্দিষ্ট নিয়ম আছে, যাকে CSS Syntax বলা হয়।
• একটি CSS Rule-এর তিনটি প্রধান অংশ হলো Selector, Property এবং Value।
• প্রতিটি Property-এর শেষে ; (Semicolon) ব্যবহার করতে হয়।
• সব Style { } (Curly Braces)-এর ভিতরে লেখা হয়।

---

3. Ways to Add CSS

HTML-এ CSS যোগ করার ৩টি উপায় রয়েছে।

1. Inline CSS
2. Internal CSS
3. External CSS
চলুন একে একে দেখি।

1. Inline CSS

Inline CSS সরাসরি HTML Element-এর style Attribute-এর ভিতরে লেখা হয়।

উদাহরণ—

            <h1 style="color: blue;">Welcome to Osila</h1>
          

এখানে শুধুমাত্র এই h1 Element-এর Style পরিবর্তন হবে।

কখন ব্যবহার করবেন?

• ছোট পরিবর্তনের জন্য।
• দ্রুত পরীক্ষা (Testing) করার জন্য।

Note: বড় Project-এ Inline CSS ব্যবহার করা ভালো Practice নয়।

2. Internal CSS

Internal CSS HTML File-এর <head> অংশে <style> Tag-এর ভিতরে লেখা হয়।

 
            <!DOCTYPE html> 
            <html> 
              <head> 
                <style>
                   h1{ 
                    color: blue; 
                    }
                </style>
              </head>
              <body> 
                        
                <h1>Welcome to Osila</h1> 
              
              </body> 
              </html>
          

এখানে একই Page-এর সব CSS এক জায়গায় রাখা হয়েছে।

কখন ব্যবহার করবেন?

• ছোট Project-এর জন্য।
• Single Page Website-এর জন্য।

3. External CSS

External CSS-এ Style একটি আলাদা .css File-এ লেখা হয়। প্রথমে একটি CSS File তৈরি করুন।

style.css

তারপর HTML File-এর <head> অংশে সেটি Link করুন।
<link rel="stylesheet" href="style.css">
এখন style.css File-এর ভিতরে CSS লিখুন।

            h1{
               color: blue; 
              }
          

এটি সবচেয়ে জনপ্রিয় এবং Professional পদ্ধতি।

কেন External CSS ব্যবহার করবেন?

• HTML ও CSS আলাদা থাকে।
• Code পড়তে ও Maintain করতে সহজ হয়।
• একই CSS File অনেক Page-এ ব্যবহার করা যায়।

কোন পদ্ধতি সবচেয়ে ভালো?

Method	ব্যবহার
Inline CSS	ছোট পরিবর্তন বা Testing
Internal CSS	ছোট Single Page Project
External CSS	Professional Project ও বড় Website

প্রায় সব Professional Website-এ External CSS ব্যবহার করা হয়।

Summary

• HTML-এ CSS যোগ করার ৩টি উপায় রয়েছে।
• Inline CSS style Attribute-এর ভিতরে লেখা হয়।
• Internal CSS <style> Tag-এর ভিতরে লেখা হয়।
• External CSS আলাদা .css File-এ লেখা হয় এবং এটি সবচেয়ে ভালো ও বেশি ব্যবহৃত পদ্ধতি।

---

4. CSS Selectors

CSS লিখতে হলে প্রথমে Browser-কে বলতে হয় কোন HTML Element-এর Style পরিবর্তন করতে হবে।

এই কাজটি করে CSS Selector।

সহজভাবে বললে, Selector HTML Element নির্বাচন (Select) করে, যাতে তার উপর CSS প্রয়োগ করা যায়।

1. Element Selector

Element Selector HTML Tag-এর নাম ব্যবহার করে।

উদাহরণ—

  h1{ 
    color: blue;
   }

এখানে সব <h1> Element নীল রঙের হবে।

2. Class Selector

Class Selector একটি নির্দিষ্ট Class-এর Element নির্বাচন করে। Class Selector-এর আগে ( . ) Dot ব্যবহার করতে হয়।

HTML
<p class="text">Hello World</p>

CSS
.text{
    color: green;
}

এখানে text Class-এর সব Element সবুজ রঙের হবে।

3. ID Selector

ID Selector একটি নির্দিষ্ট Element নির্বাচন করে। ID Selector-এর আগে ( # ) Hash ব্যবহার করতে হয়।

HTML
<h1 id="title">Welcome</h1>

CSS
#title{
    color: red;
}

এখানে শুধুমাত্র title ID-এর Element লাল রঙের হবে।

4. Universal Selector

Universal Selector ( * ) সব HTML Element নির্বাচন করে।

  *{
     margin: 0; 
     padding: 0; 
    }

এটি সাধারণত Project-এর শুরুতে Default Margin ও Padding Remove করার জন্য ব্যবহার করা হয়।

5. Group Selector

একই CSS একাধিক Element-এর জন্য ব্যবহার করতে চাইলে Group Selector ব্যবহার করা হয়।

  h1, h2, p{
     color: blue; 
    }

এখানে h1, h2 এবং p—সব Element নীল রঙের হবে।

কোন Selector কখন ব্যবহার করবেন?

Selector	ব্যবহার
Element	একই Tag-এর সব Element-এর জন্য
Class ( . )	একাধিক Element-এ একই Style দেওয়ার জন্য
ID ( # )	একটি নির্দিষ্ট Element-এর জন্য
Universal ( * )	সব Element-এর জন্য
Group ( , )	একাধিক Selector-এ একই Style দেওয়ার জন্য

Summary

• CSS Selector HTML Element নির্বাচন করে।
• Element Selector Tag-এর নাম ব্যবহার করে।
• Class Selector Dot (.) দিয়ে শুরু হয়।
• ID Selector Hash (#) দিয়ে শুরু হয়।
• Universal Selector (*) সব Element নির্বাচন করে।
• Group Selector একাধিক Element-এ একই CSS প্রয়োগ করতে সাহায্য করে।

---

5. CSS Colors

CSS-এ Colors ব্যবহার করে Text, Background, Border এবং অন্যান্য Element-এর রঙ পরিবর্তন করা যায়।

উদাহরণ—

      h1{ 
        color: blue; 
      }
    

এখানে h1-এর Text নীল রঙের হবে।

1. Color Name

সবচেয়ে সহজ উপায় হলো Color-এর নাম ব্যবহার করা।

আরও কিছু Color Name — blue, green, black, white, gray, yellow, orange, purple

2. HEX Color

HEX (Hexadecimal) Color # দিয়ে শুরু হয়।

      h1{ color: #ff0000; }
    

এখানে #ff0000 হলো লাল (Red) রঙ।

আরও কিছু উদাহরণ—

    

       color: #000000;   /* Black */ 

       color: #ffffff;   /* White */ 
 
       color: #2563eb;   /* Blue */ 

       

HEX হলো Web Development-এ সবচেয়ে বেশি ব্যবহৃত Color Format।

3. RGB Color

RGB-এর পূর্ণরূপ Red, Green, Blue।

      h1{ color: rgb(255, 0, 0); }
    

এখানে—
• 255 = Red
• 0 = Green
• 0 = Blue
ফলে রঙ হবে লাল।

4. RGBA Color

RGBA হলো RGB-এর মতোই, তবে এখানে একটি অতিরিক্ত Alpha Value থাকে।

Alpha দিয়ে Color-এর স্বচ্ছতা (Opacity) নিয়ন্ত্রণ করা যায়।

      h1{
    color: rgba(255, 0, 0, 0.5);
      }
    

এখানে 0.5 মানে রঙটি ৫০% স্বচ্ছ হবে।

Alpha-এর মান 0 থেকে 1 পর্যন্ত হয়।

• 0 = সম্পূর্ণ স্বচ্ছ
• 1 = সম্পূর্ণ দৃশ্যমান

কোথায় Color ব্যবহার করা যায়?

CSS-এ অনেক Property-তে Color ব্যবহার করা যায়।

      h1{ 
        color: blue; 
        background-color: #f5f5f5; 
        border: 2px solid red; 
      }
    

এখানে—
• color → Text-এর রঙ
• background-color → Background-এর রঙ
• border → Border-এর রঙ

Summary

• CSS-এ Color ব্যবহার করে Element-এর রঙ পরিবর্তন করা যায়।
• Color লেখার সাধারণ ৪টি উপায় হলো—
• Color Name
• HEX
• RGB
• RGBA
• HEX সবচেয়ে বেশি ব্যবহৃত হয়।
• RGBA ব্যবহার করে Color-এর Opacity নিয়ন্ত্রণ করা যায়।

---

6. Units (px, %, em, rem)

CSS-এ Units ব্যবহার করে কোনো Element-এর Size নির্ধারণ করা হয়।

যেমন—
• Width
• Height
• Font Size
• Margin
• Padding

সবচেয়ে বেশি ব্যবহৃত CSS Units হলো—
• px
• %
• em
• rem

1. px (Pixel)

px একটি Fixed Unit। অর্থাৎ, আপনি যে মান দেবেন সেটিই ব্যবহার হবে।

    h1{ 
      font-size: 32px; 
    }
  

এখানে h1-এর Font Size হবে 32 Pixels।

px সাধারণত Border, Width, Height এবং ছোট Spacing-এর জন্য বেশি ব্যবহার করা হয়।

2. % (Percentage)

% Parent Element-এর Size-এর উপর নির্ভর করে।

    .box{
       width: 50%; 
      }
  

যদি Parent-এর Width 800px হয়, তাহলে .box-এর Width হবে 400px।

3. em

em Parent Element-এর Font Size-এর উপর নির্ভর করে।

    .parent{ 
      font-size: 20px; 
    } 
    
    .child{ 
      font-size: 2em; 
    }
  

এখানে .child-এর Font Size হবে 40px (20px × 2)।

4. rem

rem Root (html) Element-এর Font Size-এর উপর নির্ভর করে।

    html{ 
      font-size: 16px; 
    } 
    
    h1{ 
      font-size: 2rem; 
    }
  

এখানে h1-এর Font Size হবে 32px (16px × 2)।
rem ব্যবহার করলে পুরো Website-এর Font Size সহজে নিয়ন্ত্রণ করা যায়।

কোন Unit কখন ব্যবহার করবেন?

Unit	ব্যবহার
px	Fixed Size-এর জন্য
%	Responsive Width বা Height-এর জন্য
em	Parent-এর Font Size অনুসারে Size দেওয়ার জন্য
rem	Root Font Size অনুসারে Size দেওয়ার জন্য

Tip: আধুনিক Website-এ Font Size-এর জন্য rem বেশি ব্যবহার করা হয়।

Note: em এবং rem শুধু font-size-এর জন্য নয়। এগুলো padding, margin, width, height, gap-সহ আরও অনেক CSS Property-তে ব্যবহার করা যায়।

---

7. CSS Background

CSS-এ Background ব্যবহার করে কোনো Element-এর পেছনের অংশ (Background) সাজানো যায়।

আপনি Background-এ Color, Image এবং তাদের অবস্থান নিয়ন্ত্রণ করতে পারেন।

1. Background Color

background-color ব্যবহার করে Background-এর রঙ পরিবর্তন করা হয়।

  .box{ 
    background-color: lightblue; 
  }
 

এখানে .box-এর Background হালকা নীল হবে।

2. Background Image

background-image ব্যবহার করে Background-এ একটি Image যোগ করা যায়।

  .box{ 
    background-image: url("image.jpg"); 
  }
 

3. Background Repeat

ছোট Image ব্যবহার করলে Browser সেটি বারবার দেখায়। এটি নিয়ন্ত্রণ করতে background-repeat ব্যবহার করা হয়।

  .box{ 
    background-repeat: no-repeat; 
  }
 

কিছু সাধারণ Value:
• repeat (Default)
• no-repeat
• repeat-x
• repeat-y

4. Background Size

background-size দিয়ে Image-এর Size নিয়ন্ত্রণ করা হয়।

  .box{ 
    background-size: cover; 
  }
 

কিছু সাধারণ Value:
• cover → পুরো Element ঢেকে দেয়।
• contain → পুরো Image দেখায়।

5. Background Position

background-position দিয়ে Image কোথায় থাকবে তা নির্ধারণ করা হয়।

  .box{ 
    background-position: center;
   }

আরও কিছু Value—
• top
• bottom
• left
• right
• center

একসাথে ব্যবহার

  .box{ 
    background-image: url("image.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
  }

6. Background Shorthand

একাধিক Background Property আলাদা আলাদা না লিখে, background Property-এর মাধ্যমে এক লাইনে লেখা যায়। একে Background Shorthand বলা হয়।

  আলাদা করে লেখা—

  .box{ 
     background-color: #f5f5f5;
     background-image: url("image.jpg"); 
     background-repeat: no-repeat; 
     background-position: center; 
    }

    Shorthand ব্যবহার করে—

    .box{ 
      background: #f5f5f5 url("image.jpg") no-repeat center; 
    }

দুইটি Code-এর ফলাফল একই।

Tip: ছোট CSS লিখতে এবং Code পরিষ্কার রাখতে Developer background Shorthand ব্যবহার করেন।

Summary

• background-color → Background-এর রঙ পরিবর্তন করে।
• background-image → Background-এ Image যোগ করে।
• background-repeat → Image বারবার দেখাবে কি না নির্ধারণ করে।
• background-size → Image-এর Size নিয়ন্ত্রণ করে।
• background-position → Image-এর অবস্থান নির্ধারণ করে।

---

8. CSS Border

CSS-এ Border ব্যবহার করে কোনো Element-এর চারপাশে একটি রেখা (Border) যোগ করা হয়।

Border ব্যবহার করলে Element আরও পরিষ্কার ও আকর্ষণীয় দেখায়।

1. Border

border একটি Shorthand Property। এর মাধ্যমে Border-এর Width, Style এবং Color একসাথে লেখা যায়।

  .box{ 
    border: 2px solid black; 
  }
 

এখানে—
• 2px → Border-এর Width
• solid → Border-এর Style
• black → Border-এর Color

2. Border Width

border-width দিয়ে Border-এর পুরুত্ব (Thickness) নির্ধারণ করা হয়।

  .box{ 
    border-width: 3px; 
  }
 

3. Border Style

border-style দিয়ে Border-এর ধরন নির্ধারণ করা হয়।

  .box{ 
    border-style: dashed;
   }
 

কিছু সাধারণ Value—
• solid
• dashed
• dotted
• double
• none

4. Border Color

border-color দিয়ে Border-এর রঙ পরিবর্তন করা হয়।

  .box{
     border-color: blue; 
    }
 

5. Border Radius

border-radius ব্যবহার করে Element-এর Corner গোল করা যায়।

  .box{ 
  border-radius: 10px; 
}

যত বড় Value হবে, Corner তত বেশি গোল হবে।

Border Shorthand vs Individual Properties

নিচের দুইটি Code-এর ফলাফল একই।

  Individual Properties

.box{
    border-width: 2px;
    border-style: solid;
    border-color: black;
}

Shorthand

.box{
    border: 2px solid black;
}

Tip: ছোট এবং পরিষ্কার Code লেখার জন্য বেশিরভাগ Developer border Shorthand ব্যবহার করেন।

Summary

• border একটি Shorthand Property।
• border-width দিয়ে Border-এর পুরুত্ব নির্ধারণ করা হয়।
• border-style দিয়ে Border-এর ধরন নির্ধারণ করা হয়।
• border-color দিয়ে Border-এর রঙ পরিবর্তন করা হয়।
• border-radius দিয়ে Corner গোল করা যায়।

---

9. CSS Margin

Margin হলো একটি Element-এর Border-এর বাইরের Space।
Margin ব্যবহার করে দুইটি Element-এর মধ্যে দূরত্ব (Space) তৈরি করা হয়।

Margin কী?

নিচের Box-Model দেখুন—

এখানে Margin হলো সবচেয়ে বাইরের অংশ।

Margin

সব পাশে একই Margin দিতে—

  .box{
    margin: 20px;
  }

এখানে Box-এর চারপাশে 20px Space তৈরি হবে।

Margin for Individual Sides

প্রতিটি পাশে আলাদা Margin দেওয়া যায়।

  .box{ 
    margin-top: 20px; 
    margin-right: 15px; 
    margin-bottom: 20px; 
    margin-left: 15px; }

Margin Shorthand

চারটি Margin এক লাইনে লেখা যায়।

  .box{ 
    margin: 20px 15px 20px 15px; 
  }

এখানে ক্রম হলো—
Top → Right → Bottom → Left

Shorter Shorthand

  দুইটি Value ব্যবহার করলে—

.box{
    margin: 20px 10px;
}
20px → Top & Bottom
10px → Left & Right

একটি Value ব্যবহার করলে—

.box{
    margin: 20px;
}

সব পাশে 20px Margin হবে।

Summary

• Margin হলো Element-এর Border-এর বাইরের Space।
• Margin Element-এর মধ্যে দূরত্ব তৈরি করতে ব্যবহার করা হয়।
• margin হলো একটি Shorthand Property।
• আলাদা Side-এর জন্য margin-top, margin-right, margin-bottom এবং margin-left ব্যবহার করা যায়।

---

10. CSS Padding

Padding হলো একটি Element-এর Content এবং Border-এর মাঝের Space।

Padding ব্যবহার করে Element-এর ভিতরে অতিরিক্ত জায়গা (Space) তৈরি করা হয়।

Padding কী?

নিচের Box Model দেখুন—

এখানে Padding হলো Content এবং Border-এর মাঝের Space।

Padding

সব পাশে একই Padding দিতে—

  .box{ 
    padding: 20px; 
  }
 

এখানে Content-এর চারপাশে 20px Space তৈরি হবে।

Padding for Individual Sides

প্রতিটি পাশে আলাদা Padding দেওয়া যায়।

  .box{ 
    padding-top: 20px; 
    padding-right: 15px; 
    padding-bottom: 20px; 
    padding-left: 15px; 
  }

Padding Shorthand

চারটি Padding এক লাইনে লেখা যায়।

  .box{
    padding: 20px 15px 20px 15px;
  }

ক্রম হলো—
Top → Right → Bottom → Left

Shorter Shorthand

দুইটি Value ব্যবহার করলে—

  .box{
    padding: 20px 10px;
  }

20px → Top & Bottom
10px → Left & Right

একটি Value ব্যবহার করলে—

  .box{
    padding: 20px;
  }

 সব পাশে 20px Padding হবে।

Margin vs Padding

Margin	Padding
Margin Padding Border-এর বাইরের Space	Content এবং Border-এর মাঝের Space
Element-এর মধ্যে দূরত্ব তৈরি করে	Element-এর ভিতরে Space তৈরি করে

Summary

• Padding হলো Content এবং Border-এর মাঝের Space।
• padding একটি Shorthand Property।
• আলাদা Side-এর জন্য padding-top, padding-right, padding-bottom এবং padding-left ব্যবহার করা যায়।
• Margin এবং Padding এক নয়—একটি Element-এর বাইরে Space তৈরি করে, অন্যটি ভিতরে।

---

11. CSS Width & Height

CSS-এ width এবং height ব্যবহার করে কোনো Element-এর প্রস্থ (Width) এবং উচ্চতা (Height) নির্ধারণ করা হয়।

Width

width দিয়ে Element-এর প্রস্থ নির্ধারণ করা হয়।

      .box{ 
        width: 300px; 
      }
    

এখানে .box-এর Width হবে 300px।

Height

height দিয়ে Element-এর উচ্চতা নির্ধারণ করা হয়।

      .box{ 
        height: 200px; 
       }
    

এখানে .box-এর Height হবে 200px।

Width এবং Height একসাথে

        .box{
            width: 300px;
            height: 200px;
          }

      এখানে Box-এর—
      Width → 300px
      Height → 200px
      

max-width

max-width দিয়ে Element-এর সর্বোচ্চ Width নির্ধারণ করা হয়।

        .box{ 
          max-width: 600px; 
        }
      

এটি Responsive Website তৈরিতে খুবই উপকারী।

min-height

min-height দিয়ে Element-এর সর্বনিম্ন Height নির্ধারণ করা হয়।

        .box{ 
          min-height: 200px;
         }
      

যদি Content বড় হয়, তাহলে Element-এর Height প্রয়োজন অনুযায়ী আরও বাড়বে।

Note

CSS-এ আরও কিছু Size সম্পর্কিত Property রয়েছে, যেমন—

• min-width
• max-height

এগুলো আমরা Intermediate CSS-এ বিস্তারিত শিখব।

Summary

• width দিয়ে Element-এর প্রস্থ নির্ধারণ করা হয়।
• height দিয়ে Element-এর উচ্চতা নির্ধারণ করা হয়।
• max-width দিয়ে সর্বোচ্চ Width নির্ধারণ করা যায়।
• min-height দিয়ে সর্বনিম্ন Height নির্ধারণ করা যায়।
• Responsive Design-এ max-width খুবই বেশি ব্যবহার করা হয়।

---

12. CSS Text

CSS-এ Text Properties ব্যবহার করে লেখা (Text)-এর Style পরিবর্তন করা যায়।

যেমন—
• Text Align
• Text Color
• Text Decoration
• Text Transform
• Line Height
• Letter Spacing
• Word Spacing

1. Text Align

text-align দিয়ে Text-এর অবস্থান নির্ধারণ করা হয়।

  h1{ 
    text-align: center; 
  }

কিছু সাধারণ Value—
• left
• center
• right
• justify

2. Text Decoration

text-decoration দিয়ে Text-এর Decoration যোগ বা Remove করা যায়।

  a{ 
    text-decoration: none; 
  }

এটি সাধারণত Link-এর Underline Remove করার জন্য ব্যবহার করা হয়।

আরও কিছু Value—
• underline
• overline
• line-through
• none

3. Text Transform

text-transform দিয়ে Text-এর Letter Case পরিবর্তন করা যায়।

  h1{ 
    text-transform: uppercase;
   }

কিছু সাধারণ Value—
• uppercase
• lowercase
• capitalize

4. Line Height

line-height দিয়ে দুইটি লাইনের মাঝের দূরত্ব নির্ধারণ করা হয়।

  p{ 
    line-height: 1.6; 
  }

line-height বাড়ালে Paragraph পড়তে আরও সহজ হয়।

5. Letter Spacing

letter-spacing দিয়ে অক্ষরগুলোর মাঝের দূরত্ব নির্ধারণ করা হয়।

  h1{ 
    letter-spacing: 2px; 
  }

6. Word Spacing

word-spacing দিয়ে শব্দগুলোর মাঝের দূরত্ব নির্ধারণ করা হয়।

  p{ 
    word-spacing: 5px; 
  }

Summery

• text-align → Text-এর অবস্থান নির্ধারণ করে।
• text-decoration → Underline বা অন্যান্য Decoration নিয়ন্ত্রণ করে।
• text-transform → Letter Case পরিবর্তন করে।
• line-height → লাইনের মাঝের দূরত্ব নির্ধারণ করে।
• letter-spacing → অক্ষরের মাঝের দূরত্ব নির্ধারণ করে।
• word-spacing → শব্দের মাঝের দূরত্ব নির্ধারণ করে।

---

13. CSS Fonts

CSS-এ Font Properties ব্যবহার করে Text-এর Font, Size এবং Style পরিবর্তন করা যায়।

সবচেয়ে বেশি ব্যবহৃত Font Properties হলো—
• font-family
• font-size
• font-weight
• font-style

1. Font Family

font-family দিয়ে কোন Font ব্যবহার করা হবে তা নির্ধারণ করা হয়।

  body{ 
    font-family: Arial, sans-serif;
   }

একাধিক Font দেওয়া হয়, যাতে প্রথম Font না থাকলে Browser পরের Font ব্যবহার করতে পারে।

2. Font Size

font-size দিয়ে Text-এর আকার নির্ধারণ করা হয়।

  h1{ 
    font-size: 32px;
   }

আপনি px, rem বা em Unit ব্যবহার করতে পারেন।

3. Font Weight

font-weight দিয়ে Text কতটা মোটা (Bold) হবে তা নির্ধারণ করা হয়।

  h1{
    font-weight: bold;
  }

এছাড়াও Number ব্যবহার করা যায়।

  h1{
    font-weight: 700;
  }

কিছু সাধারণ Value—
• 400 → Normal
• 700 → Bold

4. Font Style

font-style দিয়ে Text-এর Style পরিবর্তন করা হয়।

  p{ 
    font-style: italic; 
  }

কিছু সাধারণ Value—
• normal
• italic

Font Shorthand

একাধিক Font Property এক লাইনে লেখা যায়।

  p{
    font: italic 700 18px Arial, sans-serif;
  }

এটি নিচের Code-এর সমান।

p{
    font-style: italic;
    font-weight: 700;
    font-size: 18px;
    font-family: Arial, sans-serif;
}

Tip: Beginner হিসেবে আলাদা Property ব্যবহার করাই সহজ। পরে চাইলে font Shorthand ব্যবহার করতে পারেন।

Note:Google Fonts-এর মতো Web Fonts ব্যবহার করে Website-এ নতুন Font যোগ করা যায়।

এটি আমরা Intermediate CSS-এ বিস্তারিত শিখব।

Summery

• font-family → Font নির্বাচন করে।
• font-size → Text-এর আকার নির্ধারণ করে।
• font-weight → Text-এর মোটা বা পাতলা হওয়া নির্ধারণ করে।
• font-style → Italic বা Normal Style নির্ধারণ করে।
• font হলো একটি Shorthand Property।

---

14. CSS Links

CSS ব্যবহার করে Link-এর Color, Decoration এবং বিভিন্ন অবস্থার (State) Style পরিবর্তন করা যায়।

সাধারণত Link Style করার জন্য Element ব্যবহার করা হয়।

Basic Link Style

  a{ 
    color: blue;
   }

এখানে সব Link নীল রঙের হবে।

Remove Underline

ডিফল্টভাবে Link-এর নিচে একটি Underline থাকে।

text-decoration ব্যবহার করে এটি Remove করা যায়।

  a{ 
    text-decoration: none; 
  }

Link States

একটি Link-এর কয়েকটি State রয়েছে।
• :link → যে Link এখনো Visit করা হয়নি।
• :visited → যে Link আগে Visit করা হয়েছে।
• :hover → Mouse Link-এর উপর গেলে।
• :active → Link-এ Click করার সময়।

Example

  a:link{ 
    color: blue; 
   } 
  
  a:visited{ 
    color: purple;
   } 
  
  a:hover{ 
    color: red;
   } 
  
  a:active{ 
    color: green;
   }

Hover Effect

Hover Effect Website-কে আরও Interactive করে।

  a:hover{ 
    text-decoration: underline;
   }

Mouse Link-এর উপর নিলে Underline দেখা যাবে।

Summary

• CSS দিয়ে Link-এর Style পরিবর্তন করা যায়।
• text-decoration: none; ব্যবহার করে Underline Remove করা যায়।
• Link-এর চারটি সাধারণ State হলো—
  • :link
  • :visited
  • :hover
  • :active
• :hover ব্যবহার করে সহজ Hover Effect তৈরি করা যায়।

---

15. CSS Lists

CSS-এ List Properties ব্যবহার করে Ordered (<ol>) এবং Unordered (<ul>) List-এর Style পরিবর্তন করা যায়।

1. List Style Type

list-style-type দিয়ে List Marker-এর ধরন পরিবর্তন করা হয়।

  ul{ 
    list-style-type: square;
   }

কিছু সাধারণ Value—
• disc
• circle
• square
• decimal
• none

2. List Style Position

list-style-position দিয়ে List Marker কোথায় থাকবে তা নির্ধারণ করা হয়।

  ul{ 
    list-style-position: inside;
   }

কিছু সাধারণ Value—
• outside (Default)
• inside

3. Remove List Marker

Navigation Menu তৈরির সময় সাধারণত List Marker Remove করা হয়।

  ul{ 
    list-style-type: none;
   }

List Shorthand

একাধিক List Property এক লাইনে লেখা যায়।

  ul{ 
    list-style: square inside;
   }

এটি নিচের Code-এর সমান।

  ul{ 
    list-style-type: square; 
    list-style-position: inside;
   }

Tip: ছোট এবং পরিষ্কার Code লেখার জন্য list-style Shorthand ব্যবহার করা যায়।

Summary

• list-style-type দিয়ে List Marker-এর ধরন পরিবর্তন করা হয়।
• list-style-position দিয়ে Marker-এর অবস্থান নির্ধারণ করা হয়।
• list-style-type: none; ব্যবহার করে List Marker Remove করা যায়।
• list-style হলো একটি Shorthand Property।

---

16. CSS Display

CSS-এ display Property দিয়ে একটি Element কীভাবে Browser-এ প্রদর্শিত হবে তা নির্ধারণ করা হয়।

সবচেয়ে বেশি ব্যবহৃত Display Value হলো—
• block
• inline
• inline-block
• none

1. display: block

Block Element সবসময় নতুন লাইন থেকে শুরু হয় এবং পুরো Available Width দখল করে।

  div{ 
    display: block;
   }

কিছু Block Elements:
• <div>
• <p>
• <h1>
• <section>

2. display: inline

Inline Element নতুন লাইন শুরু করে না এবং শুধু যতটুকু জায়গা প্রয়োজন ততটুকুই নেয়।

  span{ 
    display: inline;
   }

কিছু Inline Elements:
• <span>
• <a>
• <strong>
• <em>

3. display: inline-block

inline-block হলো Block এবং Inline-এর মিশ্রণ।

এটি নতুন লাইন শুরু করে না, কিন্তু width ও height ব্যবহার করা যায়।

  .box{ 
    display: inline-block; 
    width: 150px; 
    height: 80px; 
  }

4. display: none

display: none; ব্যবহার করলে Element সম্পূর্ণ লুকিয়ে যায়।

  .box{ 
    display: none;
   }

Browser-এ Element দেখা যাবে না এবং এটি কোনো জায়গাও দখল করবে না।

Note

CSS-এ আরও অনেক Display Value রয়েছে, যেমন—
• flex
• grid
• table

এগুলো আমরা Intermediate CSS-এ বিস্তারিত শিখব।

Summary

• display Property দিয়ে Element কীভাবে দেখাবে তা নির্ধারণ করা হয়।
• block → নতুন লাইন থেকে শুরু হয়।
• inline → নতুন লাইন শুরু করে না।
• inline-block → Inline-এর মতো থাকে, কিন্তু width ও height ব্যবহার করা যায়।
• none → Element সম্পূর্ণ লুকিয়ে দেয়।

---

17. CSS Position (Basic)

CSS-এ position Property ব্যবহার করে কোনো Element-এর অবস্থান (Position) নিয়ন্ত্রণ করা হয়।

সবচেয়ে বেশি ব্যবহৃত Position Value হলো—
• static
• relative
• absolute
• fixed
• sticky

1. position: static

static হলো সব HTML Element-এর Default Position।

  .box{ 
    position: static;
   }
 

static Element-এর উপর top, right, bottom এবং left কাজ করে না।

2. position: relative

relative ব্যবহার করলে Element তার নিজের স্বাভাবিক অবস্থান থেকে সরানো যায়।

  .box{ 
    position: relative; 
    top: 20px; 
    left: 30px; 
  }
 

এখানে .box তার আগের অবস্থান থেকে নিচে 20px এবং ডানে 30px সরে যাবে।

3. position: absolute

absolute ব্যবহার করলে Element Normal Document Flow থেকে বের হয়ে যায়।

  .box{ 
    position: absolute; 
    top: 20px; 
    right: 20px; 
  }
 

সাধারণত absolute Element তার সবচেয়ে কাছের Positioned Parent-এর উপর ভিত্তি করে অবস্থান নির্ধারণ করে।

4. position: fixed

fixed Element Browser Window-এর একটি নির্দিষ্ট জায়গায় স্থির থাকে।

  .box{ 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
  }
 

Page Scroll করলেও Element একই জায়গায় থাকে।

5. position: sticky

sticky Element প্রথমে সাধারণভাবে Scroll করে, কিন্তু নির্দিষ্ট Position-এ পৌঁছালে সেখানে আটকে যায়।

  .box{ 
    position: sticky; 
    top: 0; 
  }
 

এটি সাধারণত Sticky Header বা Sticky Sidebar তৈরিতে ব্যবহার করা হয়।

Note: top, right, bottom এবং left Property সাধারণত relative, absolute, fixed এবং sticky-এর সাথে ব্যবহার করা হয়।

Summary

• static → Default Position।
• relative → নিজের অবস্থান থেকে সরানো যায়।
• absolute → Normal Flow থেকে বের হয়ে Positioned Parent-এর উপর ভিত্তি করে অবস্থান নেয়।
• fixed → Browser Window-তে স্থির থাকে।
• sticky → Scroll করতে করতে নির্দিষ্ট জায়গায় আটকে যায়।

---

18. CSS Overflow

কখনও কখনও কোনো Element-এর Content তার নির্ধারিত Size-এর চেয়ে বড় হয়ে যায়। তখন সেই অতিরিক্ত অংশ কীভাবে দেখাবে, তা overflow Property দিয়ে নিয়ন্ত্রণ করা হয়।

1. overflow: visible

visible হলো Default Value।
Content বড় হলে সেটি Box-এর বাইরে দেখা যাবে।

    .box{ 
      overflow: visible;
     }
  

2. overflow: hidden

hidden ব্যবহার করলে Box-এর বাইরের Content লুকিয়ে যায়।

    .box{ 
      overflow: hidden;
     }
  

3. overflow: scroll

scroll ব্যবহার করলে সবসময় Scrollbar দেখা যায়।

    .box{ 
      overflow: scroll;
     }
  

Content ছোট হলেও Scrollbar দেখা যাবে।

4. overflow: auto

auto ব্যবহার করলে প্রয়োজন হলে Scrollbar দেখায়।

    .box{ overflow: auto; }
    
Content বড় হলে Scrollbar আসবে, আর ছোট হলে আসবে না।
  

Note:CSS-এ overflow-x এবং overflow-y ব্যবহার করে Horizontal এবং Vertical Overflow আলাদাভাবে নিয়ন্ত্রণ করা যায়।
এগুলো আমরা Intermediate CSS-এ বিস্তারিত শিখব।

Summary

• overflow দিয়ে অতিরিক্ত Content কীভাবে দেখাবে তা নিয়ন্ত্রণ করা হয়।
• visible → Content Box-এর বাইরে দেখা যায়।
• hidden → অতিরিক্ত Content লুকিয়ে যায়।
• scroll → সবসময় Scrollbar দেখায়।
• auto → প্রয়োজন হলে Scrollbar দেখায়।

---

19. CSS Box Model

CSS-এ প্রতিটি HTML Element-কে একটি Box হিসেবে ধরা হয়। এই ধারণাকেই CSS Box Model বলা হয়।

একটি Box মোট ৪টি অংশ নিয়ে গঠিত।
• Content
• Padding
• Border
• Margin

CSS Box Model

1. Content

Content হলো Element-এর মূল অংশ।
এখানে Text, Image বা অন্য কোনো HTML Element থাকে।

2. Padding

Padding হলো Content এবং Border-এর মাঝের Space।
Padding বাড়ালে Element-এর ভিতরে বেশি জায়গা তৈরি হয়।

3. Border

Border হলো Content-এর চারপাশের রেখা।
এটি Element-কে আরও স্পষ্টভাবে দেখাতে সাহায্য করে।

4. Margin

Margin হলো Border-এর বাইরের Space।
এটি একটি Element-এর সাথে অন্য Element-এর দূরত্ব তৈরি করে।

Example

    .box{ 
      width: 200px; 
      padding: 20px; 
      border: 2px solid black; 
      margin: 30px; }
   

Note:

ডিফল্টভাবে width এবং height শুধুমাত্র Content-এর Size নির্ধারণ করে।

Padding এবং Border যোগ করলে Element-এর মোট Size আরও বড় হয়ে যায়।

আমরা box-sizing Property সম্পর্কে Intermediate CSS-এ বিস্তারিত শিখব।

Summary

• প্রতিটি HTML Element একটি Box হিসেবে কাজ করে।
• Box Model-এর ৪টি অংশ হলো—
  • Content
  • Padding
  • Border
  • Margin
• Padding হলো ভিতরের Space।
• Margin হলো বাইরের Space।
• Border হলো Content-এর চারপাশের রেখা।

---

20. Simple Card Project

এখন পর্যন্ত আমরা CSS-এর Basic Topics শিখেছি।
এবার একটি Simple Card তৈরি করি, যেখানে আমরা শেখা অনেকগুলো CSS Property একসাথে ব্যবহার করব।

HTML File

<div class="card">
    <img src="image.jpg" alt="Nature">

    <h2>Nature</h2>

    <p>
        Nature is beautiful and full of amazing 
        places to explore.
    </p>

    <a href="#">Read More</a>
</div>
    

CSS File

.card{
    width: 300px;
    margin: 30px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    font-family: Arial, sans-serif;
}

.card img{
    width: 100%;
    border-radius: 8px;
}

.card h2{
    color: #2563eb;
}

.card p{
    color: #555;
    line-height: 1.6;
}

.card a{
    color: #2563eb;
    text-decoration: none;
}
    

Output

Card-এ আপনি দেখতে পাবেন—
• একটি Image
• একটি Heading
• একটি Paragraph
• একটি Link

সবগুলো সুন্দরভাবে একটি Box-এর ভিতরে সাজানো থাকবে।

এই Project-এ যা ব্যবহার হয়েছে

• CSS Selectors
• Colors
• Background
• Border
• Border Radius
• Width
• Margin
• Padding
• Fonts
• Text
• Links

---

Congratulations! 🎉

আপনি সফলভাবে CSS Level 1 (Beginner) সম্পন্ন করেছেন।

এখন আপনি CSS-এর Foundation জানেন এবং Intermediate CSS শেখার জন্য প্রস্তুত।

পরবর্তী ধাপ:
• CSS Specificity
• CSS Cascade
• CSS Inheritance
• Advanced Selectors
• Flexbox
• Grid
• Responsive Design

---

Common Beginner Mistakes

• CSS File Link করতে ভুলে যাওয়া
• Selector ভুল লেখা
• Semicolon ভুলে যাওয়া
• Margin ও Padding গুলিয়ে ফেলা
• Box Model না বোঝা