সিএসএস এর দ্বিতীয় ক্লাসে সবাইকে স্বাগতম। এ পর্বে সিএসএস কোডের id, ও class কিভাবে এইচটিএমএল এর সাথে কাজ করে তা দেখবো। আগের পর্ব যারা দেখেন নি তারা CSS এর প্রথম পর্ব দেখে নিন। তাছাড়া আলাদা CSS ফাইল আকারে কিভাবে প্রকাশ করা হয় এবং তা HTML এ প্রকাশ করার পদ্ধতিও দেখবো।
CSS এ কমেন্ট (যা মূলত: প্রগ্রামের অংশ নয়, প্রগ্রামারের সুবিধার জন্য ব্যবহৃত হয়) লিখতে হলে
/*...*/ এর মধ্যে লিখতে হয়। যেমন-
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}সুনির্দিষ্ট কোন ইলিমেন্টের স্টাইল প্রকাশের ক্ষেত্রে id সিলেক্টর ব্যবহৃত হয়। এ ক্ষেত্রে # দিয়ে তার পর id'র নাম লিখতে হয়। যেমন-
#para1
{
text-align:center;
color:red;
}HTML কোড এ এভাবে প্রকাশ করা হয়:
<p id="para1">Hello World!</p>
একটি নিদিষ্ট গ্রুপের জন্য class সিলেক্টর ব্যবহৃত হয়। এ ক্ষেত্রে . দিয়ে তার পর class এর নাম লিখতে হয়।
CSSফাইলে তা এভাবে লিখতে হয়
p.center
{
text-align:center;
}
HTML কোড এ এভাবে প্রকাশ করা হয়:
<p>This paragraph will be center-aligned.</p>
<html>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1>This heading will not be affected</h1>
<p>This paragraph will be center-aligned.</p>
</body>
</html>
১. বাইরের সিএসএস ফাইল কল করার মাধ্যমে
২. স্টাইল উল্লেখ করে তার ভেতরে কোড লিখে
৩. লাইনে লাইনে
যে কোন নোট প্যাডে সিএসএস কোড লিখে তা .css ফরমেটে সেভ করতে হবে
মনে করি একটি সিএসএস ফাইল mystyle.css । mystyle.css ফাইলে নিচের কোড আছে
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}এই ফাইলটি কল করার জন্য নিচের html কোড লিখতে হবে।
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
যেখানে অনেকগুলো পাতার জন্য স্টাইল লিখতে হবে সেখানে বাইরের সিএসএস ফাইল কল করার মাধ্যমে কাজ করাই সুবিধাজনক
একই পাতার জন্য স্টাইল ব্যবহার করার ক্ষেত্রে HTMLফইলেই CSS কোড লেখা যায়। <style type="text/css"> ... </style> এর মধ্যে CSS কোড লিখতে হয়। নিচের প্রোগ্রামটি দেখুন।
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
নিচের মতোও লাইনে লাইনে সিএসএস কোড লিখে কাজ করার যায়। তবে এটাতে ভুল হওয়ার সম্ভাবনা আছে।
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
একাধিক বার কোন এলিমেন্টের স্টাইল উল্লেখ করলে দুই স্টাইল মিলিত ভাবে কাজ করে ।
HTML এর উপর অসিম যে টিউটরিয়াল লিখেছেন তাতে সবাই অংশগ্রহন ছাড়া (বা HTMLজ্ঞান ছাড়া) এই টিউটরিয়াল বুঝতে পারবেন না। তাই এক পলকে দেখে নেই সেই টিউটরিয়ালগুলো।
HTMLপর্ব- এক: আমার প্রথম ওয়েব সাইট (প্রাথমিক ধারণা)
HTMLপর্ব- দুই: রঙের ব্যবহার
HTMLপর্ব- তিন: ব্যাকগ্রাউন্ড এ রঙের ব্যবহার
HTMLপর্ব- চার: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-১
HTMLপর্ব-পাঁচ: প্যারাগ্রাফ এর ব্যবহার ও সুবিধা-২
HTML পর্ব-৬ HTML এ Font ট্যাগের ব্যবহার
মূল লেখা
মতামতের মডারেশ দিতে এখানে
আমি টিউটো। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 15 বছর 7 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 66 টি টিউন ও 476 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
তিনি দীর্ঘ দিন ধরে সাফল্যের সাথে টিটোরিয়াল বিডি ব্লগটি পরিচালনা করে আসছেন। বর্তমানে ব্লগিং এর পাশাপাশি একটি বেসরকারী প্রতিষ্ঠানে চাকরি করছেন। http://www.facebook.com/#!/mahbubpalash http://twitter.com/tuto_mahbub
