Css এর প্রকারভেদ ?

Css এর প্রকারভেদ ?

Labib's photo
Labib
·

2 min read

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

  1. ইনলাইন সিএসএস (Inline CSS)

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

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

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

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

এখানে HTML ⇓

<!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 Acadmy</h1>
    <h2>Sorobindu Acadmy</h2>
    <h3>Sorobindu Acadmy</h3>
    <h4>Sorobindu Acadmy</h4>
    <h5>Sorobindu Acadmy</h5>
    <h6>Sorobindu Acadmy</h6>
    <div>Sorobindu Acadmy</div>
    <p>Sorobindu Acadmy</p>

</body>
</html>

Inline CSS Use ⇓

HTML ট্যাগ এর ভিতর স্টাইল ট্যাগ নিয়ে CSS করাকে Inline 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>
    <link rel="stylesheet" href="style.css">


</head>

<body>

    <h1 style="color:red;background-color: white;font-size: 100px;">Sorobindu Acadmy</h1>
    <h2 style="color:red;font-size: 100px;">Sorobindu Acadmy</h2>
    <h3 style="color:red; background-color:red;" >Sorobindu Acadmy</h3>
    <h4>Sorobindu Acadmy</h4>
    <h5>Sorobindu Acadmy</h5>
    <h6>Sorobindu Acadmy</h6>
    <div>Sorobindu Acadmy</div>
    <p>Sorobindu Acadmy</p>


</body>

</html>

Output Result ⇓:

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

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

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 Acadmy</h1>
    <h2>Sorobindu Acadmy</h2>
    <h3>Sorobindu Acadmy</h3>
    <h4>Sorobindu Acadmy</h4>
    <h5>Sorobindu Acadmy</h5>
    <h6>Sorobindu Acadmy</h6>
    <div>Sorobindu Acadmy</div>
    <p>Sorobindu Acadmy</p>

</body>
</html>

Internal CSS:

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

Output Result:

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

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

HTML File ⇓

CSS File ⇓Scroll Down ⇓

Scroll Down ⇓

Output Result ⇓

h1{
    color: red;
}
h2{
    background-color: green;

}
h3{
    font-size: 50px;
}
h4{
    background-color: red;
}
h6{
    font-size: 30px;
    background-color: blue;
}
div{
    font-size: 40px;
    color: red;
    background-color: green;
}

Thanks for reading the Blog

CSSHTML5CSS3