সি এসএস কি (What is CSS)- CSS 1996 সালে W3C (ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম) দ্বারা তৈরি করা একটি কম্পিউটার ভাষা (Language) । CSS মুলত HTML এর বিভিন্ন Element, Tag এর ডিজাইন করা, পৃষ্টার ফরমেট করতে সহায়তা করে।
সুতরাং আমরা CSS কে এভাবে বলতে পারি যে, CSS হল stands for Cascading Style Sheets language। এটি HTML এর মত মার্কআপ ল্যাঙ্গুয়েজে লেখা উপাদানগুলিকে (Element) স্টাইলাইজ করতে ব্যবহৃত হয়। CSS সাইটের ভিজ্যুয়াল উপস্থাপনা থেকে বিষয়বস্তুকে আলাদা করে। আর এর জন্য CSS এবং HTML এর মধ্যে সম্পর্ক দৃঢ়।
HTML হল একটি সাইটের ভিত্তি এবং CSS হল একটি সম্পূর্ণ ওয়েবসাইটের সমস্ত নান্দনিকতা।
আরও পড়ুনঃ- নতুনদের জন্য এইচটিএমএল শেখার সহজ উপায় (HTML For Beginners The Easy Way) –১ম ক্লাস
CSS কিভাবে কাজ করে (How Does CSS Work?)- CSS একটি সাধারণ ইংরেজি ভিত্তিক সিনট্যাক্স ব্যবহার করে যা এটি পরিচালনা জন্য এক সেট নিয়ম অনুসরন করে। যেমন আমরা আগে উল্লেখ করেছি, HTML দিয়ে কখনই শৈলী বা নান্দনিক উপাদান ব্যবহার করা যায় না, শুধুমাত্র পৃষ্ঠার মার্কআপ ছাড়া। HTML শুধুমাত্র Website এর বিষয়বস্তু বর্ণনা করার জন্য তৈরি করা হয়েছিল।
উদাহরণ স্বরূপ: <p>This is a paragraph.</p>
কিন্তু আপনি কিভাবে একটি প্যারাগ্রাফ কে দৃষ্টি নন্দন (how do you style the paragraph) করবেন? এই ক্ষেত্রে CSS এর সিনট্যাক্স গঠন (CSS syntax structure is pretty simple) বেশ সহজ। CSS এ একটি নির্বাচক এবং একটি ঘোষণা ব্লক (Declaration Block) রয়েছে। যা দিয়ে আপনি একটি উপাদান (Element) নির্বাচন করুন এবং তারপর আপনি এটি দিয়ে কি করতে চান তা ঘোষণা করুন (লিখুন)।
যাইহোক, CSS এ কিছু নিয়ম আছে যা আপনাকে মনে রাখতে হবে। কাঠামোর নিয়মগুলি (The structure rules are pretty simple) বেশ সহজ, তাই চিন্তা করবেন না।
CSS এর নির্বাচক মূলত HTML এর উপাদানগুলিকে (Elements) নির্দেশ করে, যে গুলিকে আপনি ষ্টাইল ( style ) করতে চান, সেইগুলিতে ঘোষনা ব্লকে সেমিকোলন দ্বারা পৃথক করা হয়, সেখানে এক বা একাধিক ঘোষনা থাকতে পারে।
CSS এর এক একটি ঘোষনায় CSS property name এবং value থাকে এবং সেমিকোলন দিয়ে আলাদা করা হয়। CSS ঘোষণা সর্বদা একটি সেমিকোলন দিয়ে শেষ হয় এবং { } বন্ধনীর মধ্যে বেষ্টিত থাকে। আসুন একটি উদাহরণ দেখি:
এখানে <p> উপাদানকে (Element) নীল রঙের এবং বোল্ড (গাঢ়) করা হবে।
<style>
p {
color: blue;
text-weight: bold;
}
<style>
আবার <p> উপাদানকে (Element) কেন্দ্রে সারিবদ্ধ ( Center Alignment) হবে, 16x চওড়া (Wide) এবং গোলাপী (pink Color) হবে।
<style>
p {
text-align: center;
font-size: 16px;
color: pink;
}
</style>
CSS দিয়ে কি ভাবে আলাদা আলাদা স্টাইল (Styles) করা হয়? যেমনঃ- ইনলাইন, এক্সটার্নাল এবং ইন্টারনাল (the different styles of CSS. They are Inline, External and Internal)-
অভ্যন্তরীণ ষ্টাইল (Internal style)- এইভাবে করা CSS ষ্টাইলগুলি প্রতিবার একটি সম্পূর্ণ ওয়েবসাইট রিফ্রেশ করার সময় লোড হয়, যা লোড হওয়ার সময় বাড়িয়ে দিতে পারে। উপরন্তু, আপনি একাধিক পৃষ্ঠায় একই CSS ষ্টাইল ব্যবহার করতে পারবেন না কারণ এটি একটি একক পৃষ্ঠার মধ্যে থাকে। অবশ্য এতে কিছু সুবিধাও আছে। এক পৃষ্ঠায় সবকিছু থাকা, একটি টেমপ্লেট ভাগ করা সহজ করে তোলে।
অভ্যন্তরীণ ষ্টাইল এর ব্যবহার (Internal style of use)- How can I Use Internal style of CSS? Google trend এই Search ট্রামটি খুব বেশি পরিলক্ষিত হয়। আসলেইতো CSS এ Internal style কিভাবে ব্যবহার করব? প্রথমে আপনার HTML Editor আসুন এবার HTML এর Head tag <head> <head> এর মধ্যে Style Code টি লিুখুন। যেমন-
<style type="text/css">
এবার একটি নতুন লাইনে CSS এর নিয়োমিত Code লিখুন-
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
এবার Closing tag লিখুন- </style>
এখন সব Code লিখা শেষে আপনার HTML file টি হবে এইরকম-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
padding: 60px;
}
</style>
</head>
<body>
<h1>Hostinger Tutorials</h1>
<p>This is our paragraph.</p>
</body>
</html>
এক্সটারনাল স্টাইল (External Style)- সবকিছু .css ফাইলে বাহ্যিকভাবে (External) করা হয়। এর মানে হল আপনি একটি পৃথক ফাইলে সমস্ত স্টাইলিং করতে পারেন এবং আপনার পছন্দসই যেকোনো পৃষ্ঠায় CSS প্রয়োগ করতে পারেন। বহিরাগত শৈলী (External Style) ওয়েবসাইটের লোডিং সময় উন্নত করতে পারে।
(External CSS) বাহ্যিক CSS ব্যবহার করতে এই পদক্ষেপগুলি অনুসরণ করুন:
টেক্সট এডিটর (Text Editor হিসাবে Notepad++ ব্যবহার করতে পারেন ) দিয়ে একটি নতুন .css ফাইল তৈরি করুন এবং (Style) শৈলীর নিয়ম যোগ করুন। টেক্সট এডিটর দিয়ে একটি নতুন .css ফাইল তৈরি করুন এবং শৈলীর নিয়ম যোগ করুন। যেমন-
.xleftcol {
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
}
আপনার HTML শীটের <head> বিভাগে, <title> ট্যাগের ঠিক পরে আপনার বাহ্যিক .css ফাইলে একটি রেফারেন্স যোগ করুন:
<link rel="stylesheet" type="text/css" href="style.css" />
অবশ্যই আপনার .css ফাইলের নামের সাথে style.css পরিবর্তন করতে ভুলবেন না।
ইনলাইন ষ্টাইল (Inline style)- ইনলাইন CSS একটি নির্দিষ্ট HTML উপাদানকে (Element) স্টাইল করতে ব্যবহৃত হয়। এই CSS শৈলীর (style) জন্য, আপনাকে নির্বাচকদের (without using selectors) ব্যবহার না করে শুধুমাত্র প্রতিটি HTML ট্যাগে স্টাইল অ্যাট্রিবিউট (you’ll only need to add the style attribute to each HTML tag) যোগ করতে হবে।
অবশ্যই এই CSS প্রকারটি পেশাজীবিদের (Professional web developer) দের জন্য সুপারিশ করা হয় না, কারণ প্রতিটি HTML ট্যাগ আলাদাভাবে স্টাইল করা প্রয়োজন। আপনি শুধুমাত্র ইনলাইন CSS ব্যবহার করলে আপনার ওয়েবসাইট পরিচালনা করা খুব কঠিন হয়ে যেতে পারে।
যাইহোক, HTML-এ ইনলাইন CSS কিছু পরিস্থিতিতে কার্যকর হতে পারে। উদাহরণস্বরূপ, এমন ক্ষেত্রে যেখানে আপনার CSS ফাইলগুলিতে অ্যাক্সেস নেই বা শুধুমাত্র একটি উপাদানের (Element) জন্য শৈলী (Style) প্রয়োগ করতে হবে।
আসুন একটি উদাহরণ দেখে নেওয়া যাক। এখানে, আমরা <p> এবং <h1> ট্যাগে একটি ইনলাইন CSS যোগ করি:
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
</html>
উপসংহার Conclusion -
আসুন আমরা এখানে CSS সম্পর্কে যা শিখেছি এবং কীভাবে এটি ওয়েব পৃষ্ঠাগুলির নান্দনিকতার সাথে সাহায্য করে তা সংক্ষিপ্ত করি:
এইচটিএমএল এর মত অন্যান্য মার্কআপ ভাষার সাথে একত্রে কাজ করার জন্য CSS তৈরি করা হয়েছিল। এটি একটি পৃষ্ঠা স্টাইলাইজ করতে ব্যবহৃত হয়।
সিএসএস বাস্তবায়নের তিনটি শৈলী রয়েছে এবং আপনি একযোগে একাধিক পৃষ্ঠার জন্য এক্সটার্নাল স্টাইল ব্যবহার করতে পারেন।
আপনি আজকাল কিছু ধরণের CSS বাস্তবায়ন না দেখে বেশিদূর যেতে পারবেন না কারণ এটি মার্কআপ ভাষার মতোই প্রয়োজনীয়।
এই Article এ, আপনি তিন ধরনের CSS-এর মধ্যে পার্থক্য শিখেছেন: অভ্যন্তরীণ, বহিরাগত এবং ইনলাইন। এখানে সংকলন আছে:
অভ্যন্তরীণ বা এমবেডেড (Internal or embedded) — HTML নথির <head> বিভাগে <style> ট্যাগ যোগ করুন।
বাহ্যিক (External) — একটি পৃথক .css ফাইলে HTML শীট লিঙ্ক করুন
ইনলাইন (Inline) — নির্দিষ্ট উপাদানের জন্য CSS নিয়ম প্রয়োগ করুন।
 –১ম ক্লাস){kind=link}
3 Comments
I think this article very helpful for beginners. Thank you.
ReplyDeleteHi,
ReplyDeleteThis is great article for skill development of CSS. I look this site is very helpful.
Great. This is article very helpful for me and new Learner CSS and web development. Thank you.
ReplyDelete