টিউটরিয়াল শুরুর আগে ধরে নিচ্ছি যে আপনি এইচটিএমএল পুরোপুরি জানেন। আর না জানলে আগে এইচটিএমএল ভাল ভাবে শিখুন তারপর সি এস এস শেখা শুরু করুন।
আমার এইচটিএমএল টিউটোরিয়াল গুলো ঃ
ওয়েব ডিজাইন শিখুন খুব সহজে। পর্ব – ১ঃ প্রাথমিক ধারণা
এইচটিএমএল এর পর্ব ১ এ বাকি সব এইচটিএমএল টিউটোরিয়াল এর লিঙ্ক আছে।
সি এস এস কি?
সি এস এস হল (Cascading Style Sheets) হল স্টাইল যেটা দিয়ে আপনি আপনার সাইট কে স্টাইলিশ করতে পারেন। ধরেন, আপনি পুরো মানুষ টা একটা ওয়েবসাইট। এখানে এইচটিএমএল হবে আপনার দেখের মুল কঙ্কাল আর সি এস এস হবে আপনার দেহের মাংস আর চামড়া। তাহলে বুঝুন এইচটিএমএল সাথে সি এস এস এর গুরুত্ব কত টুকু। আপনার কাজের অনেক সময় বাচিয়ে দেবে এই সি এস এস।
এবার কাজের কথায় আসি। প্রত্যেক ল্যাঙ্গুয়েজ এর আলাদা আলাদা এক্সটেন্সান থাকে। সি এস এস এর এক্সটেন্সান হল .css।
কিভাবে সি এস এস ব্যবহার করব?
সি এস এস ৩ ভাবে ব্যবহার করা যায়।
- External style sheet- আপনি আলাদা একটি সিএসএস ফাইল তৈরি করে এইচটিএমএল এ যুক্ত করবেন। আপনি যখন এখই স্টাইল বিভিন্ন এলিমেন্ট এ ব্যবহার করবেন তখন এই সিএসএস লাগবে।
- Internal style sheet- আপনি একই এইচটিএমএল ফাইল এ এবং পুরো কোডটা হেড ট্যাগ এ সিএসএস কোডগুলো যোগ করবেন। যখন আপনার কোনও ইউনিক পেজের জন্য ইউনিক কোড দরকার তখন আপনি এই সিএসএস ব্যবহার করবেন।
- Inline style- এটি কোনও এলিমেট এর সাথে যোগ করা হয়।আপনি যখন শুধু একটি মাত্র এলিমেন্ট এ ইউনিক স্টাইল ব্যবহার করবেন তখন এটি লাগবে।
External style sheet
- প্রথমে আপনি একটি এইচটিএমএল ফাইল তৈরি করুন। ফাইল এ নিচের কোড গুলো লিখুন।
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>This is title of this tutorial </title>
</head>
<body>
<h1>This is my experimental stylesheet tutorial</h1>
</body>
</html>
উপরের কোডটি ব্রাউজার এ রান করালে নিচের স্ক্রিনশট এর মত আসবে।
- প্রথমে আপনি আপনার নোটপ্যাড ++ ওপেন করুন। তারপর File> new তে ক্লিক করুন। নতুন একটি পেজ আসবে।
- এরপর File>Save তে ক্লিক করুন। নিচের ছবির মত ডায়ালগ বক্স আসবে। তখন style.css লিখে Save বাটনে ক্লিক করুন। মনে রাখবেন, "style এর বদলে যে কোনও কিছু দিতে পারেন কিন্তু .css দিতে ভুলবেন না। "
- ফাইলে নিচের কোডটি লিখুনঃ
body{background-color: #000000;
color: #ffffff;}
- এবার স্টাইল ফাইল টি এইচটিএমএল এর সাথে যুক্ত করতে হবে। যুক্ত করতে এইচটিএমএল ফাইল এর<head>Here</head> ট্যাগের মধ্যে নিচের কোড টি বসিয়ে দিন।
<link href="style.css" type="text/css" rel="stylesheet">
- এখানে href="style.css" এর style.css এর জায়গায় আপনার সিএসএস ফাইল এর লিঙ্ক দিন। মানে আপনার সিএসএস ফাইল এর অবস্থান (আপনি যেখানে আপনার সিএসএস ফাইল সংরক্ষণ করেছেন)। আমি একই ফোল্ডার এর মধ্যে সিএসএস ও এইচটিএমএল রেখেছি। তাই শুধুমাত্র style.css লিখেছি।
- এবার আপনার এইচটিএমএল ফাইল টি ব্রাউজার এ রান করান। দেখবেন নিচের মত এসেছেঃ
- উপরের স্ক্রিনশট ও নিচের স্ক্রিনশট এর মধ্যে পার্থক্য হল উপরের ছবিতে ব্যাকগ্রাউন্ড সাদা আর টেক্সট কালার কালো। কিন্তু নিচের ছবিতেউপরের ছবিতে ব্যাকগ্রাউন্ড কালো আর টেক্সট কালার সাদা।
- আপনি দেখুন আমি স্টাইল ফাইল এ কি লিখেছিলাম, ওখানে body সিলেক্টর ব্যবহার করেছিলাম। তার মানে ওয়েব সাইটের বডিতে স্টাইল টি কাজ করবে। বডিতে আমি ব্যাকগ্রাউন্ড কালার কালো আর টেক্সট কালার সাদা দিয়েছিলাম।
- সবসময় এইচটিএমএল ফাইল ও সিএসএস ফাইল একই ফোল্ডার এর মধ্যে রাখবেন।
আজ এ পর্যন্তই। ভাল থাকবেন। আগামিতে বাকি সিএসএস এর টিউটোরিয়াল গুলো নিয়ে হাজির হব। কোনও সমস্যা হলে টিউমেন্ট করে জানাবেন।
পূর্বে প্রকাশিতঃ এখানে।
![jQuery for Web Design [পর্ব-০১] :: jQuery কি কেন কোথায় এবং এর ব্যবহার বিধি Syntax](https://dnc.techtunes.io/tDrive/tuner/2018/03/techtunes_f51135ca21003140d56db2a587d727ab-368x207.jpg "jQuery for Web Design [পর্ব-০১] :: jQuery কি কেন কোথায় এবং এর ব্যবহার বিধি Syntax")
