ওয়েব পেজে টেক্সটকে সাজানোর জন্য টেক্সট এলাইনমেন্ট ব্যবহার করা হয়। টেক্সটকে পেজের বাম পাশে রাখার জন্য Declaration করতে হবে text-align:left; অনুরূপভাবে ডান পাশে রাখার জন্য Declaration করতে হবে text-align:right; মধ্যস্থানে রাখার জন্য Declaration করতে হবে text-align:center; । যদি টেক্সট এর প্রতিটা লাইন একই আকারে সাজাতে চাই তাহলে Declaration করতে হবে text-align:justify ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
#right{text-align:right;}
#left{text-align:left;}
#center{text-align:center}
#justify{text-align: justify;}
</style>
</head>
<body >
<h2>Example of right align </h2>
<p id="right">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of left align </h2>
<p id="left">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of center align </h2>
<p id="center">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of justify align </h2>
<p id="justify">
We are bangladeshi Hostgator hosting provider.
We are bangladeshi Hostgator hosting provider.
We are bangladeshi Hostgator hosting provider.
</p>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
সি এস এস এর সকল বাংলা টিউটোরিয়াল
- ১.সিএসএস কি?
- ২.ট্যাগ সিলেক্টর
- ৩.ক্লাস সিলেক্টর
- ৪.আইডিসিলেক্টর
- ৫.কোড লেখার পদ্ধতি
- ৬.ইমবেডেড স্টাইল শীট
- ৭.এক্সটার্নাল স্টাইল শীট
- ৮.ইন-লাইন স্টাইল শীট
- ৯.ব্যাকগ্রাউন্ড
- ১০.টেক্সট কালার
- ১১.টেক্সট এলাইনমেন্ট
- ১২.টেক্সট ডেকরেশন
- ১৩.টেক্সট ট্রান্সফরমেশন
- ১৪.ফন্ট ফ্যামিলি
- ১৫.ফন্ট সাইজ
- ১৬.ফন্ট ভেরিয়েন্ট
- ১৭.ফন্ট ওয়েট
- ১৮.লিংক
- ১৯.অর্ডার লিস্ট
- ২০.আনঅর্ডার লিস্ট
- ২১.লিস্টে ইমেজের ব্যবহার
- ২২.টেবিল এবং টেবিল বর্ডার
- ২৩.টেবিল ওয়াইডথ এন্ড হাইট
- ২৪.টেবিল টেক্সট এলাইনমেন্ট
- ২৫.টেবিল কালার
- ২৬.বর্ডার এবং বর্ডার স্টাইল
- ২৭.বর্ডার ওয়াইডথ
- ২৮.বর্ডার কালার
- ২৯.পৃথক বর্ডার
- ৩০.মার্জিন
- ৩১প্যাডিং
- ৩২.আউট লাইন এবং আউট লাইন স্টাইল
- ৩৩.আউট লাইন ওয়াইডথ
- ৩৪.আউট লাইন কালার
- ৩৫.বক্স মডেল
- ৩৬.গ্রুপিং সিলেক্টর
- ৩৭.নেস্টিং সিলেক্টর
- ৩৮.ডাইমেনশন
- ৩৯.প্রদর্শণ পদ্ধতি
- ৪০.ডিসপ্লে ইন লাইন
- ৪১.ডিসপ্লে ব্লক
- ৪২.ভিজিবিলিটি
- ৪৩.ভিজিবিলিটি হিডেন
- ৪৪.ভিজিবিলিটি কলাপস্
- ৪৫.অবস্থান
- ৪৬.পজিশন স্ট্যাটিক
- ৪৭.পজিশন ফিক্সড
- ৪৮.পজিশন রিলেটিভ
- ৪৯.পজিশন এবসলিউট
- ৫০.ওভার ফ্লো
- ৫১.ওভার ফ্লো ভিজিবল (
- ৫২.ওভার ফ্লো হিডেন
- ৫৩.ওভার ফ্লো অটো
- ৫৪.ওভার ফ্লো স্ক্রল
- ৫৫.ক্লিপ
- ৫৬.অটো ক্লিপ এবং রেকটেংগুলার ক্লিপ
- ৫৭.জেড ইনডেক্স
- ৫৮.ফ্লোটিং
- ৫৯.বাম দিকে ফ্লট
- ৬০ডান দিকে ফ্লট
- ৬১.ফ্লটিং দ্বারা প্যারাগ্রাফে ইমেজের অবস্থান নির্দেশ
- ৬২.এলাইন
- ৬৩.মার্জিন প্রোপার্টি দ্বারা সেন্টার এলাইন
- ৬৪.পজিশন প্রপার্টি দ্বারা লেফট বা রাইট এলাইন
- ৬৫.ফ্লট প্রোপার্টি দ্বারা লেফট বা রাইট এলাইন
- ৬৬.কার্সার ইফেক্ট
- ৬৭.চাইল্ড সিলেক্টর
- ৬৮.সিউডো ক্লাস
- ৬৯.এংকর সিউডো ক্লাস
- ৭০.ফাস্ট চাইল্ড সিউডো ক্লাস
- ৭১.ল্যাঙ্গুয়েজ সিউডো ক্লাস
- ৭২.শিরোনামে সিউডো ক্লাসের ব্যবহার
- ৭৩.সাধারণ শিরোনামে সিউডো ক্লাসের ব্যবহার
- ৭৪.সিউডো ইলিমেন্ট
- ৭৫.প্রথম অক্ষর সিউডো ইলিমেন্ট
- ৭৬.প্রথম লাইন সিউডো ইলিমেন্ট-
- ৭৭.বিফোর সিউডো ইলিমেন্ট
- ৭৮.আফটার সিউডো ইলিমেন্ট
- ৭৯. ইমেজ গ্যালারি (Image Gallery)
- ৮০.ছবির অপাসিটি
- ৮১.ইমেজ স্প্রাইটস্ (Image Sprites)
- ৮২.ইমেজ স্প্রাইটস্ কেন করা হয়
- ৮৩.ইমেজ স্প্রাইটস্ করার কৌশল
- ৮৪.ইমেজ স্প্রাইটস্ করার দ্বিতীয় কৌশল
- ৮৫.মিডিয়া টাইপ
- ৮৬.নেভিগেশন
- ৮৭.নেভিগেশন বারের সাধারণ গঠন
- ৮৮.নেভিগেশন বারের বাটনে লিংক যুক্ত করন
- ৮৯.নেভিগেশন বারের div উপাদানের ডিজাইন
- ৯০.নেভিগেশন বারে ul,li উপাদানের ডিজাইন
- ৯১.নেভিগেশন বারে a উপাদানের ডিজাইন
- ৯২.নেভিগেশন বারের মাউস ইফেক্ট
- ৯৩.নেভিগেশন বারে ইমেজ রিপিটেশন
- ৯৪.ভার্টিক্যাল নেভিগেশন বার
- ৯৫.হরিজন্টাল নেভিগেশন বার
- ৯৬.ইমেজ গ্যালারি
- ৯৭.ইমেজ গ্যালারির বৈশিষ্ট্য সমূহ
- ৯৮.ইমেজ গ্যালারির ইমেজের গঠন
- ৯৯.সম্পূর্ণ ইমেজ গ্যালারির গঠন
- ১০০.সম্পূর্ণ ইমেজ গ্যালারির এরিয়া,ব্যাকগ্রাউন্ড এবং বর্ডার নির্ধারণ
- ১০১.ইমেজ গ্যালারিতে নির্দিষ্ট আকৃতির ইমেজ সংযোজন
- ১০২.সাধারণ অবস্থায় ইমেজ গ্যালারিতে বড় আকৃতির ইমেজ লুকানো
- ১০৩.ইমেজ গ্যালারিতে ছোট ইমেজের বর্ডার এবং মার্জিন
- ১০৪.গ্যালারী স্ক্রিন
- ১০৫.ইমেজ গ্যালারীর ছোট ইমেজের বর্ডার পরিবর্তন
- ১০৬.ইমেজ গ্যালারীতে বড় ইমেজ প্রদর্শন
- ১০৭.ইমেজ গ্যালারীতে বড় ইমেজের জন্য স্ট্যাইল তৈরি
- ১০৮.ইমেজ গ্যালারীতে বড় ইমেজের নিচে ইমেজ সম্পর্কিত লেখা প্রদর্শন
- ১০৯.ইমেজ গ্যালারী পূর্ণাঙ্গ প্রজেক্ট
- ১১০.ওয়েব পেজে ইমেজ গ্যালারী যুক্ত করার প্রণালী
- ১১১ইমেজ স্প্রাইটস্ এর মাধ্যমে বাটন তৈরি-(১ম অংশ)
- ১১২.ইমেজ স্প্রাইটস্ বাটনের HTML স্ট্রাকচার এবং লিংক তৈরি-(২য় পর্ব)
- ১১৩.ইমেজ স্প্রাইটস্ এর মাধ্যমে বাটন তৈরি-(শেষ অংশ)