# Css এর প্রকারভেদ ও বিস্তারিত ?

<s>Post No:11</s>  
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন।

আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:  
[**hashnode.com/@Labib**](http://hashnode.com/@Labib)

**এইচ টি এমএল ফাইলকে আমরা সাধারণত ৩ ভাবে সিএসএস দিয়ে ডিজাইন করতে পারি**

1. ইনলাইন সিএসএস **(Inline CSS)**
    
2. ইন্টার নাল সিএসএস **(Internal CSS)**
    
3. এক্সটার্নাল সিএসএস. **(External CSS)**
    

**1\. ইনলাইন সিএসএস**

সিএসএস ইনলাইন করার অর্থ হল বহিরাগত সিএসএসের পরিবর্তে একটি এইচটিএমএল ফাইলে সিএসএস স্থাপন করা। যেহেতু ইনলাইন সিএসএস একটি এইচটিএমএল উপাদানে একটি অনন্য শৈলী প্রয়োগের অনুমতি দেয়, তাই এর ব্যবহার সীমিত কিন্তু অনন্য বৈশিষ্ট্য তৈরির জন্য উপকারী।

**এখানে HTML ⇓**

![](https://lh5.googleusercontent.com/kdiM1s_2VcqtSivzuVt8GFiQdXWVCu_po-5Zzp0P5RU8y_zG3Kg33Dclvi1gwKWx3ZG1dbNYmSRno9rBRt-FX5-Ar_qlQmRt9K4H7ZFbSsnd9Gac3budCl8_A67-2cdL8dNuZlS-K2qlblkbWTg0Oh3sowZSPJdCbuv9lw4zhMTAVWuTERw2zcWtRgdD align="left")

**Inline CSS Use ⇓**

**HTML ট্যাগ এর ভিতর স্টাইল ট্যাগ নিয়ে  CSS করাকে Inline CSS সিস বলে।**

![](https://lh5.googleusercontent.com/oJnOmwgB17FNMnIvpVkpKwPlAHbCQH_pogRV_iQgTF4HcxNv6vKkZ9U8dWYtCjpu3tjFnWzcZczTWJeSmlHTd0sX7Yn9pTP59tYuU4GZNyoPz4ojuoWhOz9jIgzPsW117tBNGifO3wxhy6QcxRkQu0N_VYn0UlQ5eCtF0paudaAqlaDpId8p2uPDHgLv align="left")

```xml
<!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>
```

**Output Result ⇓:**

![](https://lh6.googleusercontent.com/KvZs7TCtXa1ctwYXiBCPqDn7zusTLybx_4NoPYQcjwp42rpSxzaRr_qcPLdJ9dAxqQNTMkTSC-qvWin4BgD4SRMB2K_vs-kYpSF9pIjyPCpDPS8SllkTSJ8FHmEPt5YdM2Cs21KdG5GvBggvjVzftdhxDAVz-AZM22s0k8_eo8SqM6KNK-U43mcEVGuc align="left")

**2\. ইন্টার নাল সিএসএস (Internal CSS) Use:**

একটি অভ্যন্তরীণ CSS একটি একক HTML পৃষ্ঠার জন্য একটি শৈলী সংজ্ঞায়িত করতে ব্যবহৃত হয়। একটি অভ্যন্তরীণ CSS একটি HTML পৃষ্ঠার &lt;head&gt; বিভাগে একটি &lt;style&gt; উপাদানের মধ্যে সংজ্ঞায়িত করা হয়।

**HTML File ⇓**

![](https://lh5.googleusercontent.com/kdiM1s_2VcqtSivzuVt8GFiQdXWVCu_po-5Zzp0P5RU8y_zG3Kg33Dclvi1gwKWx3ZG1dbNYmSRno9rBRt-FX5-Ar_qlQmRt9K4H7ZFbSsnd9Gac3budCl8_A67-2cdL8dNuZlS-K2qlblkbWTg0Oh3sowZSPJdCbuv9lw4zhMTAVWuTERw2zcWtRgdD align="left")

**Internal CSS:**

এইচটিএমএল ফাইল এ হেডিং ট্যাগের ভিতর স্টাইল ট্যাগ নিয়ে সিলেক্টর এর মাধ্যমে ধরে সিএসএস করাকেই ইন্টারনাল সিএসএস বলা হয়।

```xml
<!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>
```

![](https://lh4.googleusercontent.com/rG6VQCv1w_vUMImiBxD__rILiPRpzSejJ4z3QuXw-DpNEL2Tpwig9JYElowI3KlNipp5IwwVvYJn3HkD7Yxtde-PQsihe7e9SvfHdBrjdZmh4Y9hI2cpc8ieFmCu9aw1sh_ZFpW7dHfMoIP3OgKhQZAv55mqHgAHmr6TAiYQIIkIB5bKWAofHLALW0ih align="left")

**Output Result:**

![](https://lh5.googleusercontent.com/d-JBzIYFMOs66jeXbh7zKOHsdCVgCXK89m6A62yp32yiGMOTdeB7sgRYVt4v5CN4YmFgUkEgL2yWd1VL76g3OcenpVS_U3Znl_hvNq4PRyPhcVLvyuvQNMWxrr-npthbZ7A0QujmhX6baTMpjl4rlZRONj6tyuW2feObYs3sJb-UeXR6lhaQ2bVN2wvg align="left")

**3\. এক্সটার্নাল সিএসএস (External CSS) :**

একটি বহিরাগত স্টাইল শীট হল একটি পৃথক CSS ফাইল যা ওয়েবপৃষ্ঠার প্রধান অংশের মধ্যে একটি লিঙ্ক তৈরি করে অ্যাক্সেস করা যেতে পারে। একাধিক ওয়েবপেজ স্টাইলশীট অ্যাক্সেস করতে একই লিঙ্ক ব্যবহার করতে পারে। একটি বহিরাগত স্টাইল শীটের লিঙ্কটি পৃষ্ঠার প্রধান অংশের মধ্যে স্থাপন করা হয়।

**HTML File ⇓**

![](https://lh5.googleusercontent.com/4o_2UxoL4GNyG1n0rrmdqDxNeUrd7nEIF6vHXlsyXUXV3l29QOG-ayJ0bR-Nq77oQ4oITJtUTY30SGakwbifbsyFhnDt1Mty7u5BCzaNGmAqt6hwL-TjaCF_XbYbPNe-M8g-cEDD4juJy1TM2z5h6VyA1mTa1Au3VRw1vhAQQtBIPuSBUzBfVWorGdUJ align="left")

```xml
<!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>
```

**CSS File ⇓Scroll Down ⇓**

**Scroll Down ⇓**

![](https://lh3.googleusercontent.com/G0q8YK9Tb8UKv4_vTC-31oXBTMiLdjTRUfLAiGZuJ6FMiIr29XiBYd7tEAD5uTZ5ypP2qT1gxotdXLUXLligp6LedAB7guM-43HhF1sb_REzUw-aZZvQeEHaybzRXWe9UuN-q8P2r3VcuyYAEJn5HZjtLoiKMhdOl0lmm2eHp7mSJShFrn6baMSi7P1Q align="left")

```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 ⇓**

![](https://lh3.googleusercontent.com/8EMLY6dAh1q0dkfmB_OZYvoKm35voF5BPUja3Ah_3pwdsmM4nv0nnzIHgnXRoLitFaAWCFeCkBqXUVSZM8pV7nmOHYtXmshR7y86QYsgXZmNVgNgSH8L6jfrwLSkzWY0jns7yymZX9gUYNXytXtdNE4Hi_7h8ikD1eUUa8Nh_j8zWXiH3fOgpZhMkWRm align="left")

**Thanks for reading the Blog**
