ওয়েব ডিজাইন টিউটোরিয়াল [পর্ব-১২] :: স্টাইলশীট ব্যবহার করার পদ্ধতি

Awesome! টিউনস

সকল Awesome! টিউনস

এ মাসের টেকটিউনস সংবাদঃ ডিসেম্বর-২০০৯

রনি পারভেজ

এক সাথে যত খুশি ততো ই-মেইল চেক করুন ডেস্কটপ থেকে! প্রয়োজনীয় না হলে মূল্য ফেরত

হাসান যোবায়ের

হয়ে উঠুন পেনড্রাইভ ভাইরাস/ম্যালওয়্যার কিলার

এস বি মেহদি

ওয়েবসাইট তৈরী এবং হোস্টিং এর কয়েকটি ফ্রি অনলাইন টুল

দুঃসাহসী টিনটিন

1,306 দেখা 3 টিউমেন্টস জোসস

টিউন বিভাগ ওয়েব ডিজাইন

প্রকাশিত

Level 0

জিহাদুর রহমান

51 টিউনস 194 টিউমেন্টস 0 ফলোয়ার

টিউমেন্ট ফলো জোসস

আসসালামু আলাইকুম, কেমন আছেন সবাই? আশা করি মহান আল্লাহ্‌ তা'আলার অশেষ কৃপায় ভাল আছেন? আমি আলহামদুলিল্লাহ্‌ ভাল আছি ।

আজ আমি স্টাইলশীট ব্যবহার করার পদ্ধতি নিয়ে আলোচনা করবো । সিএসএস এর স্টাইলশীট এইচটিএমএল এ ব্যবহার করার জন্য তিনটি পদ্ধতি রয়েছে । এ তিনটি পদ্ধতি হচ্ছেঃ

ইন্টারনাল স্টাইলশীট
এক্সটারনাল স্টাইলশীট
ইনলাইন স্টাইলশীট

এসব পদ্ধতিতে মূলত এইচটিএমএল ডকুমেন্ট এর সাথে সিএসএস এর মাধ্যমে তৈরিকৃত স্টাইলশীট জুড়ে দেওয়া হয় । এখন আমরা এসব পদ্ধতি নিয়ে বিস্তারিত আলোচনা করবো;

ইন্টারনাল স্টাইলশীট

এইচটিএমএল এ যখন (<head>…</head>) এর ভিতরে (<style>…</style>) ট্যাগ এর মাধ্যমে সিএসএস স্টাইল ব্যবহার করা হয় সেটা হচ্ছে ইন্টারনাল স্টাইলশীট । এই পদ্ধতিতে এইচটিএমএল & সিএসএস কোডসমূহ একই সাথে থাকে । অর্থাৎ, সিএসএস এর জন্য আলাদা কোন ফাইল ব্যবহার করা হয় না । আরও ভালোভাবে বুঝতে নিচের কোডটুকু লক্ষ্য করুনঃ


<html>
<head>
<title> This is Example of Internal Stylesheet </title>
<style>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p> CSS Stands for Cascading Style Sheets </p>
</body>
</html>

উপরের কোডটুকু একটি নোটপ্যাড এ লিখে Internal.html লিখে সেভ করে যেকোনো একটি ব্রাউজারে ফাইলটি প্রদর্শন করুন ।

এক্সটারনাল স্টাইলশীট

এক্সটারনাল স্টাইলশীট পদ্ধতিতে এইচটিএমএল & সিএসএস কোডসমূহ আলাদা থাকে । এই পদ্ধতিতে সিএসএস ফাইল আলাদা তৈরি করা হয় । অতঃপর (<head>…</head>) এর ভিতরে (<link/>) ট্যাগ এর মাধ্যমে এইচটিএমএল এ সিএসএস স্টাইলশীট জুড়ে দেওয়া হয় । আরও ভালোভাবে বুঝতে নিচের কোডটুকু লক্ষ্য করুনঃ

প্রথমে আমাদের একটা সিএসএস ফাইল তৈরি করতে হবে । এজন্য নিচের কোডটুকু লিখে slyle.css নামে সেভ করুন;


body{ background-color: black;}
p { color: red; }

এবার আমরা সিএসএস এর মাধ্যমে যে স্টাইলশীট তৈরি করলাম তা এইচটিএমএল ফাইলের সাথে যুক্ত করবো । এজন্য আমাদের একটি এইচটিএমএল ফাইল তৈরি করতে হবে । এজন্য নিচের কোডটুকু লিখে index.html নামে সেভ করুন;


<html>
<head>
<title> This is Example of External Stylesheet </title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p> CSS Stands for Cascading Style Sheets </p>
</body>
</html>

এবার সেভ করা এইচটিএমএল ফাইলটি যেকোনো একটি ব্রাউজারে ফাইলটি প্রদর্শন করুন ।

*ওয়েবসাইট প্রস্তুত করার জন্য এক্সটারনাল স্টাইলশীট ব্যবহার করাই শ্রেয় । এতে, সাইটের ডিজাইন নিয়ন্ত্রন করতে সুবিধা হয় ।

ইনলাইন স্টাইলশীট

ইনলাইন স্টাইলশীট পদ্ধতিতে এইচটিএমএল ট্যাগের সাথে (<style>….</style>) অ্যাট্রিবিউটের মাধ্যমে ডিজাইন নির্ধারণ করা হয় । এই পদ্ধতিতে এইচটিএমএল এর প্রতিটি ট্যাগের সাথে স্টাইল নির্ধারণ করা হয় । ইনলাইন স্টাইলশীট এর ক্ষেত্রে দ্বিতীয় বন্ধনী এর পরিবর্তে উদ্ধতি চিহ্ন (“”) ব্যবহার করা হয় ।

আরও ভালোভাবে বুঝতে নিচের কোডগুলো লক্ষ্য করুনঃ


<html>
<head>
<title> This is Example of Internal Stylesheet </title>
</head>
<body>
<p style="background: black; color: red;"> CSS Stands for Cascading Style Sheets </p>
</body>
</html>

*অন্যান্য স্টাইলশীট অপেক্ষা ইনলাইন স্টাইলশীট বেশি শক্তিশালী । এইচটিএমএল এ অন্যান্য পদ্ধতিতে স্টাইলশীট (ইন্টারনাল, এক্সটারনাল) প্রয়োগ করা থাকলেও সেখানে ইনলাইন স্টাইলশীট ব্যবহার করলে ইনলাইন স্টাইলশীট-ই প্রয়োগ হবে । অর্থাৎ, ইনলাইন স্টাইলশীট অন্যান্য স্টাইলশীটকে অভাররাইট (Override) করতে পারে । তবে, এটা বেশি ব্যবহার করা উচিত নয় । বিশেষক্ষেত্রে, এ স্টাইলশীট ব্যবহার করা যেতে পারে ।

আশা করি বুঝতে পেরেছেন । বুঝতে না পারলে কমেন্ট এর মাধ্যমে জানাবেন । আমি সমাধান দেওয়ার চেষ্টা করবো । পরবর্তী টিউটোরিয়াল খুব শীঘ্রই পাবেন - ইনশাল্লাহ্‌ ।

ভাল থাকবেন সবাই । আল্লাহ্‌ হাফেজ ।

আমার সাথে ফেইসবুক এ যোগাযোগ করতে এখানে ক্লিক করুন ।

টিউমেন্ট ফলো জোসস

Level 0

জিহাদুর রহমান

আমি জিহাদুর রহমান। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 194 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।