এইচটিএমএল সিএসএস - HTML CSS



এইচটিএমএল এলিমেনটের স্টাইলিং এর জন্য সিএসএস ব্যবহার করা যায়। CSS এর পূর্ণরূপ হল Cascading Style Sheets.


সিএসএস দিয়ে এইচটিএমএল স্টাইলিং

সিএসএসের উদ্ভব হয়েছে এইচটিএমএল এলিমেনট স্টাইলিং এর জন্য। ৩ ভাবে এইচটিএমএল ডকুমেন্টে সিএসএস ব্যবহার করা যায়। যথা -

External অর্থাৎ আলাদা স্টাইল শীট ব্যবহার করে ( সিএসএস ফাইল ),
Internal অর্থাৎ এইচটিএমএলের হেড সেকশনে স্টাইল এলিমেনট ব্যবহার করে এবং
Inline অর্থাৎ প্রতিটি এইচটিএমএল এলিমেনটের সাথে স্টাইল এট্রিবিউট ব্যবহার করে।

এইচটিএমএল এলিমেন্টে সিএসএস ব্যবহার করার সবচেয়ে সহজ এবং উত্তম পদ্ধতি হলো বহিঃস্থ বা external সিএসএস ফাইল ব্যবহার করা। কিন্তু আমাদের এই টিউটোরিয়ালের মধ্যে বেশীরভাগ ক্ষেত্রেই আমরা ইনলাইন এবং ইন্টার্নাল স্টাইল ব্যবহার করেছি। কারণ এগুলো আপনাকে আমাদের উদাহরণগুলো অনুশীলন করেতে এবং বুঝতে সহায়তা করবে।

নোট - সিএসএস সম্পর্কে আরও জানতে আমাদের সিএসএস টিউটোরিয়াল ভিজিট করুন।


Inline স্টাইল

কোন একটি নির্দিষ্ট এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য Inline স্টাইল ব্যবহার করা হয়। কোন একটি এলিমেন্টকে Inline স্টাইল করার জন্য style এট্রিবিউট ব্যবহার করা হয়। নিচের উদাহরণটি রান করলে <p> এলিমেন্টের টেক্সটের রঙ সবুজ দেখা যাবে।

উদাহরণ

<h1 style="color:green;">This is a Green Heading</h1>



Internal স্টাইল

Internal স্টাইল করার জন্য ডকুমেন্টের <head> সেকশনের মধ্যে <style> ট্যাগ ব্যবহার করা হয় এবং স্টাইল কোডগুলো এই <style> ট্যাগের মধ্যে লিখতে হয়। নিচে একটি উদাহরণ দেখুন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: GhostWhite;}
h1 {color: teal;}
p {color: blue;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>




External স্টাইল

এক সাথে অনেকগুলো পেজ অর্থাৎ সম্পূর্ণ ওয়েবসাইটকে স্টাইল করার জন্য External সিএসএস ব্যবহার করা হয়।
একটি External সিএসএস ফাইল তৈরি করে তার মধ্যে প্রয়োজনীয় স্টাইল কোড অন্তর্ভুক্ত করা হয়। তারপর ফাইলটিকে ডকুমেন্টের <head> এলিমেন্টের মধ্যে <link> ট্যাগের মাধ্যমে লিংক করে দেওয়া হয়। এতে করে খুব সহজেই একই স্টাইল শীট ওয়েবসাইটের সবকটি পেজে অন্তর্ভুক্ত করে সমগ্র ওয়েবসাইটের স্টাইল করা যায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading
<p>This is a paragraph.



</body>
</html>




id এট্রিবিউট

কোনো নির্দিষ্ট এলিমেন্টকে বিশেষভাবে স্টাইল করার জন্য এলিমিন্টের মধ্যে id এট্রিবিউট যুক্ত করা হয়।

<p id="p01">I am different</p>



তারপরে ঐ id এট্রিবিউট যুক্ত এলিমেন্টকে স্টাইল করার জন্য id কে কল/সিলেক্ট করে স্টাইল নির্ধারণ করা হয়।

উদাহরণ

#p01 {
color: blue;
}


নোট - এইচটিএমএল এলিমেন্টের আইডি সর্বদাই ইউনিক হতে হয়।


class এট্রিবিউট

অনেকগুলো এলিমেন্টকে একত্রে একই ধরনের স্টাইল করার জন্য class এট্রিবিউট যুক্ত করা হয়।

<p class="error">I am different</p>



তারপরে ঐ class এট্রিবিউট যুক্ত এলিমেন্টগুলোকে স্টাইল করার জন্য class কে কল/সিলেক্ট করে স্টাইল নির্ধারণ করা হয়।

p.error {
color: red;
}




বহিঃস্থ css ফাইল

বহিঃস্থ কোন স্টাইল শীটের লিংক বর্তমান এইচটিএমএল ডকুমেন্টে উল্লেখ করে ব্যবহার করা যায়। নিচে এর একটি উদাহরণ দেখুন।

<link rel="stylesheet" href="https://www.websschool.com/style/style.css">


নোট - এ সম্পর্কে আরও বিস্তারিত জানতে আমাদের এইচটিএমএল ফাইল পাথ পেজটি ব্রাউজ করুন।


ডেপ্রিকেটেড ট্যাগ এবং এট্রিবিউট

এইচটিএমএল ৪.০১ এ কতগুলো ট্যাগ এবং এট্রিবিউট ডেপ্রিকেট বা বাতিল করা হয়েছে। ডেপ্রিকেট বলতে বোঝায় যে এইচটিএমএলের পরবর্তী ভার্সনগুলোয় এই ট্যাগ এবং এট্রিবিউট ব্যবহার করা হবে না।
যে সকল ট্যাগ এবং এট্রিবিউট ডেপ্রিকেট বা বাতিল করা হয়েছে সেগুলো হল -

ট্যাগ বর্ণনা
<center> Deprecated.কোন কন্টেন্টের অবস্থান মাঝখানে নির্ধারণ করে।
<font> এবং <basefont> Deprecated.এইচটিএমএল এ টেক্সট এর font নির্ধারণ করে।
<s> এবং <strike> Deprecated. টেক্সটের জন্য strikethrough স্টাইল নির্ধারণ করে।
<u> Deprecated.টেক্সটের জন্য underline স্টাইল নির্ধারণ করে।

এট্রিবিউট বর্ণনা
align Deprecated.টেক্সটের অবস্থান বা alignment নির্ধারণ করে।
bgcolor Deprecated.এই এট্রিবিউটের দ্বারা background এর রং নির্ধারণ করা হয়।
color Deprecated.লেখা বা টেক্সটের রং নির্ধারণ করে।

নোট - এই সকল ট্যাগ এবং এট্রিবিউটগুলো ব্যবহার করা উচিৎ নয়, এর পরিবর্তে সিএসএস ব্যবহার করা ভাল।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.