সিএসএস (CSS) ক্লাশ - ৪
আসসালামু আলাইকুম। সবাই কেমন আছেন?
আজকে আমরা শিখব Inline CSS । Internal ও External CSS এর থেকে Inline CSS এর ব্যাবহার একটু ভিন্ন কারন Inline CSS হচ্ছে CSS style কে HTML কোড এর ভিতরে ব্যবহার করার নিয়ম।
Internal ও External CSS হতে Inline CSS এর প্রাধান্য বেশি। এর কারন হচ্ছে Internal ও External CSS দ্বারা স্টাইল নির্দেশিত হলেও আপনি স্টাইল Override করতে পারেন Inline CSS এর মাধ্যমে।
কি আবাক লাগছে? জেনে আনন্দিত হবেন যে, প্রত্যেকটি HTML ট্যাগের মধ্যে CSS এর <style> ট্যাগ দিয়ে CSS কোডিং করা যায়। আর এটাই হল Inline CSS। আর এ জন্য CSS এর অন্যান্য স্টাইল থেকে Inline CSS এর ব্যবহারটা একটু ভিন্ন আর এর ব্যবহার ও বেশি।
এবার আমরা Inline CSS এর কোডিং স্টাইল দেখব।
<html>
<head>
<title> Inline CSS</title>
</head>
<body >
<h1>ThiZ iZ Inline CSS Heading</h1>
<p style="color:blue; font-family:Arial; text-align:justify;">
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph. </p>
</body>
</html>
এখানে আমরা দেখতে পাচ্ছি যে HTML এর <p> ট্যাগের মধ্যে CSS এর style ট্যাগ দিয়ে কোডিং করা হয়েছে।
তবে আমরা চাইলে এভাবেও করতে পারব !
<html>
<head>
<style>
body{background-color:black;}
h1{color:white;text-align:center;}
</style>
</head>
<body >
<h1>ThiZ iZ Inline CSS Heading</h1>
<p style="color:blue; font-family:Arial; text-align:justify;">
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph. </p>
</body>
</html>
এখন আমরা কি দেখছি? HTML এর <head> ট্যাগের মধ্যে CSS এর <style> ট্যাগ দিয়ে স্টাইল করেছি ও HTML এর <p> ট্যাগের মধ্যে CSS এর style ট্যাগ দিয়ে স্টাইল করেছি।
কি মজা না। সত্যি অনেক মজা আর এজন্যই Inline CSS এর প্রাধান্য বেশি।
কোড গুলো Notepad এ সেভ করে Browser এ প্রদর্শন করে দেখুন আরও মজা পাবেন।
আজকে আমরা শিখব Inline CSS । Internal ও External CSS এর থেকে Inline CSS এর ব্যাবহার একটু ভিন্ন কারন Inline CSS হচ্ছে CSS style কে HTML কোড এর ভিতরে ব্যবহার করার নিয়ম।
Internal ও External CSS হতে Inline CSS এর প্রাধান্য বেশি। এর কারন হচ্ছে Internal ও External CSS দ্বারা স্টাইল নির্দেশিত হলেও আপনি স্টাইল Override করতে পারেন Inline CSS এর মাধ্যমে।
কি আবাক লাগছে? জেনে আনন্দিত হবেন যে, প্রত্যেকটি HTML ট্যাগের মধ্যে CSS এর <style> ট্যাগ দিয়ে CSS কোডিং করা যায়। আর এটাই হল Inline CSS। আর এ জন্য CSS এর অন্যান্য স্টাইল থেকে Inline CSS এর ব্যবহারটা একটু ভিন্ন আর এর ব্যবহার ও বেশি।
এবার আমরা Inline CSS এর কোডিং স্টাইল দেখব।
<html>
<head>
<title> Inline CSS</title>
</head>
<body >
<h1>ThiZ iZ Inline CSS Heading</h1>
<p style="color:blue; font-family:Arial; text-align:justify;">
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph. </p>
</body>
</html>
এখানে আমরা দেখতে পাচ্ছি যে HTML এর <p> ট্যাগের মধ্যে CSS এর style ট্যাগ দিয়ে কোডিং করা হয়েছে।
তবে আমরা চাইলে এভাবেও করতে পারব !
<html>
<head>
<style>
body{background-color:black;}
h1{color:white;text-align:center;}
</style>
</head>
<body >
<h1>ThiZ iZ Inline CSS Heading</h1>
<p style="color:blue; font-family:Arial; text-align:justify;">
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph. </p>
</body>
</html>
এখন আমরা কি দেখছি? HTML এর <head> ট্যাগের মধ্যে CSS এর <style> ট্যাগ দিয়ে স্টাইল করেছি ও HTML এর <p> ট্যাগের মধ্যে CSS এর style ট্যাগ দিয়ে স্টাইল করেছি।
কি মজা না। সত্যি অনেক মজা আর এজন্যই Inline CSS এর প্রাধান্য বেশি।
কোড গুলো Notepad এ সেভ করে Browser এ প্রদর্শন করে দেখুন আরও মজা পাবেন।
No comments:
Post a Comment
Thanks for ur comments