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

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

Labib's photo
Labib
·

2 min read

Post No:11
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন।

আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib

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

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

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

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

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

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

এখানে 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> 

</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 ⇓:

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

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

HTML File ⇓

Internal 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>

Output Result:

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>

CSS File ⇓Scroll Down ⇓

Scroll Down ⇓


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 ⇓

Thanks for reading the Blog

CSSCSS3HTML5