শিরোনামে সিউডো ক্লাসের ব্যবহার | সি এস এস বাংলা টিউটোরিয়াল

শিরোনামে সিউডো ক্লাসের ব্যবহার

কোন একটি ওয়েব পেজে অনেকগুলো আর্টিকেল থাকতে পারে এবং প্রত্যেকটি আর্টিকেলের একটি করে মূল শিরোনাম থাকতে পারে। এক্ষেত্রে শুধুমাত্র একটা মূল শিরোনামের জন্য স্ট্যাইল তৈরি করলেই সব গুলোর জন্য স্ট্যাইল তৈরি হয়ে যাবে এজন্য সিউডো ক্লাস ব্যবহার করা হয়। উদাহরণ স্বরূপ আর্টিকেল গুলো <p></p>  ট্যাগের মধ্যে রাখা হল।এখন মূল শিরোনাম তৈরির জন্য <b></b>ব্যবহার করা হল।যদি b সিলেক্টর দ্বারা স্ট্যাইল তৈরি করা হয় তাহলে, প্যরাগ্রাফের মধ্যে আরো <b></b> থাকতে পারে তাহলে তাদেরও স্ট্যাইল তৈরি হয়ে যাবে।তাই শুধুমাত্র শিরোনাম তথা যেকোন <p></p> এর প্রথম <b></b> এর জন্য স্ট্যাইল তৈরি করার জন্য সিলেক্টর নির্ধারণ করতে হবে p > b:first-child ।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
p{font-family:Arial, Helvetica, sans-serif;
background:#9CF;
border:#F39 5px solid;
padding:10px;}
p > b:first-child
{color:red;
font-size:28px;}
</style>

</head>
<body >
<p>
<b>www.tutohost.com</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p>
<b>www.tutohost.com</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p>
<b>www.tutohost.com</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট © ২০১১-২০১২ সর্বস্বত্ত্ব সংরক্ষিত, টিউটরিয়ালবিডি, একটি টিউটো ওয়েবস প্রতিষ্ঠান.