ওয়েব ডিজাইন (পর্ব ০৫) সিএসএস (CSS) এর বিভিন্ন ধরন, কালার

এইচটিএমল ডকুমেন্টের যেকোন এলিমেন্টকে স্টাইলিং বা একটা রুপ দিতে সিএসএস ব্যবহার হয়। একটা প্যারাগ্রাফ (

) বা হেডিং (

) বা যেকোন এলিমেন্ট

আসলামুআলাআইকুম।আশা করি আল্লাহ এর অশেষ রহমতে আপনি ভালোই আছেন।আমিও আপনাদের দুআতে ভালো আছি।ওয়েব ডিজাইন কোর্স এ আজকের এই পর্বে আমরা সিএসএস ধরন ব্যবহার ও কালার সম্পর্কে জানবো।

সিএসএসঃ (CSS)

এইচটিএমল ডকুমেন্টের যেকোন এলিমেন্টকে স্টাইলিং বা একটা রুপ দিতে সিএসএস ব্যবহার হয়।

একটা প্যারাগ্রাফ (<p></p>) বা হেডিং (<h1></h1>) বা যেকোন এলিমেন্ট কে ধরুন রং করতে চান, ফন্ট বড় ছোট করতে হবে, অবস্থান এক দিক থেকে অন্যদিকে নিতে হবে, ব্যাকগ্রাউন্ড রং বদলাতে হবে এরুপ শত ধরনের স্টাইল পরিবর্তন সিএসএস দিয়ে করা হয়। এইচটিএমএল এলিমেন্টের বিপরীতে সিএসএস রুল লেখা হয়।

CSS এর পূর্ণরুপ - Cascading Style Sheets

আর একটি কথা না বললেই নয় সিএসএস শেখার আগে অবশ্যই এইচটিএমএল সম্বন্ধে ভাল জানতে হবে। এইচটিএমএল না জানলে সিএসএস এ ভালো করা সম্ভব না।

প্রোপার্টি এবং এর মানের মাঝে কোলন (:) চিহ্ন দিতে হবে এবং মানের শেষে সেমিকোলন (;) দিতে হবে তা নাহলে কোড কাজ করবেনা।

CSS সাধারন ৩ প্রকার বলা যেতে পারে। CSS তিন ভাবে ব্যবহার করা হয় কিন্তু CSS এর ধরন একই। উপরের ছবিটি খেয়াল করুন।

ইনলাইন সিএসএস
ইন্টারনাল সিএসএস
এক্সটার্নাল সিএসএস

ইনলাইন সিএসএসঃ (Inline CSS)

এইচটিএমএল এলিমেন্টে style এট্রিবিউট দিয়ে সিএসএস রুল লেখা যায় এটাই ইনলাইন সিএসএস। এর আগে এইচটিএমএল টিউটোরিয়ালে বেশ কয়েক জায়গায় ইনলাইন সিএসএস ব্যবহার করেছি। খুব প্রয়োজন না হলে ইনলাইন সিএসএস লেখা উচিৎ নয়। মুলত সবসময় এক্সটার্নাল সিএসএস ই্ ব্যবহার করা উচিৎ।

যেহেতু এলিমেন্টের ভিতরেই সিএসএস লেখা হয় তাই ইনলাইন সিএসএস এর জন্য সিলেক্টর প্রয়োজন হয়না। যেমন

<h2 style="background-color: #ff0000; color: #fff;">This is inline CSS</h2>

ইন্টারর্নাল সিএসএসঃ(Internal CSS)

এইটা খুব সহজ যেকোন এইচটিএমএল ডকুমেন্টে <head></head> এর ভিতর style ট্যাগ ব্যবহার করে ইন্টারনাল সিএসএস লেখা হয়। যেমন

<!DOCTYPE html>
<html>
<head>
<style>
h1{
   color: #f00;
   background: yellow;
   text-align: center;
}
</style>
</head>
<body>
<p>Content</p>
</body>
</html>

এক্সটার্নাল সিএসএসঃ (External CSS)

ইন্টারনাল বা ইনলাইন সিএসএস খুব প্রয়োজন ছাড়া লেখা হয়না, লেখা উচিৎ ও নয়। কারন এতে এইচটিএমএল ফাইল দেখতে নোংড়া লাগে এবং অনেক বড় হয়ে যায়।

তাই সব সিএসএস রুলকে একসাথে করে একটা ফাইলে রেখে সেটা .css এক্সটেনশন নাম দিয়ে (যেমন style.css) সেভ করে HTML ফাইলে সংযুক্ত করে দিলেই হয়ে যায়। এটার নামই হচ্ছে এক্সটার্নাল সিএসএস। এইচটিএমএল এ link নামে একটা ট্যাগ আছে এটা দিয়েই সংযোগ দেয়া যায়। একটা উদাহরন

<!DOCTYPE html>
<html>
<head>
<link href="/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Content</h1>
</body>
</html>

কালারঃ (Color)

আমাদের ওয়েব সাইটে কালার একটা গুরুত্বপূর্ন বিষয়।ওয়েব সাইটে কালার এর সঠিক ব্যবহার না করলে কখনোই ভালো ডিজাইন করা সম্ভব না।

ওয়েব সাইটে সাধারনত তিন ধরণের কালার ব্যবহার করে থাকি।

কালার নেম দিয়ে
RGB (Red Green Blur) কালার এর মান দিয়ে
হেক্সাডেসিমাল এর মান দিয়ে

কালার এর নাম দিয়েঃ (Color with name)

আপনি সরাসরি কোডিং এর মাঝে কালারের নাম ব্যবহার করেই রং করতে পারবেন।নিচেই ১৬টি মৌলিক কালারের নাম দেওয়া হলো।

RGB এর মান দিয়েঃ (Use RGB)

Red Green Blue এর নির্দিষ্ট সংখ্যা দ্বারা মিক্স করে এই কালার তৈরি করা হয়।প্রত্যেকের মান ০(যখন কোন কালার থাকে না) হতে ২৫৫(যখন ঐ কালারটি সম্পুর্ন থাকে)। rgb ফরমেটটি হল, rgb(RED,GREEN,BLUE)। যেমন, rgb(255,0,0)

আমার সাজেস্ট থাকবে এইটা ব্যবহার না করার কারন অনেক ব্রাউজার এই কালার ঠিক মতো কাজ করে না।

হেক্সাডেসিমাল কালার কোডঃ (Hex color with html)

আমরা কোডিং করতে বেশির ভাগ কালার কোড ইউজ করি হেক্সাডেসিমাল কোড দিয়ে।এই কালার কোড ইউজ করা সহজ ও নিরাপদ।

পিক্সিই এপস ইউজঃ (Pixie app use)

আমরা কোডিং করতে গিয়ে অনেক সময় আমরা কালার মিক্সিং করে আমাদের মন মতো কালার পাই না। অথবা আমাদের ডিজাইন মন মতো হয়না।আবার অনেক সময় প্রয়োজন হয় যেকোনো জায়গা থেকে কালার নিয়ে সেই কালার ইউজ করা। এই সকল সমস্যার জন্য আপনাদের প্রয়োজন হবে খুব ছোট একটা সফটওয়্য়ার যার নাম পিক্সি নিচে ডাউনলোড লিংক আছে ডাউনলোড করে নিন।

exe Pixie Download

এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।