CSS এর পুর্ণ রুপ Cascading Style Sheets.
এটি ওয়েব পেজ গুলোর সৌন্দর্য বৃদ্ধি এবং ওয়েব কনটেন্ট গুলো সাজানোর জন্য ব্যবহার হয় ।
সিএসএস অনেক কাজ সাশ্রয় করে। এটি একসাথে একাধিক ওয়েব পৃষ্ঠাগুলির বিন্যাস নিয়ন্ত্রণ করতে পারে।
সিএসএস কি?
ক্যাসকেডিং স্টাইল শীট (সিএসএস) একটি ওয়েবপৃষ্ঠার বিন্যাসটি বিন্যাস করতে ব্যবহৃত হয়।
সিএসএসের সাহায্যে আপনি রঙ, ফন্ট, টেক্সেট আকার, কনটেন্ট গুলোর মধ্যে ব্যবধান ঠিক করে দিতে পারবেন। কনটেন্ট কীভাবে অবস্থিত এবং স্থাপন করা হয়, কোন পটভূমি চিত্র বা পটভূমির রঙ ব্যবহার করতে হবে, বিভিন্ন ডিভাইস এবং স্ক্রিন আকারের জন্য বিভিন্ন প্রদর্শন সহ আরো অনেক বেশি কিছু করা হয় সিএসএসের সাহায্যে ।
ক্যাসকেডিং (cascading) বলতে বোঝায় HTML এর কোন প্যারেন্ট এলিমেন্ট কে স্টাইল করলে সেটার সাথে সাথে তার চিলড্রেন এলিমেন্ট গুলোও সেই স্টাইল পেয়ে যাবে । তাই, আপনি যদি body তে blue কালার যোগ করেন, তবে এর ভেতরে হেডিং ট্যাগ , প্যারাগ্রাফ এবং অন্যান্য টেক্সট এলিমেন্ট গুলো সেই কালার পেয়ে যাবে যতক্ষন না আপনি নতুন করে কোন এলিমেন্টের জন্য নতুন কালার সেট করেন ।
সিএসএস এর ব্যবহার
সিএসএস তিনটি উপায়ে এইচটিএমএল ডকুমেন্ট এ যুক্ত করা যেতে পারে:
- Inline – HTML elements এর মধ্যে style attribute ব্যবহার করে
- Internal – <head> সেকসন এর মধ্যে <style> element ব্যবহার করে
- External – <link> element এর মাধ্যমে বাইরের CSS file ওয়েব পেজে যোগ করে
সিএসএস যুক্ত করার সর্বাধিক উত্তম উপায় হ’ল বাইরের সিএসএস ফাইলগুলিতে সিএসএস লিখে সেই ফাইল কে <link> এলিমেন্ট এর মাধ্যমে ওয়েব পেজে যুক্ত করা ।
যাইহোক, এই টিউটোরিয়ালে আমরা ইনলাইন এবং অভ্যন্তরীণ (internal) পদ্ধতি ব্যবহার করব, কারণ শুরুতে এটি দেখানো আরও সহজ এবং আপনার নিজের পক্ষেও এটি সহজ।
Inline CSS
একটি ইনলাইন সিএসএস একটি একক এইচটিএমএল এলিমেন্ট এ যুক্ত হয়ে স্টাইল প্রয়োগ করতে ব্যবহৃত হয়।
ইনলাইন সিএসএস একটি এইচটিএমএল এলিমেন্টে style attribue ব্যবহার করে যুক্ত হয় ।
নিম্নলিখিত উদাহরণটি <h1> উপাদানটির লেখার রঙকে সবুজ রং এ এবং <p> উপাদানটির পাঠ্যের লেখার লাল রঙে সেট করে:
<h1 style="color:green;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
Internal CSS
একটি অভ্যন্তরীণ সিএসএস একটি একক এইচটিএমএল পেজের জন্য স্টাইল প্রয়োগ করতে ব্যবহৃত হয়।
একটি internal CSS এইচটিএমএল পেজের <head> section যুক্ত হয় এবং <style> element এর মধ্যে স্টাইল গুলো লেখা হয়।
নিম্নলিখিত উদাহরণটি সব <h1> element (ওয়েব পেজের মধ্যে) এর নীল রং এবং সব <p> element এর লেখার রং লাল করবে । পাশাপাশি এটি ওয়েব পেজের বডিং পটভুমির রঙ powderblue করবে
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph to check Internal CSS activity.</p>
</body>
</html>
External CSS
বহিরাগত বা এক্সাটার্নাল স্টাইল শিটটি একসাথে সবগুলো HTML পেজের স্টাইল দিতে ব্যবহৃত হয়।
এক্সার্নাল স্টাইল শীটটি ব্যবহার করতে, প্রতিটি HTML পৃষ্ঠার <head> বিভাগে একটি লিঙ্ক ট্যাগের মাধ্যমে যুক্ত করা হয় :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>এই পেজটিতে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে </h1> <p>head সেকসন এর মধ্যে link tag এর মাধ্যমে এক্সটার্নাল স্টাইল ফাইল যোগ হয়েছে .</p> </body> </html>
External Style Sheet টি যে কোন কোড এডিটর এ লেখা যায় এবং সেটিকে html file এর মতোই সেভ করে নিতে হয় । আর উপরের কোড অনুসারে html ফাইল টি যে ফোল্ডার এ সেভ করেছেন, সেই ফোল্ডার এই style sheet টি ও সেভ করতে হবে ।
এবং আমরা এর ফাইল নাম দেবো style.css
style.css ফাইলটি দেখতে নিচের মতো হবে
body {
background-color: powderblue;
}
h1 {
color: green;
}
p {
color: red;
}একটি এক্সটার্নাল স্টাইল শীট এর কোন অংশ বদল করলে বা নতুন কোন রুল লিখলে সেটা পুরো ওয়েব সাইটের স্টাইল করতে পারে ।
CSS Colors, Fonts and Sizes
এখানে, আমরা কিছু বহুল ব্যবহৃত সিএসএস প্রপাটি দেখাবো। আপনি এগুলি সম্পর্কে পরে আরও শিখবেন।
সিএসএস color property লেখার রঙকে সংজ্ঞায়িত করে।
CSS font-family property লেখার ফন্ট সংজ্ঞায়িত করে ।
CSS font-size property লেখার আকার কতটা ছোট বা বড় হবে তা সংজ্ঞায়িত করে ।
CSS color, font-family এবং font-size properties গুলোর ব্যবহার :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 170%;
}
</style>
</head>
<body>
<h1> kivabe codes</h1>
<p>Learning HTML CSS.</p>
</body>
</html>
CSS Border
সিএসএস বর্ডার একটি এইচটিএমএল উপাদানের চারপাশে একটি সীমানা নির্ধারণ করে।
আপনি মোটামুটি সব ধরনের এইচটিএমএল এলিমেন্টের বর্ডার নির্ধারণ করতে পারেন ।
CSS border property ব্যবহার
<h2 style="border:2px solid green">এইচটিএমএল বর্ডার কালার</h2>
CSS Padding
CSS Padding টেক্সট এবং সীমান্তের মধ্যে একটি প্যাডিং (স্পেস বা ফাকা জায়গা ) সংজ্ঞায়িত করে
CSS border এবং padding এর ব্যবহার
p {
border: 2px solid powderblue;
padding: 30px;
}
CSS Margin
CSS margin property এইচটিএমএল এর এক এলিমেন্ট থেকে আর একটি এলিমেন্ট এর মধ্যে দুরত্ব তৈরি করে । এবং এটি বর্ডার এর বাইরে কাজ করে ।
CSS border, padding এবং margin properties এর উদাহরণ
p {
border: 2px solid powderblue;
padding: 20px;
margin: 50px;
}Inline ও internal CSS গুলো HTML Page এর মধ্যেই থাকে । আর সেগুলো সম্পর্কে মোটামুটি ধারনা পেলাম । এবার দেখে নেয়া যাক External CSS নিয়ে ।
External CSS লিংক করা
বাহ্যিক স্টাইল শিটগুলি পুরো URL সহ বা বর্তমান ওয়েব পেজের সাথে সম্পর্কিত কোনও পাথের সাথে উল্লেখ করা যেতে পারে।
পুরো URL ব্যবহার করে স্টাইল শিটের সাথে লিঙ্ক করার একটি উদাহরণ :
<head> <link rel="stylesheet" href="https://kivabe.com/codes/style.css"> </head>
বর্তমনা ওয়েবসাইট এর codes ফোল্ডার থেকে স্টাইল শিট লিঙ্ক করার একটি উদাহরণ :
<head> <link rel="stylesheet" href="/codes/style.css"> </head>
বর্তমান HTML Page টি যে ফোল্ডার এ আছে সেই ফোল্ডার থেকে স্টাইল শিট লিঙ্ক করার একটি উদাহরণ :
<head> <link rel="stylesheet" href="style.css"> </head>
যা যা শিখলাম
- HTML style attribute ব্যবহার করে inline CSS লেখা
- HTML <style> element ব্যবহার করে internal CSS লেখা
- HTML <link> element ব্যবহার করে external CSS file যুক্ত করা
- HTML <head> element এ <style> এবং <link> এলিমেন্ট এর ব্যবহার
- CSS color property ব্যবহার করে text এর রং বাদল করা
- CSS font-family property ব্যবহার করে text এর ফন্ট বদল করা
- CSS font-size property ব্যবহার করে text এর সাইজ বদল করা
- CSS border property ব্যবহার করে HTML এলিমেন্ট এ বর্ডার দেয়া
- CSS padding property ব্যবহার করে বর্ডার ও লেখার মধ্যে ফাকা জায়গা তৈরি করা
- CSS margin property ব্যবহার করে বর্ডার এর বাইরে জায়গা দেয়া