CSS কি?
Cascading vogue Sheets (CSS) হল একটি ভাষা যা দিয়ে কোন ডকুমেন্ট
কিভাবে দেখানো হবে বা সোজা কথায় ডকুমেন্টের স্টাইল নিয়ন্ত্রণ করা সম্ভব।
অর্থাৎ যেই ফাইলের মধ্যে আমাদের markup language ফাইলের সৌন্দর্যবর্ধনের কাজ করে।
একটি ডকুমেন্ট হল এক ধরণের তথ্যের সংগ্রহ যার স্ট্রাকচার (কাঠামো) একটি মার্কআপ ল্যাঙ্গুয়েজের সাহায্যে তৈরি করা হয়।
এই দাঁতভাঙ্গা সংজ্ঞা না বুঝতে পারলে ভয় পাবার কিছুই নেই, টিউটোরিয়াল পড়তে পড়তে আপনি তা বুঝে যাবেন!
asis, text-outline ইত্যাদি নিয়ে পরে বিস্তারিত দেয়া হবে।
উদাহরণ:–১
একজন দর্জি যখন কাপড় কাটেন শার্ট বানানোর জন্য,তখন সে কেবল মাত্র কিছু কাপড়ের টুকরা হিসেবেই থাকে;এটি তখনই একটি পূর্ণ শার্ট হয়,যখন সব গুলো টুকরো একসাথে সেলাই করা হয়।সহজ ও অল্প সময়ে প্রোগ্রাম লেখার জন্য ম্যাক্রোমিডিয়া ড্রিমওয়েভার বইটি দেখে নিতে পারেন।এখানে,HTML বা DIV হচ্ছে সেই কাপড়ের টুকরো।এগুলিকে সুবিন্যস্ত ও সুন্দর (In Right Order With Proper Styling) ভাবে উপস্থাপন করে CSS। সেলাই বিহিন কাপড়ের টুকরোকে যেমন ভাল দেখাবে না,ঠিক তেমনই CSS ছাড়া আপনার HTML পূর্ণতা পাবে না।
ওয়ার্ল্ডের প্রত্যেকটি সাইট CSS ব্যবহার করে।একজন ওয়েব ডেভেলপারের প্রাথমিক শিক্ষাণীয় বিহশয় হচ্ছে HTML ও CSS। কারন এটি একটি সাধারন একটি চাহিদা (Basic or Mandatory Requirement)।
তাই CSS অবশ্যই জানতে হবে।এটি ছাড়া ওয়াল্ডে কোনো সাইট করা হয় না।
উদাহরণ:–২
- একটি ওয়েবপেজ (যেমনটি এখন আপনি পড়ছেন) এক প্রকার ডকুমেন্ট।
আপনি ওয়েবপেজে যে তথ্য দেখতে পাচ্ছেন, সাধারণত তা HTML(HyperText Markup Language) দিয়ে বিন্যস্ত বা স্ট্রাকচার তৈরি করা হয়। - একটি এ্যাপ্লিকেশনের ডায়ালগ (ছোট উইন্ডো, যাকে অনেক সময় মোডাল উইন্ডো নামে ডাকা হয়) প্রায়ই ডকুমেন্ট হয়ে থাকে।
এমন ডায়ালগ অবশ্য মার্কআপ ল্যাঙ্গুয়েজ দিয়েও লেখা হতে পারে, যেমন XUL এমন একটি ল্যাঙ্গুয়েজ। মোজিলার সফটওয়্যারগুলোতে এটি খুব সাধারণ ব্যাপার হলেও সাধারণত এমন ঘটনা বাইরে খুব কম দেখা যায়।
CSS এর উপকারীতাঃ
আসলে CSS এর উপকারিতা বলে বোঝানো সম্ভব নয়।
কারন আমাদের HTML এর লেখার আকার থেকে শুরু করে লেখার রং,ফন্ট,ছবির আকার,ছবির স্টাইল,বিভিন্ন প্রকার মেনু তৈরি,লিস্ট তৈরি,লিস্ট গুলো দেখতে কেমন হবে,লিংকগুলো দেখতে কেমন হবে ইত্যাদি সকল প্রকার কাজই নির্ভর করবে CSS এর উপর।এই ভাবেই হবে মূলতঃআমাদের DIV এবং CSS শেখার ভিত্তি।CSS ছাড়া আমাদের DIV গুলো ঠিক মত কাজ করতে পারবে না।
কারন DIV এর আকার ,স্টাইল,রং,স্থান নির্ধারন ইত্যাদি সবই করতে হবে CSS দ্বারা।আর আপনি সবসময় সবার সাথে তাল মিলিয়ে তো কাজ করবেনই,পারলে চেষ্টা করবেন সবার থেকে এগিয়ে থাকার।আর এগিয়ে থাকতে হলে নিজেকে সবসময় আপডেট থাকতে হবে।আর সে জন্যই আপনার অ্যাডভান্স CSS শিখতেই হবে এবং ব্যবহার করতেই হবে।আপনি যত বেশি অ্যাডভান্স লেভেলের কাজ জানবেন এবং ব্যাবহার করবেন,আপনার কাজ তত বেশি সুন্দর হবে এবং তার সাথে সাথে প্রফেশনাল লুকও আসবে।
সিএসএস টেক্সক্ট:
টেক্সট এ শুধু ফন্ট দিয়ে সব রকম সৌন্দর্য আনা যায়না। তাই সিএসএস এ আরো বেশ কিছু প্রোপার্টিজ আছে যেগুলি দিয়ে টেক্সটকে নানানভাবে সাজানো যায়।
text-align এবং text-transform প্রোপার্টির কি কি মান হতে পারে এগুলি আগেই আলোচনা হয়েছে।
text-indent প্রোপার্টি দিয়ে একটা এলিমেন্টে যে টেক্সট আছে সেটার প্রথম লাইনকে আড়াআড়ি ভাবে সরিয়ে দেয়া যায়। পিক্সেল কিংবা শতকরা মান দিতে পারেন। যেমন
1.text-indent : 200px;
** মাইনাস (-) মানও দেয়া যায়। মাইনাস দিলে বাম দিকে সরতে থাকবে।
** মুলত এটার সবচেয়ে বেশি ব্যবহার হয় যখন a এলিমেন্টের ভিতরের লেখাকে সরানোর জন্য। কারন লেখা সরিয়ে সাধারনত ছবি দেয়া হয়। যেহেতু a এর start এবং end ট্যাগেরে মধ্যে কোন লেখা থাকতেই হয় তাই text-indent এর মান অনেক বেশি দিয়ে উইন্ডো থেকে লুকানোর কাজে ব্যবহৃত হয়।
line-height দিয়ে ঠিক করা যায় যে লাইনগুলির উচ্চতা কেমন হবে।
1.line-height: 2;
2./* or */
3.line-height:20px;
20px দিয়ে তো বোঝাই যাচ্ছে লাইনের উচ্চতা ২০ পিক্সেল করে হবে। line-height : 2 দিয়ে বোঝায় টেক্সটের উচ্চতার ২ গুন বেশি হবে এক একটা লাইনের উচ্চতা।
** % দিয়েও এর মান দেয়া যায়। বাই ডিফল্ট এটার মান normal থাকে।
letter-spacing দিয়ে অক্ষরের মাঝে দুরত্ব বাড়ানো যায়।
1.letter-spacing : 20px;
বাই ডিফল্ট এটারও মান normal থাকে।
word-spacing দিয়ে letter-spacing এর মতই কাজ হবে শুধু এটা দিয়ে শব্দের মধ্যে দুরত্ব কমানো বাড়ানো যায়।
1.word-spacing: 20px;
ব্যাখ্যা letter-spacing এর মত।
text-decoration একটা কাজের প্রোপার্টি, এটা দিয়ে টেক্সট এর নিচে রেখা টেনে দেয়া, মাঝ দিয়ে রেখা টানা ইত্যাদি করা হয়।
এর মান বাই ডিফল্ট none থাকে। এটা থাকলে নরমাল থাকবে।
মান underline দিলে ঐ এলিমেন্টের সব লেখার নিচে রেখা দেখাবে।
overline দিলে উপরে রেখাটি দেখাবে
line-through দিলে মাঝ দিয়ে রেখাটি চলে যাবে
1.text-decoration : line-through;
** এনকর ট্যাগে (<a></a>) বাই ডিফল্ট একটা রেখা থাকে। দেখবেন সব লিংকের নিচে একটা রেখা। এটা সরানোর জন্য text-decoration:none; বহুলভাবে ব্যবহৃত হয়।
white-space দিয়ে লেখা কি মুড়িয়ে নাকি হবহু যেমন ডকুমেন্টে টাইপ করা হয়েছে তেমন দেখাবে এসব ঠিক করা যায়।
1.white-space : nowrap;
2./* or */
3.white-space : pre;
বাই ডিফল্ট এটার মান normal থাকে।
nowrap থাকলে লেখা এক লাইনে দেখাবে আর pre দিলে হবহু যেমন ডকুমেন্টে লেখা হয়েছে তেমনি দেখাবে।
সিএসএস ৩ text-shadow নামে একটা নতুন প্রোপার্টি এসেছে এটা দিয়ে টেক্সট এ বিশেষ ইফেক্ট দেয়া যায়।
1.text-shadow: 2px 3px 3px #555;
সিএসএস ৩ আরেকটি প্রোপার্টি হল text-overflow. যখন কন্টেইনারের (যেখানে টেক্সটগুলি আছে) আয়তনের চেয়ে লেখা বেশি হয়ে যাবে। এটা তখনি কাজ করে যদি কন্টেইনারের মধ্যে overflow প্রোপার্টির মান hidden, auto বা scroll থাকে সাথে সাথে white-space এর মান nowrap থাকে।
1.
p{
2.
overflow
:
hidden
;
3.
white-space
:
nowrap
;
4.
text-
overflow
: ellipsis;
5.
}
ellipsis দেয়ার কারনে অতিরিক্ত টেক্সট আর না দেখিয়ে ডট ডট (…) চিহ্ন দেখাবে। আপনি যদি ডট চিহ্ন না দেখিয়ে অন্য চিহ্ন দিতে চান তাহলে text-overflow: “–” এভাবে দিতে হবে মানে কোটেশনের ভিতর চিহ্নটি।
মান যদি clip দেন তাহলে বাকি লেখা দেখাবেনা এবং কোন ডট চিহ্নও দেখাবেনা।
এগুলিই বেশি ব্যবহৃত হয়। এগুলি ছাড়া সিএসএস ৩ আরো কিছু প্রোপার্টিজ আছে যেমন
text-wrap, word-wrap, text-emphasis, text-outline ইত্যাদি নিয়ে পরে বিস্তারিত দেয়া হবে।