সি এস এস ( Css ) শিখি , আইডি ( Id ) এবং ক্লাস ( Class ) এর উপযুক্ত ব্যবহার।
হেলো বন্ধুরা , সকলেই কেমন আছো ? আশা করি সকলেই মহান সৃষ্টি কর্তার কৃপায় অনেক অনেক ভালই আছো। আমিও ভালই আছি। আর ভালো আছি বলেই , আপনাদের সাথে কিছু সময় কাটাতে চলে এলাম। আপনাদের সাথে গল্পও করা হবে , সাথে কিছু শিখব আমরা।
আজ আমরা কি শিখব ? সেই বিষয় আমি পূর্বেই আজকের টিউনের টাইটেলে বলে দিছি। আশা করি আপনারা টিউনের শেষ পর্যন্ত আমার সাথেই থাকবেন।
 |
Css Tricks Id Vs Class |
সি এস এস নিয়ে অনেকের বিভিন্ন রকমের ধারনা রয়েছে। তাই আজ বেশ কিছু প্রশ্নের ধারনা নিয়েই আজকের টিউন টি সাজিয়েছি। আপনি যদি আজকের এই টিউন টি মনোযোগ সহকারে পড়েন , তবে আপনি আজ সি এস এস এর অনেক খুঁটি নাটি বিষয় সম্পর্কে বিশেষ বিশেষ জ্ঞান লাভ করবেন। তাই টিউন টি স্কিপ না করে শেষ পর্যন্ত পড়বেন।
# সি এস এস ( Css ) কি ? সি এস এস বলতে কি বুঝায় ?
সি এস এস হল একটি অত্যাধুনিক টেকনিক্যাল ল্যাঙ্গুয়েজ। সি এস এস অর্থ বা সি এস এস বলতে আমরা বুঝি Cascading Style Sheets. সি এস এস কে বাদ দিয়ে আপনি কখনোই ওয়েব ডিজাইন করতে পারবেন না। আপনি হয়ত এইস টি এম এল এর সাহায্যে কাঠামো ডিজাইন করতে পারবেন , কিন্তু রংয়ের বৈচিত্র্য নিয়ে আসতে অবশ্যই সি এস এস এর প্রয়োজন হবে।
আপনি যত বেশি সি এস এস জানবেন , আপনার এরব সাইট তত বেশি সুন্দর হবে। তাই আপনি যদি সফল ওয়েব ডিজাইনার হতে চান , অবশ্যই আপনাএ ভালো ভাবে সি এস এস জানতে হবেই।
সি এস এস এর ব্যবহারের মাধ্যমে আপনি ওয়েব সাইট কে সঠিক গঠন গত রুপ দিতে পারবেন। সি এস এস এর সাহায্যে আপনি আপনার ওয়েব সাইট কে অনেক এডভান্স লেভেলের স্টাইলিশ করতে পারবেন।
# সি এস এস ( Css ) এর কাজ কি ?
একটি ওয়েব সাইট কে সুন্দর একটি লে-আউট , বৈচিত্র্যময় রুপ , টেক্স এর রং বা কালার অর্থাৎ সকল কিছু কে সুন্দর ভাবে সু-সজ্জিত করতে সি এস এস এর কোন বিকল্প নেই। তাই একটি ওয়েব সাইট এ সি এস এস এর অধিক গুরুত্ব রয়েছে।
# কেন শিখবেন সি এস এস ? সি এস এস শিখার প্রয়োজনীয়তা কি ?
আপনি যদি মনে করেন , সি এস এস কেন শিখবেন , সি এস এস আপনি এ কারনেই শিখবেন যাতে , ইউজার রা আপনার রুপ দেখে আকৃষ্ট হয়। কারন আপনাকে আপনার ওয়েব সাইট এর সুন্দর একটি রুপ দিতে হবে , যাতে ইউজার রা ওয়েব সাইট টি ব্যবহার করার সময় বিরক্ত না হয় এবং অধিক সময় ধরে আপনার ওয়েব সাইট এ অবস্থান করতে পারে।
আর মানুষ সৌন্দর্য প্রিয় , তাই আপনাকে সি এস এস জানতেই হবে , টা না হলে আপনি ওয়েব ডিজাইন করতে ব্যর্থ হবেন। আপনি দেখে থাকবেন হয়ত , যে ব্যক্তি একটু অসুন্দর তাকে মানুষ একটি অন্য চোখে দেখে , তাকে এরিয়ে চলে , কিন্তু যে মানুষ একটু সুন্দর তার বন্ধুর অভাব হয় না। আপনি যদি সে দিক থেকেও চিন্তা অরেন তবে আপনার ওয়েব সাইট যদি অসুন্দর হয় তবে কি ভাবে ভিসিটর ধরে রাখবেন। তাই ভিসিটর ধরে রাখতে হলে আপনাকে অবশ্যই সি এস এস জানতেই হবে। আর এ জন্যই সি এস এস এর যথেষ্ট প্রয়োজনীয়টা রয়েছে।
# কি ভাবে শিখবেন সি এস এস ? এটি কি খুব কঠিন !
প্রথমেই আসি , সি এস এস কি খুব কঠিন , না এটি কখনোই কঠিন নয়। আর যদি শিখার কথা বলেন তবে একটু মনোযোগ দিয়ে আজকের টিউন পড়লেই সি এস এস সম্পর্কে অনেক ধারনা পেয়ে যাবেন।
আপনি যদি সি এস এস শিখতে চান , তবে আপনাকে একটু টেকনিক অবলম্বন করতে হবে আর সেটি হল -
আপনি যখন বিভিন্ন ওয়েব সাইট ভিসিট করবেন ঠিক তখনি সেই সি এস এস টা আপনি দেখে নিতে চান , সেই সি এস এস এর কোড টা দেখে নিবেন। এভাবেই আপনার দক্ষতা বৃদ্ধি পেতে থাকবে। তাছারা আপনাকে যথেষ্ট প্রাকটিস করতে হবে।
# কিভাবে অন্যের সি এস এস দেখে নিবেন ?
এটি কোন ট্রিক্স নয়। প্রত্যেক ওয়েব ডেভেলপার এই কাজ করেই থাকে। যে সি এস এস তার নতুন মনে হয় সে তখন সেটি দেখে নেয়। এখন প্রশ্নও হল - কি ভাবে এই কাজ টি করে তারা।
আমরা সকলেই প্রায় ক্রোম ব্রাউজার ব্যবহার অরে থাকি। আর এই ক্রোম ব্রাউজারের সাহায্যেই আমরা যে কোন ওয়েব সাইট এর সি এস এস বের করে নিতে পারি। অবাক হচ্ছেন তো ?
অবাক হওয়ার কিছুই নেই। ক্রোম ব্রাউজার আমাদের সকল কেই এই সুবিদা প্রদান করেছে।
আমি আপনাদের এই বিষয় টি হাতে কলমে দেখাতে চাই -
 |
