শরিফুল ইসলাম
Php Coder
HTML Styles - CSS
উদাহরণ
<!DOCTYPE html> <html> <head> <style> body {background-color:lightgray} h1 {color:blue} p {color:green} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
সিএসএস দ্বারা এইচটিএমএল কে স্টাইল করা
সিএসএস(css) এর পূর্ণ নাম হল Cascading Style Sheets ।
তিনভাবে স্টাইল কে এইচটিএমএল এর সাথে যুক্ত করা যায়
• Inline-স্টাইল attribute ব্যবহার করে এইচটিএমএল এর সাথে যুক্ত করা যায়
• Internal- <style> এলিমেন্ট এইচটিএমএল এর head সেকশন এর মধ্যে যুক্ত করা যায়
• External- এক বা একাধিক বাইরের সিএসএস ফাইল যুক্ত করে কাজ করা যায়।
তবে সব থেকে কমন হল বাইরে থেকে একটি সিএসএস ফাইল যুক্ত করা। কিন্তু আমরা এইখানে internal স্টাইল ব্যবহার করব। কারন এতে আমাদের জন্য স্টাইল এর জন্য ভিন্ন ভিন্ন ফাংশন গুলো বুজতে ঝুব সুবিধা হবে।
সিএসএস syntax
সিএসএস স্টাইলিং এর জন্য নিন্মোক্ত সিনটেক্স ব্যবহার করা হয়
element { property:value ; property:value }
এই element হল এইচটিএমএল এর একটি উপাদানের নাম। property হল সিএসএস একটি প্রপার্টি। value হল সিএসএস প্রপার্টি এর একটি মান।
অনেকগুলো স্টাইল থাকলে তাহলে সেগুলো সেমিকোলন দিয়ে আলাদা করতে হয়।
Inline স্টাইল (inline css)
এইচটিএমএল উপাদানের ক্ষেত্রে একটি ইউনিক স্টাইল এর জন্য inline styling খুবই উপযোগী। এই উদাহরনে ইনলাইন স্টাইল এর মাধ্যমে একটি ইউনিক heading এর টেক্সট এর কালার পরিবর্তন করা হচ্ছে
উদাহরণ
<h1 style="color:blue">This is a Blue Heading
Internal স্টাইল (internal css)
একটি পেজ এর সকল এইচটিএমএল উপাদানের জন্য একটি কমন স্টাইল ব্যবহার করা হয়েছে আর তা হল internal style sheet।
সাধারনত এটি <style> এলিমেন্ট এর সাহায্যে হেড সেকশন এর মধ্যে ইনক্লুড করতে হয়।
উদাহারন
<!DOCTYPE html> <html> <head> <style> body {background-color:lightgrey} h1 {color:blue} p {color:green} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
External স্টাইল (External সিএসএস)
অনেকগুলো পেজ এর স্টাইল নিয়ন্ত্রণ করার জন্য এই পধতি চালানো হয়। এই ক্ষেত্রে মাত্র সিএসএস ফাইল এর একটি উপাদান পরিবর্তন করার মাধ্যমে বাকি সবগুলো পেজ এর পরিবর্তন করা সম্ভব। হেড সেকশন এর মধ্যে external সিএসএস ফাইল এর লিঙ্ক করে দিতে হয়।
উদাহরণ
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
সিএসএস ফন্টস
সিএসএস এর color প্রপার্টি দ্বারা এইচটিএমএল পেজ এর টেক্সট এর কালার কি হবে তা ডিফাইন করা হয়। সিএসএস এর font-family দ্বারা টেক্সট এর ফন্ট কোন ফন্ট হবে তা ডিফাইন করে। সিএসএস এর font-size প্রপার্টি দ্বারা টেক্সট এর আকার কতটুকু হবে তা ডিফাইন করে।
উদাহরণ
<!DOCTYPE html> <html> <head> <style> h1 { color:blue; font-family:verdana; font-size:300%; } p { color:red; font-family:courier; font-size:160%; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
তবে <font> ট্যাগ টি এইচটিএমএল এর পুরাতন ভার্সন এ কাজ করে এইচটিএমএল৫ এ কাজ করে না।
সিএসএস বক্স মডেল
প্রত্যেকটি এইচটিএমএল এর উপাদানের জন্য একটি বক্স নির্দিষ্ট করা থাকে কিন্তু আমরা তখনি এটা দেখতে পারব যখন আমরা সিএসএস এর মধ্যে border প্রপার্টি ঘোষণা করব
উদাহরণ
p { border:1px solid black; }
border এর মধ্যে ফাকা তৈরি করার জন্য আমরা padding প্রপার্টি ব্যবহার করব
উদাহারন
p { border:1px solid black; padding:10px; }
বর্ডার এর বাইরে মার্জিন এর জন্য আমরা margin প্রপার্টি ব্যবহার করব
উদাহরণ
p { border:1px solid black; padding:10px; margin:30px; }
সিএসএস উদাহরণ এ px ব্যবহার করা হয়েছে এতে পিক্সেল বুঝায়
ID Attribute
উপরের সবগুলো উদাহরণ এ সিএসএস এর সাধারন নিয়ম ব্যবহার করা হয়েছে।
যদি কোন একটি নির্দিষ্ট স্টাইল নির্দিষ্ট কোন এইচটিএমএল এর উপাদানের ক্ষেত্রে প্রয়োগ করতে হয় তাহলে id attribute প্রথমে এইচটিএমএল এর মধ্যে যোগ করতে হবে
উদাহরণ
<p id="p01">I am different</p>
এরপর id কে সিএসএস এর মধ্যে কল করে স্টাইল যোগ করতে হবে
উদাহরণ
p#p01 { color:blue; }
Class attribute
কোন নির্দিষ্ট উপাদানের ধরন পরিবর্তন করার জন্য ক্লাস (class) attribute এইচটিএমএল এর উপাদানের মধ্যে যোগ করতে হয়
উদাহরণ
<p class="error">I am different</p>
একন আপনি নির্দিষ্ট ক্লাস এর সাথে সকল এলিমেন্ট এ ভিন্ন ভিন্ন স্টাইল দিতে পারবেন।
উদাহরণ
p.error { color:red; }
নোটঃ id ব্যবহার করা হয় একটি ইউনিক উপাদানের জন্য এবং class ব্যবহার করা হয় একটি এলিমেন্ট এর গ্রুপ এর জন্য।
সীমাবদ্ধতা
পুরাতন এইচটিএমএল ভার্সন এর অনেক ট্যাগস এবং attributes ব্যবহার করা হয় স্টাইল documents এ। কিন্রু এইগুলো এইচটিএমএল ৫ এ সাপোর্ট করে না।
যে উপাদান বা elements গুলো বাদ দিতে হবে ব্যবহার করা বাদ দিতে হবে: <font>, <center> এবং <strike>.
যে attribute গুলো বাদ দিতে হবে: color এবং bgcolor
একনজরে প্রপার্টি গুলো
Inline styling এ এইচটিএমএল এর স্টাইল attribute এর ব্যবহার
Internal css এ এইচটিএমএল এর <style> এলিমেন্ট এর ব্যবহার
External css এ এইচটিএমএল এর <link> উপাদানের ব্যবহার
সেকশন এ <style> এবং <link> elements যুক্ত করার জন্য এইচটিএমএল এর <head> এলিমেন্ট এর ব্যবহার
Text কালার করার জন্য এ সিএসএস এর কালার প্রপার্টি এর ব্যবহার
Text এর ফন্ট নির্দারণের জন্য সিএসএস এর font-family প্রপার্টি এর ব্যবহার
Text এর ফন্ট সািইজ নির্দারণের জন্য সিএসএস এর font-size প্রপার্টি এর ব্যবহার
উপাদানের বর্ডার দেখানোর জন্য সিএসএস এর border প্রপার্টি এর ব্যবহার
বর্ডার এর ভিতরে স্পেস নির্দারনের জন্য সিএসএস এর padding প্রপার্টি এর ব্যবহার
বর্ডার এর বাহিরের দিকের স্পেস নির্দারনের জন্য সিএসএস এর margin প্রপার্টি এর ব্যবহার
এইচটিএমএল স্টাইল ট্যাগ
<style> - একটি document মধ্যে সমস্ত স্টাইল এর তথ্যকে সঙ্গায়িত করে
<link> - document এবং external রিসোর্স ফাইল এর মধ্যে সম্পর্ক নির্দারণ করে
