স্টাইল – ফ্রি HTML ও CSS কোর্স – ক্লাস ৭

CSS বলতে Cascading Style Sheets বোঝায় এবং এটি ওয়েবের ভিজ্যুয়াল ভাষা। এটির সাহায্যে আমরা HTML পেজগুলি কেমন দেখতে হবে তা ডিজাইন করতে পারি। সিএসএস আমাদের পেজের ডেটা, এইচটিএমএল-এর মধ্যে এবং পেজের স্টাইলিং, পেজের সিএসএসে এনকোড করতে দেয়।

সিএসএস “ক্যাসকেডিং” এর কারণটি কোন স্টাইলগুলি ব্যবহার করতে হবে তা নির্ধারণ করার এর পদ্ধতিটি। এইচটিএমএল উপাদানগুলি তাদের স্টাইলকে “ক্যাসকেডিং” পদ্ধতিতে প্রাপ্ত, খুব নীচে থেকে সর্বোচ্চ পর্যন্ত অগ্রাধিকারের একটি নির্দিষ্ট সেট অনুসারে:

  • ব্রাউজার ডিফল্ট
  • স্টাইল পেজে সংজ্ঞায়িত করা
  • কিছু স্টাইল তাদের চাইল্ডদের একটি স্টাইল উত্তরাধিকার সূত্রে দেবে, উদাহরণস্বরূপ: কোন ফন্ট ব্যবহার করা উচিত
  • লোডিং ক্রমে সংজ্ঞায়িত করা শেষ বিধিটি হল সেটি যেটি প্রথমে কার্যকর হবে।
  • এলিমেন্ট নির্বাচনকারী (উদাহরণস্বরূপ, সমস্ত এলিমেন্ট স্টাইলিং)
  • class নির্বাচক (উদাহরণস্বরূপ, সমস্ত .main এলিমেন্ট স্টাইলিং)
  • পেজে একটি নির্দিষ্ট এলিমেন্ট নির্বাচন করতে ব্যবহৃত ID selector
  • মিডিয়া টাইপ
  • এইচটিএমএল “style” অ্যাট্রিবিউট ব্যবহার করে উপাদান-নির্দিষ্ট সিএসএসের সংজ্ঞা দেওয়া
  • !important সিএসএস ওভাররাইড নির্দেশিকা (এই নির্দেশিকাটি কেবলমাত্র শেষ অবলম্বন হিসাবে ব্যবহার করুন)

এছাড়াও, কিছু আপেক্ষিক “ক্যাসকেডিং” বৈশিষ্ট্য রয়েছে যা তাদের প্যারেন্টের সাথে তুলনামূলকভাবে সজ্জিত হতে পারে, উদাহরণস্বরূপ, line height এবং font size, উদাহরণস্বরূপ, rem (relative em) সিএসএস মেট্রিক যা প্যারেন্টের সাথে তুলনামূলকভাবে সংজ্ঞায়িত করা হয়েছে, বা শতাংশ ইউনিট।

CSS সংজ্ঞায়িত করা

সিএসএস চারটি পদ্ধতি ব্যবহার করে সংজ্ঞায়িত করা যেতে পারে:

১. Inline

ইনলাইন পদ্ধতিটি ব্যবহার করে একটি সিএসএস style এর সংজ্ঞা দিতে, HTML style attribute ব্যবহার করুন:

<p>This is the default serif font. It is commonly used in 
printed media for better readability, since letters
are more distinct in serif fonts.</p>

<p style="font-family: sans-serif">This is a sans-serif font. 
It is commonly used in screens because it is hard
for screens to render letters with such great detail.</p>

২. সিএসএস ট্যাগ ব্যবহার করা

সিএসএস ইনলাইন সংজ্ঞায়িত করার পরামর্শ দেওয়া মোটেই বাঞ্ছনীয় নয়, যতটা সম্ভব এড়িয়ে চলুন। আপনার সর্বদা একটি সিএসএস স্টাইলশিট সংজ্ঞায়িত করা উচিত এবং স্টাইলশীট প্রয়োগ করতে selector ব্যবহার করা উচিত। selector টিউটোরিয়াল CSS সিলেক্টর ব্যবহার করে কীভাবে এইচটিএমএল উপাদান নির্বাচন করতে হয় সে সম্পর্কে একটি বিস্তারিত টিউটোরিয়াল দেবে।

এখানে একটি উদাহরণ:

<!DOCTYPE html>
<head>
    <style>
        .nice {
            font-family: sans-serif;
        }
    </style>
</head>
<body>
    <p>This is the default serif font. It is commonly used in 
    printed media for better readability, since letters
    are more distinct in serif fonts.</p>

    <p class="nice">This is a sans-serif font. 
    It is commonly used in screens because it is hard
    for screens to render letters with such great detail.</p>

</body>

৩. ভিন্ন স্টাইলশিট ব্যবহার করা

আপনি একটি বাহ্যিক ফাইলে একটি সিএসএস স্টাইলশিট সংজ্ঞায়িত করতে পারেন (সাধারণত .css এক্সটেনশনের সাহায্যে উল্লিখিত) এবং এটিকে লোড করতে পারেন।

পূর্ববর্তী উদাহরণে একই সিএসএস ক্লাস সংজ্ঞায়িত করার জন্য একটি উদাহরণ দেওয়া হয়েছে, তবে “style.css” নামে একটি ফাইল রয়েছে।

.nice {
    font-family: sans-serif;
}

সিএসএস ফাইলটি লোড করতে আমাদের নীচের পদ্ধতিতে এইচটিএমএল ট্যাগ ব্যবহার করতে হবে:

<link rel="stylesheet" href="nice.css">

দয়া করে নোট করুন যে স্টাইলশীটটি HTML পৃষ্ঠার তুলনায় যথাযথভাবে হওয়া উচিত। এই উদাহরণে, HTML ফাইল এবং সিএসএস ফাইল উভয়ই একই ডিরেক্টরিতে থাকা দরকার।

লিঙ্ক ট্যাগটি এইচটিএমএল পৃষ্ঠার <head> বিভাগে থাকা উচিত:

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="nice.css">    
</head>
<body>
    <p>This is the default serif font. It is commonly used in 
    printed media for better readability, since letters
    are more distinct in serif fonts.</p>

    <p class="nice">This is a sans-serif font. 
    It is commonly used in screens because it is hard
    for screens to render letters with such great detail.</p>

</body>

৪. প্রোগ্রাম্যাটিক অ্যাক্সেস

এইচটিএমএল উপাদানগুলির style attribute রয়েছে যা আপনি প্রোগ্রামিয়ালি স্টাইল যুক্ত করতে ব্যবহার করতে পারেন।

উদাহরণ স্বরূপ:

<!DOCTYPE html>
<body>
    <p id="serif-text">This is the default serif font. It is commonly used in 
    printed media for better readability, since letters
    are more distinct in serif fonts.</p>

    <p class="nice" id="sans-serif-text">This is a sans-serif font. 
    It is commonly used in screens because it is hard
    for screens to render letters with such great detail.</p>

    <script>
        var sansSerifText = document.getElementById("sans-serif-text");
        sansSerifText.style.fontFamily = "sans-serif";
    </script>
</body>

Leave a Comment