আজকে আমরা ৪র্থ পর্ব শুরু করতে যাচ্ছি আজকে আমরা এক্সটার্নাল সিএসএস নিয়ে আলোচনা করবো
ইন্টারনাল বা ইনলাইন সিএসএস খুব প্রয়োজন ছাড়া লেখা হয়না, লেখা উচিৎ ও নয়। কারন এতে এইচটিএমএল ফাইল দেখতে নোংড়া লাগে এবং অনেক বড় হয়ে যায়। তাই সব সিএসএস রুলকে একসাথে করে একটা ফাইলে রেখে সেটা .css এক্সটেনশন নাম দিয়ে (যেমন style.css) সেভ করে HTML ফাইলে সংযুক্ত করে দিলেই হয়ে যায়। এটার নামই হচ্ছে এক্সটার্নাল সিএসএস।
এইচটিএমএল এ link নামে একটা ট্যাগ আছে এটা দিয়েই সংযোগ দেয়া যায়।
একটা উদাহরন
01.<!DOCTYPE html>02.<html>03.<head>04.<link href="/style.css" rel="stylesheet" type="text/css"/>05.</head>06.<body>07. 08.<h1>This is heading</h1>09. 10.<p>This is Paragraph.</p>11. 12.</body>13.</html>
এখানে দেখুন ইন্টারনাল সিএসএস এর জায়গায় link ট্যাগ দিয়ে কিভাবে style.css ফাইলটি যোগ করেছি। href হচ্ছে এট্রিবিউট, এখানে ফাইলটির উৎস বা কোথায় আছে সেটা দেখিয়ে দিতে হয়। rel এট্রিবিউটট দিয়ে এইচটিএমএল ডকুমেন্ট টি এবং সিএসএস ফাইল এর মধ্যে সম্পর্ক টা কি (stylesheet) সেটা ব্রাউজারকে বুঝানো হয়, এটা দিতে হবে।
আর type এট্রিবিউট এর মান text/css দিয়ে বুঝানো হচ্ছে এটা একটা CSS ফাইল। এবার এই ফাইলটি index.html নামে সেভ করুন। style.css এর কোড
1.h1{2.color: #f00;3.background: yellow;4.text-align: center;5.}
উপরের কোডটুকু লিখে ফাইলটি style.css নামে সেভ করুন এরপর index.html রান করিয়ে দেখুন সব সিএসএস গুলি সেখানে প্রভাব ফেলেছে।
প্রফেশনালি সবাই এক্সটার্নাল সিএসএস ই ব্যবহার করে কেননা একটা এইচটিএমএল ফাইলের জন্য হাজার হাজার লাইন পর্যন্ত সিএসএস রুল লিখতে হয়। ফলে এইচটিএমএল এবং সিএসএস ফাইল আলাদা করাটা জরুরি হয়ে পরে এবং পরবর্তীতে কোড মেইনটিনেন্স এর কাজ অত্যন্ত সহজ হয়ে যায়।
** আমরা বেশিরভাগ সিএসএস টিউটোরিয়ালে ইন্টারনাল সিএসএস ব্যবহার করে উদাহরন দেব কারন এতে আমাদের দেখাতে সুবিধা হবে।
তবে আপনারা প্রফেশনালি কিংবা বাস্তবে এক্সটার্নাল সিএসএস ব্যবহার করে কাজ করবেন।
আজকের মত এখানেই শেষ করছি পরবর্তী টিউটোরিয়াল পর্যন্ত আমাদের সাথেই থাকুন ।
0 comments:
Post a Comment