ইন্টারনাল সিএসএস টিউটোরিয়াল (Internal CSS)
Cascading Style Sheets লেখার তিনটি ধরন আছে
যেমন - internal, external এবং inline। যখন
আপনারা ইন্টারনাল সিএসএস ব্যবহার করবেন
তখন অবশ্যই একটা নতুন ট্যাগ যোগ করতে হবে যেটা হচ্ছে <style>
tag এবং যা HTML <head> ট্যাগ এর ভিতরে
রাখতে হবে। নিচে উদাহরন দেয়া হলো।w3bay.com
<html>
<head>
<style>w3bay.com
</style>
</head>
<body>w3bay.com
<p>Your page's content!</p>
</body>
</html>w3bay.com
এমত অবস্থায় পেজে নতুন কিছু দেখাবে না। এই style ট্যাগ টি শুধু ব্রাউজার কে বলবে যে
তারা এই পেজে নতুন কিছু CSS element যোগ করতে যাচ্ছে ।
ইন্টারনাল সিএসএস কোড তৈরী:
HTML code এর মত করে CSS code লেখা হয় না, যার অর্থ এই দাড়ায় CSS যা HTML
এর মত নয়।
নিচে উদাহরন দেয়া হলো।
<html>w3bay.com
<head>
<style>
p {color: white; }
body {background-color: black; }
</style>
</head>w3bay.com
<body>
<p>White text on a black background!</p>
</body>
</html>w3bay.com
প্রদর্শন:
White text on a black background!
উপরের উদাহরনে আপনারা দেখেছেন CSS code এর মাধ্যমে <body> and
<p> HTML tags এর এলিমেন্ট পরিবর্তিত হয়ে গেছে।w3bay.com
সাধারন সিএসএস ফরমেট
"HTML tag" { "CSS Property" :
"Value" ; }w3bay.com
বিষয়টি পরিস্কার করতে
ধাপে ধাপে দেখা যাক কিভাবে সিএসএস কোড দিয়ে এইচটিএমএল এলিমেন্ট পরিবর্তিত
হয়ে গেছে।প্রথমে একটা এইচটিএমএল এলিমেন্ট
বাছাই করেছি যাকে নিয়ে আমরা কাজ করেছি
- p { : ;
}w3bay.com
তারপর CSS attribute
color নির্বাচন করেছি - p
{ color: ; }
পরে Value হিসাবে আমরা ফন্ট এর color
নির্বাচন করেছি - p
{ color: white; } এসব করার ফলে কি হয়েছে paragraph tag এর মধ্যে অবস্থিত সকল লেখা সাদা হয়ে গেছে ।এখন আমরা আলোচনা করবো সিএসএস
কোড কিভাবে <body> ট্যাগের background কে পরিবর্তন
করেছে। প্রথমে একটা HTML Body element
বাছাই করেছি - body { : ; } তারপর CSS
attribute, background-color নির্বাচন করেছি - body {
background-color: ; } CSS attribute background-color এর রং
নির্বাচন করেছি - body {
background-color: black; }w3bay.com
অনেক সময় দেখা যাবে যে সিএসএস স্টাইল প্রয়োগ করার পরও তা প্রদর্শন করছে না
তখন আমাদের যেসব বিষয় লক্ষ রাখতে তা হলো আমরা সিএসএস attribute এর পর কোলন এবং সিএসএস attribute
এর ভেলুর পর সেমিকোলন ঠিক মত দিয়েছে কিনা { CSS attribute :
value;}। w3bay.com
এক্সটার্নাল সিএসএস (External CSS)
সবচেয়ে ভাল হয় যদি আপনারা সিএসএস কে এইচটিএমএল হতে পৃথক রাখেন।এক্সটার্নাল সিএসএস
ফাইলটি শুধুমাত্র সিএসএস code ধারন করে এবং এই ফাইলটিকে ".css" ফাইল
extension দিয়ে
সেভ করা হয়। সিএসএস ফাইল টিকে <style> ট্যাগ
এর পরিবর্তে <link> ট্যাগ এর সাহায্যে লিংক করা হয় ।
ফাইল তৈরী:w3bay.com
প্রাথমিকভাবে আমরা
নোটপ্যাড দিয়ে নিচের সিএসএস কোড টি লিখবো।.
body{ background-color: gray;}
p { color: blue; }w3bay.com
h3{ color: white; }
তারপর সিএসএস ফাইলটিকে
(.css) ফাইল extension দিয়ে সেভ করবো। ফাইলটির নাম হবে test.css ।
তবে test ছাড়াও
আমরা অন্য নাম দিতে পারি তবে ফাইল extension(.css) টি
ঠিক রাখতে হবে ।
এরপর নতুন
এইচটিএমএল ফাইল তৈরী করে সিএসএস ফাইলটির সাথে লিংক করবো।
<html>w3bay.com
<head>
<link rel="stylesheet"
type="text/css" href="css/test.css" />
</head>w3bay.com
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
</body>w3bay.com
</html>
3 নম্বর লাইনে test.css এর
আগে যে css/ চিহ্নটা আছে ,
তারপর এইচটিএমএল ফাইল টিকে index.html হিসাবে একই ফোল্ডারে
অর্থাৎ যেখানে সিএসএস ফাইল আছে
সেখানে সেভ করবো। এবার আপনার এইচটিএমএল ফাইল টিকে ব্রাউজারে এ খুলুন করুন এবং
পরিবর্তন লক্ষ্য করুন।
প্রদর্শন:w3bay.com
A White Header
This paragraph has a blue font. The background color of
this page is gray because we changed it with সিএসএস!w3bay.com
কেন আমরা এক্সটার্নাল সিএসএস ব্যবহার করবো?
আপনার ওয়েবসাইট
ডিজাইন কে সংরক্ষন এবং content কে পৃথক রাখতে ব্যবহ্নত হয়।
আলাদা ফাইল হিসাবে রাখলে খুব সহজেই সিএসএস কোড কে পুনরায় ব্যবহার করা যায়।
বারবার একই সিএসএস কোড প্রত্যেক ওয়েব পেজ এ লেখার পরিবর্তে শুধুমাত্র "link" ট্যাগ
এর সাহায্যে একটা সিএসএস ফাইল কে প্রত্যেক ওয়েব পেজ এ যুক্ত করা যায়।
w3bay.com
w3bay.com
ইনলাইন সিএসএস টিউটোরিয়াল(Inline CSS)
ইনলাইন সিএসএস হচ্ছে সিএসএস style কে এইচটিএমএল কোড এর ভিতরে ব্যবহার করার নিয়ম।
এক্সটার্নাল বা ইন্টারনাল সিএসএস হতে ইনলাইন সিএসএস এর
প্রাধান্য বেশি। এর অর্থ হচ্ছে একসটার্নাল বা ইন্টারনাল সিএসএস দ্বারা স্টাইল
নির্দেশিত থাকলেও আপনি স্টাইল override করতে
পারেন। যাহোক, ইনলাইন সিএসএস যা সিএসএস এর সঠিক উদ্দেশ্য হতে বিচ্যুতি
ঘটায় তাই এটা আংশিকভাবে ব্যবহার করা উচিত।w3bay.com
সিএসএস Inline - HTML
Attribute:
বিশ্বাস করেন বা না করেন প্রত্যেক এইচটিএমএল ট্যাগ এর মধ্যে
সিএসএস কে তৈরী করা যায়। যদি আপনি সব এইচটিএমএল এলিমেন্ট এর স্টাইল করতে চান তাহলে
style নামক HTML
attribute এর মধ্যে
প্রত্যাশিত সিএসএস property গুলো
লিখুন।w3bay.com
<p style="background: blue; color:
white;">A new background and font color with inline CSS</p>
যে কোন HTML element সম্বলিত inline CSS সেটিং এর একটি
সাধারন ফরমেট দেয়া হলো:
Pseudo Code:w3bay.com
<html tag style="css property1: value; css
property2: value;"> </html tag>
প্রত্যেক
সিএসএস statement
অবশ্যই semicolon ";" দ্বারা
পৃথক থাকবে এবং সিএসএস property
ও তার value
":"colons দ্বারা
পৃথক থাকবে।w3bay.com
0 comments:
Post a Comment