ওয়েব সাইটের প্রধান উপাদান হচ্ছে টেক্সট। সৌন্দর্য বৃদ্ধির জন্য এবং বিশেষ কিছু সুবিধা পাবার জন্য css এর মাধ্যমে টেক্সট এর স্টাইল তৈরি করা হয়। টেক্সট এর স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়। এগুলো হচ্ছে
- টেক্সট কালার (Text Color)
- টেক্সট এলাইনমেন্ট (Text Alignment)
- টেক্সট ডেকরেশন (Text Decoration)
- টেক্সট ট্রান্সফরমেশন (Text Transformation)
টেক্সট কালার (Text Color)
আমরা সাধারণত HTML এর মাধ্যমে টেক্সট ব্যবহারের জন্য <P>, <h1>,<h2>,<a> সহ আরো কিছু ট্যাগ ব্যবহার করি। এসকল টেক্সট এর কালার নির্ধারণের জন্য Declaration করতে হবে p { color: #FC9 } বা এর অনুরূপ। p এর স্থানে অন্যান্য ট্যাগের ক্ষেত্রে h1, h2 , a, body, অথবা কোন ট্যাগের id বা class বসতে পারে। টেক্সট এর কালার নির্ধারণের জন্য তিন ধরণের Declaration হতে পারে। যেমন
p { color: #FC9}
p {color:blue;}
p {color:rgb(255,0,0);}
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
h1{color:#C00;}
p{color:blue;}
.mar{color:rgb(150,0,0); font-size:25px;}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p>
We are bangladeshi Hostgator hosting provider.<br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
</p>
<marquee>
<p class=”mar”> 24 / 7 Support</p>
</marquee>
</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 স্ট্রাকচার এবং লিংক তৈরি-(২য় পর্ব)
- ১১৩.ইমেজ স্প্রাইটস্ এর মাধ্যমে বাটন তৈরি-(শেষ অংশ)