সিএসএস টিউটোরিয়াল -CSS tuotorial
সিএসএস টিউটোরিয়াল
সিএসএস একটি প্রোগ্রামিং ভাষা যা এইচটিএমএল ডকুমেন্টকে সুদর্শনীয় করে তোলার জন্য ব্যবহৃত হয়।
একটি এইচটিএমএল এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা সিএসএসের মাধ্যমে নির্ধারণ করে দেওয়া হয়।
আমাদের এই চিএসএস টিউটোরিয়ালটি আপনাকে সিএসএস এর প্রাথমিক থেকে এডভান্স পর্যন্ত শিখতে সাহায্য করবে।
আমাদের প্রতিটি পরিচ্ছেদে রয়েছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copyকরার একটি অপশন দেখতে পাবেন। copyঅপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।
আপনি আপনার এডিটর ওপেন করে copyকরা কোড pasteকরতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।
উদাহরণ
<
!DOCTYPE html>
<
html>
<
head>
<
title>
সিএসএস উদাহরণ</title>
<
style>
body {
background-color: lightskyblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: Siyam Rupali;
font-size: 20px;
}
</style>
</head>
<
body>
<
h1>
এটি সিএসএস এর প্রথম উদাহরণ</h1>
<
p>
আমাদের সিএসএস টিউটোরিয়ালে অসংখ্য উদাহরণ রয়েছে।</p>
</body>
</html>
ফলাফল
সিএসএস কি?
- CSS এর পূর্ণরূপ হলো Cascading Style Sheets
- স্ক্রিন, পেপার বা অন্যান্য মিডিয়ায় এইচটিএমএল এলিমেন্টকে আকর্ষনীয়ভাবে উপস্থাপন করার জন্য সিএসএস ব্যবহার করা হয়
- এইচটিএমএলে এক্সটার্নাল সিএসএস ব্যবহার করলে অনেক সময় সাশ্রয় হয়। কেননা, ইহা একই সঙ্গে একাধিক ওয়েব পেজের লেআউট(layout) নিয়ন্ত্রন করতে পারে
- বাহ্যিকভাবে স্টাইল শীট ব্যবহারের জন্য সিএসএস ফাইলের নামের শেষে
.cssএক্সটেনশন দিতে হয়
সিএসএস কেন ব্যবহার করবেন?
একটি ওয়েব পেজের ডিজাইন করা, গঠন তৈরি করা এবং বিভিন্নভাবে প্রদর্শনীর জন্য সিএসএস ব্যবহার করা হয়।
সবচেয়ে গুরুত্বপূর্ণ বিষয়টি হল সিএসএস এর মাধ্যমে আপনি ভিন্ন ভিন্ন ডিভাইসে একটি ওয়েব পেজকে সুন্দরভাবে উপস্থাপন করতে পারবেন।
সিএসএসের মাধ্যমে বড় সমস্যার সমাধান
একটি ওয়েব পেজকে সাজানোর উদ্দেশ্য নিয়ে এইচটিএমএলের মধ্যে কোনো ট্যাগ নাই।
একটি ওয়েব পেজে শুধুমাত্র কন্টেন্ট বা পেজের গঠন তৈরির জন্যই এইচটিএমএল তৈরি করা করা হয়েছে। যেমনঃ
<h1>ইহা একটি হেডিং ট্যাগ</h1>
<p>ইহা একটি প্যারাগ্রাফ ট্যাগ।</p>সর্বপ্রথম এইচটিএমএল ৩.২ এ যখন <font> ট্যাগ এবং color এট্রিবিউট সংযুক্ত করা হয়েছিল, তখন ইহা ওয়েব ডেভেলপারদের মধ্যে আতঙ্ক ছড়াতে শুরু করেছিল।
কারণ তখন বড় বড় ওয়েবসাইট ডেভেলপমেন্টের জন্য প্রত্যেকটি পেজে ফন্ট বা কালারের তথ্যসমুহ আলাদা আলাদা ভাবে লিখতে হত, যা একটি বড় সমস্যার কারণ হয়ে দাঁড়িয়েছিল।
এই সমস্যা সমাধানের জন্য World Wide Web Consortium (W3C) সিএসএস তৈরি করে।
সিএসএসের মাধ্যমে সময় ও কাজ সাশ্রয়
সাধারনত এক্সটার্নাল সিএসএস ফাইলকে .css এক্সটেনশন দিয়ে সংরক্ষণ করতে হয়। যেমনঃ- external.css
আপনি চাইলে শুধুমাত্র একটি এক্সটার্নাল সিএসএস ফাইল পরিবর্তনের মাধ্যমে খুব সহজেই একটি সম্পূর্ণ ওয়েবসাইটের স্টাইল পরিবর্তন করতে পারেন।
সিএসএস রেফারেন্স
স্যাট একাডেমির সিএসএস রেফারেন্সসেকশনে সব ধরনের সিলেক্টর এবং প্রোপার্টি গুলোর ব্যাখ্যা, উদাহরণ, ব্রাউজারে সাপোর্ট এবং আরো অনেক তথ্য খুব সহজভাবে তুলে ধরা হয়েছে।