স্টাইল সফটওয়্যার যোগ করা কিভাবে
- পূর্ববর্তী পৃষ্ঠা CSS সিলেক্টর
- পরবর্তী পৃষ্ঠা CSS মনোমূলক
ব্রাউজার স্টাইল সফটওয়্যার পড়ে যখন, তা স্টাইল সফটওয়্যারের তথ্য অনুযায়ী এইচটিএমএল ডকুমেন্টটি ফরম্যাট করবে。
স্টাইল সফটওয়্যার ব্যবহারের তিনটি পদ্ধতি
স্টাইল সফটওয়্যার সম্প্রসারণ করার তিনটি পদ্ধতি রয়েছে:
- বাইরের CSS
- অভ্যন্তরীণ CSS
- ইনলাইন CSS
বাইরের CSS
বাইরের স্টাইল সফটওয়্যার ব্যবহার করে, আপনি শুধুমাত্র একটি ফাইল সংশোধন করে সমগ্র ওয়েবসাইটের অনুভূতি পরিবর্তন করতে পারেন!
প্রত্যেকটি হিটম্যাপ পেজকে হেড অংশের <link> ইলেকমেন্টের মধ্যে বাইরের স্টাইল সফটওয়্যার ফাইলের উল্লেখ করতে হবে।
উদাহরণ
হিটম্যাপ পেজের <head> অংশের <link> ইলেকমেন্টে বাইরের স্টাইল সম্পাদন করা হয়:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
বাহ্যিক স্টাইলসহকারী যে কোনও টেক্সট এডিটরে লেখা হতে পারে, এবং .css এক্সটেনশন নিয়ে সংরক্ষণ করা উচিত।
বাহ্যিক .css ফাইলগুলি কোনও HTML ট্যাগকে যুক্ত করা হবে না。
"mystyle.css" এর মতো হতে পারে:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
পরামর্শ:অ্যাট্রিবিউটসহকারী মান এবং ইউনিটের মধ্যে খালি জায়গা যোগ করুন না (উদাহরণস্বরূপ, margin-left: 20 px;）。সঠিক লেখনী হল:margin-left: 20px;
অভ্যন্তরীণ CSS
যদি একটি HTML পৃষ্ঠা একমাত্র স্টাইলসহকারী রাখে, তবে অভ্যন্তরীণ স্টাইলসহকারী ব্যবহার করা যেতে পারে。
অভ্যন্তরীণ স্টাইলসহকারী হল হেডসহকারীর <style> এলিমেন্টে সংজ্ঞায়িত হয়。
উদাহরণ
অভ্যন্তরীণ স্টাইলসহকারী একটি HTML পৃষ্ঠার <head> অংশের <style> এলিমেন্টে সংজ্ঞায়িত হয়:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ইনলাইন CSS
স্টাইলসহকারী (অথবা ইনলাইন স্টাইল) একক এলিমেন্টের জন্য অভিন্ন স্টাইল আপলোড করার জন্য ব্যবহার করা যেতে পারে。
যদি স্টাইলসহকারী ব্যবহার করতে হয়, তবে style অ্যাট্রিবিউট এলিমেন্টে যোগ করুন। style অ্যাট্রিবিউটটি কোনও CSS অ্যাট্রিবিউটকে যুক্ত করতে পারে。
উদাহরণ
স্টাইলসহকারী প্রকাশিত এলিমেন্টের "style" অ্যাট্রিবিউটে সংজ্ঞায়িত হয়:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body> </html>
সুঝান:স্টাইলসহকারীর অনেক সুবিধা হারায় (উপাদানগুলির সাথে প্রদর্শনকে মিশ্রণ করে)। এই পদ্ধতিকে সার্বচার্য ব্যবহার করুন।
বহুসংখ্যক শৈলীগুলি
যদি একই পছন্দকারী (উপাদান) জন্য বিভিন্ন শৈলীগুলিতে কোনও বৈশিষ্ট্য সংজ্ঞায়িত হয়, তবে শেষ পড়া শৈলীগুলির মান ব্যবহার করা হবে。
যদি কোনওবাহ্যিক শৈলীগুলিযেমন <h1> তাত্ত্বিক হবে:
h1 {
color: navy;
}
তবে, যদি কোনওঅভ্যন্তরীণ শৈলীগুলিতবে <h1> তাত্ত্বিক হবে নীলকমলা:
h1 {
color: orange;
}
উদাহরণ
যদি বাহ্যিক শৈলীগুলির সাথে সংযুক্ত হয়পরেসংজ্ঞায়িত, তবে <h1> তাত্ত্বিক হবে নীলকমলা:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
উদাহরণ
কিন্তু, যদি বাহ্যিক শৈলীগুলির সাথে সংযুক্ত হয়পূর্বেইনলাইন স্টাইল নির্দিষ্ট করা হলে, <h1> ইলেমেন্ট দাগার নীল হবে:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
স্তরবদ্ধ ক্রম
কোনও এইচটিএমএল ইলেমেন্টের জন্য একাধিক স্টাইল নির্দিষ্ট করা হলে, কোনও স্টাইল ব্যবহৃত হবে?
পৃষ্ঠায় সমস্ত স্টাইল নিম্নলিখিত নিয়ম অনুযায়ী নতুন 'ভাস্তু' স্টাইলশীট 'স্তরবদ্ধ' হবে, যার মধ্যে প্রথম প্রাথমিকতা সর্বোচ্চ:
- ইনলাইন স্টাইল (এইচটিএমএল ইলেমেন্টের মধ্যে)
- বাহিরি এবং অভ্যন্তরীণ স্টাইলশীট (হেড অংশে)
- ব্রাউজার ডিফল্ট স্টাইল
তাই, ইনলাইন স্টাইল সর্বোচ্চ প্রাথমিকতা পায়, এবং বাহিরি এবং অভ্যন্তরীণ স্টাইল এবং ব্রাউজারের ডিফল্ট স্টাইলকে অবরূপ করে
- পূর্ববর্তী পৃষ্ঠা CSS সিলেক্টর
- পরবর্তী পৃষ্ঠা CSS মনোমূলক
