Tuesday, January 22, 2013

সিএসএস সিম্ফোনীঃ পর্ব ৫

ওয়েব ডিজাইনিং এর জগতে সি এস এস এক অনন্য নাম। এর অসাধারণ ভিজ্যুয়াল স্টাইল খুব সহজেই একটি ওয়েব পেইজকে আকর্ষণীয় রূপ দিতে ভূমিকা রাখে। তাই যে কোনো ওয়েব ডিজাইনারের কাছে এর প্রয়োজনীয়তা অপরিসীম। এ প্রয়োজনীয়তার প্রেক্ষিতে এই টিউটোরিয়াল সি এস এস সিম্ফোনী।
সি এস এস সিম্ফোনীর ৫ম পর্বে আপনাদের সবাইকে স্বাগতম। গতপর্বে আমরা জেনেছিলাম,কিভাবে id এর মাধ্যমে কোনো নির্দিষ্ট এইচটিএমএল ইলিমেন্টে সিএসএস স্টাইল প্রয়োগ করা যায় সে সম্পর্কে। আজ আমরা আরেকটি বিষয় সম্পর্কে জানব, আর তা হল class.
আসলে এটি অনেকটা id এর মতই কাজ করে, তবে পার্থক্য হল লেখার পদ্ধতিতে। নিচের কোড দেখলেই তা বুঝতে পারবেন।
১)               <html>
২)             <head>
৩)             <style type=”text/css”>
৪)            .cn {text-align:center;color:blue;}
৫)             </style>
৬)             </head>
৭)             <body>
৮)             <h1 class=”cn”> HELLO EVERYBODY </h1>
৯)            <p class=”cn”> this is a center align paragraph</p>
১০)            <p> this is normal</p>
১১)             <p> this is another thing </p>
১২)              </body>
১৩)                 </html>

৩ নং লাইনে সাধারণভাবেই সিএসএস ডিক্লেয়ার করা হয়েছে।
৪ নং লাইনে সিলেক্টর হিসেবে নির্ধারন করা হয়েছে “.cn”। এখানে cn কে <h1> এবং একটি <p> ট্যাগের class এট্রিবিউটের মান হিসেবে নির্ধারন করা হয়েছে। বাকি দুটি <p> ট্যাগ অপরিবর্তিত অবস্থায় আছে। cn class বিশিষ্ট সকল html ট্যাগের মান পরিবর্তন করার জন্যই <head> ট্যাগের মধ্যে সিএসএস অংশে .cn {text-align:center;color:blue;}  লিখে তা ডিক্লেয়ার করা হয়েছে। উল্লেখ্য যেকোনো class এট্রিবিউটের মান সিএসএস এর মাধ্যমে পরিবর্তন করার জন্য সিলেক্টরের জায়গায় class এর নাম লিখে তার আগে “.” দিতে হয়। <h1>  এবং প্রথম <p> ট্যাগের class এর নাম cn । এই  ট্যাগকে সিএসএস এর মাধ্যমে পরিবর্তন করার জন্য তাই সিএসএস অংশে এদের class অর্থাৎ cn লিখে তার আগে “.” দেয়া হয়েছে এবং এর পরে প্রপার্টি ঠিক করে দেয়া হয়েছে।
সবশেষে নিচের মত পাবেন
বন্ধুরা, আজ এ পর্যন্তই। পরবর্তী পর্বে এক্সটারনাল স্টাইল শীট ডিক্লেয়ার করে তা কি ভাবে ব্যবহার করতে হয় তা নিয়ে আলোচনা করা হবে। সবাইকে ধন্যবাদ।

No comments:

Post a Comment