Css inspect |
আমরা যদি লক্ষ্য করি তাহলে দেখতে পাব যে , এখানে যে সবার উপরে লেখা আছে - বৈশিষ্ট্যযুক্ত পোস্ট , এটি দেখুন সুন্দর একটি কালার বা রং দিয়ে বেষ্টিত।
কিভাবে এই রংয়ের বৈচিত্র্য এনেছে টা যদি দেখে নিতে চাই , তবে আপনাকে ক্রোম ব্রাউজার ওপেন করে নিয়ে সেই ওয়েব সাইট টি ভিসিট করতে হবে। যেমন আমি SMsudipBD.Com সাইট এর সি এস এস বের করব।
আমি ওই সাইট এ ভিসিট করেছি এবং যে স্থানের সি এস এস বের করব সে স্থানে মাউস পয়েন্টার রেখে রাইট ক্লিক করেছি।
আর আপনি যদি মোবাইল ইউজার হয়ে থাকেন , আপনার ক্ষেত্রেও একই রকম , আপনি ক্রোম ব্রাউজের ওপেন করে সেই ওয়েব সাইট ভিসিট করবেন , যে সাইট এর সি এস এস বের করবেন। তার পর যে স্থানের সি এস এস বের করবেন ওই স্থানে টাস স্কিনে চেপে ধরে থাকবেন , দেখবেন নিচের স্কিন শটের অপশন গুলো দেখতে পাবেন।
 |
