এ পর্যন্ত আমরা যেটুকু আলোচনা করেছি তা হল একেবারেই বেসিক লেভেলের।
কোডগুলো লিখে রান করলে দেখা যায় লেখাগুলো ব্রাউজারের বামপাশে দেখায় এবং
কালো রঙের দেখায়।
বাস্তবে আমরা যে ওয়েব সাইটগুলো দেখি তাতে দেখা যায় সাইটটা অনেক সুন্দর করে সাজানো। লেখাগুলো ডানে, মাঝে বা বিভিন্ন ফরম্যাটে সাজানো। কিছু লেখা লাল, নীল , হলুদ বিভিন্ন কালারের হয়। আবার ব্যাকগ্রাউন্ড কালার করাও থাকে। এগুলো কিভাবে করা হয়?
এ কাজগুলো করার জন্যে সি এস এস-CSS ব্যবহার করা হয়। CSS এর পূর্ণাঙ্গ রুপ হল cascading style sheet.। HTML এলিমেন্টে স্টাইল প্রদান করার জন্যে এটার সৃষ্টি। সি এস এস প্রথম ব্যবহার করা হয় HTML 4.0 এর সাথে। একটা সাইটে যতগুলো পেইজ থাকে সবগুলো পেইজকে একটি কমন কমান্ড দ্বারা স্টাইলিশ্ট করার উদ্দেশ্যেই এর আবিষ্কার।
বাস্তবে আমরা যে ওয়েব সাইটগুলো দেখি তাতে দেখা যায় সাইটটা অনেক সুন্দর করে সাজানো। লেখাগুলো ডানে, মাঝে বা বিভিন্ন ফরম্যাটে সাজানো। কিছু লেখা লাল, নীল , হলুদ বিভিন্ন কালারের হয়। আবার ব্যাকগ্রাউন্ড কালার করাও থাকে। এগুলো কিভাবে করা হয়?
এ কাজগুলো করার জন্যে সি এস এস-CSS ব্যবহার করা হয়। CSS এর পূর্ণাঙ্গ রুপ হল cascading style sheet.। HTML এলিমেন্টে স্টাইল প্রদান করার জন্যে এটার সৃষ্টি। সি এস এস প্রথম ব্যবহার করা হয় HTML 4.0 এর সাথে। একটা সাইটে যতগুলো পেইজ থাকে সবগুলো পেইজকে একটি কমন কমান্ড দ্বারা স্টাইলিশ্ট করার উদ্দেশ্যেই এর আবিষ্কার।
HTML এ ভিন্ন ভিন্ন ভাবে সি এস এস স্টাইল প্রয়োগ করা যায়।যেমন:
- আলাদা style sheet file(CSS file) এর দ্বারা
- Head এলিমেন্টের মধ্যে style এলিমেন্ট হিসেবে
- প্রতিটা HTML এলিমেন্টের style এট্রিবিউট হিসেবে
HTML এলিমেন্টের style এট্রিবিউটের CSS প্রয়োগ করতে গেলে যথেষ্ট সময়ের অপচয় হয়। আলাদা style sheet এ CSS কোডগুলো লিখাই সবচেয়ে ভালো। তবুও শেখার জন্যে আমরা style এট্রিবিউটে কিভাবে CSS প্রয়োগ করা হয় তা দেখব।
ব্যাকগ্রাউন্ড স্টাইলের উদাহরণ:
<html>
<body style="background-color:blue;">
<h1 style="background-color:black;">This is heading</h1>
<p style="backgroun-color: yellow;">This is a paragraph</p>
</body>
</html>
কোডগুলো নোটপ্যাডে লিখে সেভ করে রান করে দেখুন কেমন দেখায়।
Font, Color, and size with CSS:
<html>
<body>
<p style=" font-family:arial;">This is a paragraph</p>
<p style="font-family:verdana; color:red;">This is a paragraph</p>
<p style="font-size:20 px;">This is a paragraph</p>
</body>
</html>
font-family দিয়ে font স্টাইল করা , color দিয়ে ফন্ট কালার এবং font-size দিয়ে ফন্টের সাইজ নির্ধারণ করা হয়।
Text alignment with CSS:
<html>
<body>
<p style="text-align:center;">This is paragraph</p>
<p> The above paragraph is styled with text-align</p>
</body>
</html>
text-align কমান্ড দিয়ে লেখাকে আনুভূমিক ভাবে সাজানো হয়। লেখাকে ডানে বা মাঝে প্রদর্শন করার জন্যে এই স্টাইল করা হয়।
এখানে বিশেষভাবে লক্ষ্য রাখতে হবে যে এট্রিবিউটগুলো সবসময় কোটেশন মার্কের (" ") মধ্যে রাখতে হবে। আর স্টাইলিং এট্রিবিউটগুলোর পরে একটি কোলন ( : ) চিহ্ন এবং মান প্রদান শেষে একটি সেমিকোলন চিহ্ন দিতে হবে। না দিলে ব্রাউজার স্টাইলগুলো প্রদর্শন করবে না।
পরিশেষে বলব যত বেশি সম্ভব প্র্যাকটিস করুন। নোটপ্যাডে কোডগুলো লিখে সেভ করে রান করুন। এখানে যা দেখানো হয়েছে তা শুধুমাত্র বোঝানোর জন্যে। আপনি আপনার মত করে পরিবর্তন করে নিন। যত বেশি প্র্যাকটিস করবেন তত এটা আপনার কাছে পরিষ্কার হয়ে উঠবে।
- আলাদা style sheet file(CSS file) এর দ্বারা
- Head এলিমেন্টের মধ্যে style এলিমেন্ট হিসেবে
- প্রতিটা HTML এলিমেন্টের style এট্রিবিউট হিসেবে
HTML এলিমেন্টের style এট্রিবিউটের CSS প্রয়োগ করতে গেলে যথেষ্ট সময়ের অপচয় হয়। আলাদা style sheet এ CSS কোডগুলো লিখাই সবচেয়ে ভালো। তবুও শেখার জন্যে আমরা style এট্রিবিউটে কিভাবে CSS প্রয়োগ করা হয় তা দেখব।
ব্যাকগ্রাউন্ড স্টাইলের উদাহরণ:
<html>
<body style="background-color:blue;">
<h1 style="background-color:black;">This is heading</h1>
<p style="backgroun-color: yellow;">This is a paragraph</p>
</body>
</html>
কোডগুলো নোটপ্যাডে লিখে সেভ করে রান করে দেখুন কেমন দেখায়।
Font, Color, and size with CSS:
<html>
<body>
<p style=" font-family:arial;">This is a paragraph</p>
<p style="font-family:verdana; color:red;">This is a paragraph</p>
<p style="font-size:20 px;">This is a paragraph</p>
</body>
</html>
font-family দিয়ে font স্টাইল করা , color দিয়ে ফন্ট কালার এবং font-size দিয়ে ফন্টের সাইজ নির্ধারণ করা হয়।
Text alignment with CSS:
<html>
<body>
<p style="text-align:center;">This is paragraph</p>
<p> The above paragraph is styled with text-align</p>
</body>
</html>
text-align কমান্ড দিয়ে লেখাকে আনুভূমিক ভাবে সাজানো হয়। লেখাকে ডানে বা মাঝে প্রদর্শন করার জন্যে এই স্টাইল করা হয়।
এখানে বিশেষভাবে লক্ষ্য রাখতে হবে যে এট্রিবিউটগুলো সবসময় কোটেশন মার্কের (" ") মধ্যে রাখতে হবে। আর স্টাইলিং এট্রিবিউটগুলোর পরে একটি কোলন ( : ) চিহ্ন এবং মান প্রদান শেষে একটি সেমিকোলন চিহ্ন দিতে হবে। না দিলে ব্রাউজার স্টাইলগুলো প্রদর্শন করবে না।
পরিশেষে বলব যত বেশি সম্ভব প্র্যাকটিস করুন। নোটপ্যাডে কোডগুলো লিখে সেভ করে রান করুন। এখানে যা দেখানো হয়েছে তা শুধুমাত্র বোঝানোর জন্যে। আপনি আপনার মত করে পরিবর্তন করে নিন। যত বেশি প্র্যাকটিস করবেন তত এটা আপনার কাছে পরিষ্কার হয়ে উঠবে।
No comments:
Post a Comment