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

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

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

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

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

</head>
<body >
<p>
<b>First Heading</b><br/ ><br/ >
<b>Second Heading</b><br/ ><br/ >
<b>Third Heading</b><br/ ><br/ >
</p>
<p>
<b>First Heading</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p>
<b>Second Heading</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p>
<b>Third Heading</b><br/ ><br/ >
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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



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

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