Right Click Inspect Element |
অপশন গুলো দেখুন , এবং সবার শেষের অপশন টি লক্ষ্য করুন কি লেখা আছে। দেখুন লেখা আছে Inspect. এই অপশনের উপর ক্লিক করুন।
 |
View Inspect Elements |
এবার দেখুন ...বৈশিষ্ট্যযুক্ত পোস্ট... লেখা টির Html দেখা যাচ্ছে। এবং তার একটু নিচেই Style অর্থাৎ Css দেখা যাচ্ছে।
আপনি এই সি এস এস টি কপি করে নিয়ে আপনিও ব্যবহার করতে পারবেন। এই সি এস এস টি কপি করে নিয়ে আপনি আপনার মন মত এডিট করে ব্যবহার করতেও পারবেন।
দেখেছেন কত সহজে অন্যের ওয়েব সাইট এর সি এস এস খুজে পাওয়া যায়। বলেছিলাম না সি এস এস অনেক সহজে আপনি শিখতে পারবেন।
এখানে তো আপনি ওয়েব সাইট থেকে সি এস বের করা শিখলেন কিন্তু আপনাকে ভালো ওয়েব ডেভেলপার হতে হলে নিজেকে সি এস এস বুঝতে হবে। চিন্তা করবেন না , একটু পড়েই আমি সি এস এস সম্পর্কে আলোচনা করবই। কি ভাবে আপনি নিজেই সি এস এস তৈরি করবেন , তখন সব বিষয় ক্লিয়ার হয়ে যাবে। এখন যেটা জটিল বা কঠিন মনে হচ্ছে। সেটিই একটু পর আপনাদের অনেক সহজ মনে হবে।
# এইস টি এম এল কি ? এটি কিভাবে তৈরি করবেন ?
এইস টি এম এল ( Html ) হল - প্রত্যেক টি ওয়েব সাইট এর কাঠামো স্বরূপ। তাই এইস টি এম এল সম্পর্কে জ্ঞান থাকা আবশ্যক। আপনি হয়ত মনে করবেন সি এস এস শিখতে এসে এইস টি এম এল কেন ?
আসলে এইস টি এম এল , সি এস এস এর সাথে সম্পর্ক যুক্ত। একটি অপরটি ছাড়া চলতে পারে না। আমিও এইস টি এম এল নিয়ে আলোচনা করতে চাইনি , কিন্তু সি এস এস কে শিখতে গেলে এইস টি এম এল চলে আসে। এখানে আমার কিছুই করার নেই। তাই হালকা একটু ধারনা আপনাদের দিয়ে রাখলাম। এতেই হবে , আমরা কাজ চালিয়ে নিতে পারব।
# সি এস এস ( Css ) সাধারন স্ট্রাকচার কেমন হয় ? কিভাবে সি এস এস তৈরি করব ?
আমি নিচে একটি সি এস এস তৈরি করতেছি , আপনার একটু দেখে নিবেন। নয়ত কিছুই বুঝতে পারবেন না। আর যদি আপনি আজকের টিউন টি স্কিপ করে পড়ে থাকেন , আমি ১০০% সিউর যে আপনি কিছুই বুঝতে পারেন নি।
সম্পূর্ণ টিউন টি মনোযোগ দিয়ে পড়ুন সকল বিষয় আপনার অনেক সহজ মনে হবে। আজকে যা আপনি শিখতে যাচ্ছেন , এর পর থেকে আপনাকে আর মানুষের কাছে সি এস এস এর জন্য ঘুড়তে হবে না।
<!-- Example Css Start --><style type="text/css">Your Css Here</style><!-- Example Css End -->
এটি একটি সাধারন স্টাইল সি এস এস। Your Css Here এখানে কিছু একটা লিখতে হবে তাই না। আসলে এখানে আমরা সি এস এস যুক্ত করব। আর বাকি যা লিখে রেখেছি , এসব আমাদের সি এস এস কে বুঝতে পারবে। আসলে আমরা কি লিখেছি বা কাকে কল করতেছি। সি এস এস লিখতে গেলে এই ট্যাগ টি অবশ্যই লিখতে হবে।
# h2 Tag কেন Html এ ব্যবহার করি ? h2 Css যুক্ত করার উপায় কি ?
আজকে আমরা উদাহরন হিসেবে h2 Tag এর সি এস এস শিখব। আর আমরা h2 Tag এ কারনেই ব্যবহার করি , এই ট্যাগ গুগল Seo এর কাজে লাগে। Seo অর্থাৎ সার্চ ইঞ্জিন সহজেই বুঝতে পারে h2 হল টাইটেল ট্যাগ। তাই আমরা সব সময় h2 Tag কে টাইটেলে ব্যবহার করব। তবে h2 Tag এর একটি সি এস এস তৈরি করি। চলুন দেখে নেই ...
h2.title{font-color:#ffffff;font-size:15px;font-family:none;background:#000000;padding:5px;margin:0px;}h2#title{font-color:#ffffff;font-size:15px;font-family:none;background:#000000;padding:5px;margin:0px;}
উক্ত সি এস এস কে যদি আমরা স্টাইল শিটে যুক্ত করতে চাই , তাহলে এই ট্যাগ গুলো শুধু নিচের মত করে বসিয়ে দিব। পূর্বে লিখেছিলাম না , Your Code Here ঠিক এই স্থানে বসাব।
<!-- Example Css Start --><style type="text/css">h2.title{font-color:#ffffff;font-size:15px;font-family:none;background:#000000;padding:5px;margin:0px;}h2#title{font-color:#ffffff;font-size:15px;font-family:none;background:#000000;padding:5px;margin:0px;}</style><!-- Example Css End -->
এখানে দেখুন , আমি দুই টি সি এস এস যুক্ত করেছি। কেন করেছি জানেন , যাতে আমি আপনাদের সহজেই বুঝাতে পারি।
এখানে যেটি ডট টাইটেল ( .title ) , এটিকে আমরা ক্লাস ( Class ) বলি।
আর যেটি হ্যাস টাইটেল ( #title ) , এটিকে আমরা ( Id ) বলি।
# কিভাবে উক্ত সি এস এস একে Html এ এপ্লাই করব ?
অনেকেই এমন প্রশ্নটাই হয়ত মনে মনে করতেছেন। তাই আপনাদের প্রশ্ন টি আমি বলেই দিলাম। এখন অবশ্যই খুশি হয়েছেন নিশ্চয়। চলুন তবে Html Tag টি দেখে নেই।
<html><head><title>Just Example Html Css By SMsudipBD.Com</title></head><body><!-- Html Tag Start By SMsudipBD.Com --><h2 class="title">Title One Going Here</h2><h2 id="title">Title Two Going Here</h2><!-- Html Tag End By SMsudipBD.Com --></body></html>
আমরা যখন Class ব্যবহার করব , তখন সি এস এস এ ডট দিয়ে শুরু করব। আবার যখন Id দিয়ে শুরু করব , তখন সি এস এস এ হ্যাস দিয়ে শুরু করব।
এখানে দেখুন লাল রং দিয়ে আমি ক্লাস কে বুঝিয়েছি আর নীল রং দিয়ে আইডি কে বুঝিয়েছি। আশা করি আপনি বুঝতে পেরেছেন। আর যদি না বুঝে থাকেন কমেন্ট করে জানাবেন।
# আইডি ( Id ) এবং ক্লাস( Class ) এর উপযুক্ত ব্যবহার।
আমি এত ক্ষন ধরে আইডি এবং ক্লাস নিয়ে কথা বলেছি কিন্তু আমাদের এটিও জানা অধিক গুরুত্বপূর্ণ যে , আমরা কখন কন স্থানে আইডি বা ক্লাস ব্যবহার করব।
আজ আমি আইডি এবং ক্লাস এর উপযুক্ত ব্যবহার আপনাদের শিখিয়ে দিব। এতে আপনার ওয়েব ডিজাইন অনেক টাই সহজ এবং বোধগম্য হবে আশা করি। আইডি এবং ক্লাস এর উপযুক্ত ব্যবহার আমি আপনাদের একটি উদাহরনের সাহায্যে দেখাতে চাই...
<!-- Html Tag Start Apropriate Id Vs Class --><div id="title-one"<h2 class="title">Title One Going Here</h2><h2 class="title">Title Two Going Here</h2><h2 class="title">Title Three Going Here</h2></div><div id="title-two"<h2 class="title">Title Four Going Here</h2><h2 class="title">Title Five Going Here</h2><h2 class="title">Title Six Going Here</h2></div><!-- Html Tag End Apropriate Id Vs Class -->
এখানে দেখুন অনেক গুলো ক্লাস কে আমি একটি মাত্র আইডি দিয়ে বেষ্টন করেছি। এতে বুঝতে আমাদের অনেক সুবিধা হচ্ছে। যখন এভাবে আমরা অনেক গুলো Html এর মধ্যে সকল Html এভাবে পার্ট পার্ট করে আলাদা আলাদা আইডি দিয়ে রাখব , তখন আমাদের উক্ত কোড গুলো খুজে পেতে
যেমন সহজ হবে তেমনি সহজেই যে কেউ বুঝতেও পারবে।
# আইডি ( Id ) এবং ক্লাস ( Class ) ভিন্ন কিনা , নাকি একই ?
আপনাদের মনে প্রশ্ন মনে হয় চলে এসেছে , আসলে আইডি কিংবা ক্লাস ভিন্ন ভিন্ন কিনা। হ্যা আমি আপনাদের এই কনফিউশন ও দূর করে দিতে চাই।
আসলে আইডি এবং ক্লাস এর মধ্যে কোন পার্থক্য নেই , এদের কাজ একই। আপনি আইডি বা ক্লাস যে কোন টি ব্যবহার করতে পারেন বা দুটিই ব্যবহার করতে পারেন। এটা আপনাদের ইচ্ছার উপর নির্ভর করছে।
তবে এখানে আইডি ব্যবহার করলে সি এস এস লেখার সময় হ্যাস ( # ) এবং ক্লাস বুবহার করলে সি এস এস লেখার সময় ডট ( . ) লিখতে হয়।
লিখতে লিখতে আপনাদের সাথে কথা বলতে বলতে টিউনের শেষ পর্যায়ে চলে এসেছি। তাই আজ আর লিখতে না।
পরিশেষে শুধু এত টুকুই বলতে চাই , আমি ব্লগারে নতুন , আমার লেখনিতে ভূল ত্রুটি থাকতে পারে , স্পেলিং এ ভূল থাকতে পারে , আশা করি আমার ভূল গুলো আপনারা ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।
নিজের জ্ঞান যত টুকু পারি আপনাদের সাথে শেয়ার করব। আপনার মূল্যবান মতামত জানিয়ে আমাকে অনুপ্রাণিত করবেন।
ধন্যবাদ সকল বন্ধু এবং এস এম সুদীপ বিডি ডট কম ইউজার দের।
সকলেই সর্বদা ভালো এবং সুস্থ থাকবেন। মহান সৃষ্টি করতা আপনাদের সহায় হোক , এই প্রত্যাশায় আজকের টিউন এখানেই শেষ করছি।
টাটা।
ক্রেডিট বাইঃ - এস এম সুদীপ বিডি ডট কম ( Admin Of SMsudipBD.Com )
পোস্ট রেটিং করুন
|
SMsudipBD.Com
Web Development & Design. |
টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!