অন্যের কাছে CSS এর জন্য ঘুড়তে হবে না। সি এস এস ( Css ) শিখুন , আইডি ( Id ) এবং ক্লাস ( Class ) এর উপযুক্ত ব্যবহারসহ!
আসসালামু আলাইকুম বন্ধুরা , সকলেই কেমন আছো ? আমিও ভালই আছি; আলহামদুলিল্লাহ। আর ভালো আছি বলেই , আপনাদের সাথে কিছু সময় কাটাতে চলে এলাম। আপনাদের সাথে গল্পও করা হবে , সাথে কিছু শিখব আমরা।
আজ আমরা কি শিখব ? সেই বিষয় আমি পূর্বেই আজকের টিউনের টাইটেলে বলে দিছি। আশা করি আপনারা টিউনের শেষ পর্যন্ত আমার সাথেই থাকবেন।
সি এস এস নিয়ে অনেকের বিভিন্ন রকমের ধারনা রয়েছে। তাই আজ বেশ কিছু প্রশ্নের ধারনা নিয়েই আজকের টিউন টি সাজিয়েছি। আপনি যদি আজকের এই টিউন টি মনোযোগ সহকারে পড়েন , তবে আপনি আজ সি এস এস এর অনেক খুঁটি নাটি বিষয় সম্পর্কে বিশেষ বিশেষ জ্ঞান লাভ করবেন। তাই টিউন টি স্কিপ না করে শেষ পর্যন্ত পড়বেন।
সি এসএস ( Css ) কি ? সি এস এস বলতে কি বুঝায় ?
সি এস এস অর্থ বা সি এস এস বলতে আমরা বুঝি Cascading Style Sheets. সি এস এস কে বাদ দিয়ে আপনি কখনোই ওয়েব ডিজাইন করতে পারবেন না। সি এস এস হল একটি অত্যাধুনিক টেকনিক্যাল ল্যাঙ্গুয়েজ। আপনি হয়ত এইস টি এম এল এর সাহায্যে কাঠামো ডিজাইন করতে পারবেন , কিন্তু রংয়ের বৈচিত্র্য নিয়ে আসতে অবশ্যই সি এস এস এর প্রয়োজন হবে।
আপনি যত বেশি সি এস এস জানবেন , আপনার এরব সাইট তত বেশি সুন্দর হবে। তাই আপনি যদি সফল ওয়েব ডিজাইনার হতে চান , অবশ্যই আপনাএ ভালো ভাবে সি এস এস জানতে হবেই।
সি এস এস এর ব্যবহারের মাধ্যমে আপনি ওয়েব সাইট কে সঠিক গঠন গত রুপ দিতে পারবেন। সি এস এস এর সাহায্যে আপনি আপনার ওয়েব সাইট কে অনেক এডভান্স লেভেলের স্টাইলিশ করতে পারবেন।
সি এস এস ( Css ) এর কাজ কি ?
ওয়েব সাইটে CSS এর অধিক গুরুত্ব রয়েছে। একটি ওয়েব সাইট কে সুন্দর একটি লে-আউট , বৈচিত্র্যময় রুপ , টেক্স এর রং বা কালার অর্থাৎ সকল কিছু কে সুন্দর ভাবে সু-সজ্জিত করতে সি এস এস এর কোন বিকল্প নেই।
কেন শিখবেন সি এস এস ? সি এস এস শিখার প্রয়োজনীয়তা কি ?
আপনি যদি মনে করেন , আপনাকে আপনার ওয়েব সাইট এর সুন্দর একটি রুপ দিতে হবে , সি এস এস কেন শিখবেন , সি এস এস আপনি এ কারনেই শিখবেন যাতে , ইউজার রা আপনার রুপ দেখে আকৃষ্ট হয়। কারন আপনাকে আপনার ওয়েব সাইট এর সুন্দর একটি রুপ দিতে হবে , যাতে ইউজার রা ওয়েব সাইট টি ব্যবহার করার সময় বিরক্ত না হয় এবং অধিক সময় ধরে আপনার ওয়েব সাইট এ অবস্থান করতে পারে।
আপনি দেখে থাকবেন হয়ত , যে ব্যক্তি একটু অসুন্দর তাকে মানুষ একটি অন্য চোখে দেখে , তাকে এরিয়ে চলে , কিন্তু যে মানুষ একটু সুন্দর তার বন্ধুর অভাব হয় না। আর মানুষ সৌন্দর্য প্রিয় , তাই আপনাকে সি এস এস জানতেই হবে , টা না হলে আপনি ওয়েব ডিজাইন করতে ব্যর্থ হবেন। আপনি যদি সে দিক থেকেও চিন্তা অরেন তবে আপনার ওয়েব সাইট যদি অসুন্দর হয় তবে কি ভাবে ভিসিটর ধরে রাখবেন। তাই ভিসিটর ধরে রাখতে হলে আপনাকে অবশ্যই সি এস এস জানতেই হবে। আর এ জন্যই সি এস এস এর যথেষ্ট প্রয়োজনীয়টা রয়েছে।
কি ভাবে শিখবেন সি এস এস ? এটি কি খুব কঠিন !
আজ মনোযোগ সহকারে আজকের টিউন পড়লেই সি এস এস সম্পর্কে অনেক ধারনা পেয়ে যাবেন। প্রথমেই আসি , সি এস এস কি খুব কঠিন , না এটি কখনোই কঠিন নয়। আর যদি শিখার কথা বলেন তবে আপনাকে একটু টেকনিক অবলম্বন করতে হবে আর সেটি হল -
আপনি যখন বিভিন্ন ওয়েব সাইট Visit করবেন ঠিক তখনি সেই সি এস এস টা আপনি দেখে নিতে চান , সেই সি এস এস এর কোড টা দেখে নিবেন। এভাবেই আপনার দক্ষতা বৃদ্ধি পেতে থাকবে। তাছারা আপনাকে যথেষ্ট প্রাকটিস করতে হবে।
কিভাবে অন্যের সি এস এস দেখে নিবেন ?
আমরা সকলেই প্রায় Google Crome ব্রাউজার ব্যবহার অরে থাকি। আর এই ক্রোম ব্রাউজারের সাহায্যেই আমরা যে কোন ওয়েব সাইট এর সি এস এস বের করে নিতে পারি। অবাক হচ্ছেন তো ?
অবাক হওয়ার কিছুই নেই। ক্রোম ব্রাউজার আমাদের সকল কেই এই সুবিদা প্রদান করেছে। ওয়েব ডেভেলপার এই কাজ করেই থাকে। যে সি এস এস তার নতুন মনে হয় সে তখন সেটি দেখে নেয়।
View-Source:wWw.DjSohagRana.Com
এখন আপনি DjSohagRana.Com সাইটের Css দেখতে পারবেন। তাছাড়া ব্রাউজার থেকে যেকোন CSS এ ক্লিক করে Inspect অপশনেও CSS দেখতে পারতেছেন।
এই সি এস এস টি কপি করে নিয়ে আপনি আপনার মন মত এডিট করে ব্যবহার করতেও পারবেন। আপনি এই সি এস এস টি কপি করে নিয়ে আপনিও ব্যবহার করতে পারবেন।
দেখেছেন কত সহজে অন্যের ওয়েব সাইট এর সি এস এস খুজে পাওয়া যায়। বলেছিলাম না সি এস এস অনেক সহজে আপনি শিখতে পারবেন।
এখানে তো আপনি ওয়েব সাইট থেকে সি এস বের করা শিখলেন কিন্তু আপনাকে ভালো ওয়েব ডেভেলপার হতে হলে নিজেকে সি এস এস বুঝতে হবে। চিন্তা করবেন না , একটু পড়েই আমি সি এস এস সম্পর্কে আলোচনা করবই। কি ভাবে আপনি নিজেই সি এস এস তৈরি করবেন , তখন সব বিষয় ক্লিয়ার হয়ে যাবে। এখন যেটা জটিল বা কঠিন মনে হচ্ছে। সেটিই একটু পর আপনাদের অনেক সহজ মনে হবে।
এইস টি এম এল কি ? এটি কিভাবে তৈরি করবেন ?
আপনি হয়ত মনে করবেন সি এস এস শিখতে এসে এইস টি এম এল কেন ? এইস টি এম এল ( Html ) হল - প্রত্যেক টি ওয়েব সাইট এর কাঠামো স্বরূপ। তাই এইস টি এম এল সম্পর্কে জ্ঞান থাকা আবশ্যক।
আমিও এইস টি এম এল নিয়ে আলোচনা করতে চাইনি , কিন্তু সি এস এস কে শিখতে গেলে এইস টি এম এল চলে আসে। আসলে এইস টি এম এল , সি এস এস এর সাথে সম্পর্ক যুক্ত। একটি অপরটি ছাড়া চলতে পারে না। এখানে আমার কিছুই করার নেই। তাই হালকা একটু ধারনা আপনাদের দিয়ে রাখলাম। এতেই হবে , আমরা কাজ চালিয়ে নিতে পারব।
সি এস এস ( Css ) সাধারন স্ট্রাকচার কেমন হয় ? কিভাবে CSS তৈরি করবেন?
আমি নিচে একটি 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 এর CSS শিখব। এই ট্যাগ গুগল Seo এর কাজে লাগে। Seo অর্থাৎ সার্চ ইঞ্জিন সহজেই বুঝতে পারে h2 হল টাইটেল ট্যাগ। তাই আমরা সব সময় h2 Tag কে টাইটেলে ব্যবহার করব। তবে h2 Tag এর একটি সি এস এস তৈরি করি। চলুন দেখে নেই ...
h2.title{
font-color:#ffff;
font-size:15px;
font-family:none;
background:#0000;
padding:5px ;
margin:0px;
}
h2#title{
font-color:#fffff;
font-size:15px;
font-family:none ;
background:#0000;
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 DjSohagRana.Com
</title>
</head>
<body>
<!-- Html Tag Start By DjSohagRana.Com -->
<h2 class="title">Title One Going Here</h2>
<h2 id="title">Title Two Going Here</h2>
<!-- Html Tag End By DjSohagRana.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 ) ভিন্ন কিনা , নাকি একই ?
আসলে আইডি এবং ক্লাস এর মধ্যে কোন পার্থক্য নেই , এদের কাজ একই। আপনি আইডি বা ক্লাস যে কোন টি ব্যবহার করতে পারেন বা দুটিই ব্যবহার করতে পারেন। এটা আপনাদের ইচ্ছার উপর নির্ভর করছে।
আপনাদের মনে প্রশ্ন মনে হয় চলে এসেছে , আসলে আইডি কিংবা ক্লাস ভিন্ন ভিন্ন কিনা। হ্যা আমি আপনাদের এই কনফিউশন ও দূর করে দিতে চাই।
তবে এখানে আইডি ব্যবহার করলে সি এস এস লেখার সময় হ্যাস ( # ) এবং ক্লাস বুবহার করলে সি এস এস লেখার সময় ডট ( . ) লিখতে হয়।
ধন্যবাদ সকল বন্ধু আজকের টিউন এখানেই শেষ zকরছি।
Bye Bye টাটা