CSS Background ঃ
আমরা তো নিয়মিতই দেখি যে একটি ওয়েব সাইটের পেছনের রঙ এক রকম। কোন কোন ওয়েব সাইটের পেছনে আবার ইমেজ ও রয়েছে। কোথাও আবার একের অধিক ইমেজ রয়েছে। এসব কিছু সেট করা হয় CSS Background দিয়ে। একটি সম্পুর্ন ওয়েব পেইজ বা একটি নির্দিষ্ট এইচটিএমএল ইলিম্যান্ট বা ইলিম্যান্ট এর ছোট্ট একটা অংশের পেছনে কালার বা একটি ইমেজ সেট করার জন্য CSS Background ব্যবহার করা হয়। CSS Background দেওয়ার জন্য নিচের স্টাইল রুল গুলো আমরা ব্যবহার করতে পারি।
বিদ্রঃ এর আগের দুটি লেখা যদি না দেখে থাকেন তাহলে দেখে নিতে পারেন।
- background-color :একটি নির্দিষ্ট রঙ দেওয়ার জন্য ব্যবহৃত হয়।
- background-image : একট বা একাদিক ইমেজ দেওয়ার জন্য ব্যবহৃত হয়।
- background-repeat : ইমেজ ফাইলটি repeat করবে কি করবে না, করলে কিভাবে করবে তার রুল লেখা হয়।
- background-attachment : ব্যাকগ্রাউন্ডে ব্যবহৃত ইমেজটি স্ক্রোল করবে কি করবে না নাকি একটি নির্দিষ্ট জাগায় থাকবে তার রুল লেখা হয়।
- background-position : ইমেজটির পজিশন কোথায় হবে তার রুল লেখা হয়।
আমি চেষ্টা করব এ সব গুলোর উদাহরন একটা পেইজে দেওয়া জন্য। শুরু করি background-color দিয়ে।
background-color একটা ইলিম্যান্ট এর পেছনের রঙ কেমন হবে তাই দেখানো হয়। এবং লেখা হয় এভাবেঃ
h1{
background-color:red;
}
রঙ এর নাম এর পরিবর্তে রঙ এর কোড ও ব্যবহার করা যায়. এখানে গেলে এইচটিএমএল কালারের নাম ও কোড গুলো পাওয়া যাবে।
h1{
background-color:#808080;
}
background-image: background-image এইচটিএমএল ইলিম্যান্টে এর পেছনে একটা ইমেজ সেট করে। এখানে আমরা background-image দিয়ে আমাদের সম্পুর্ন সাইটের ব্যাকগ্রাউন্ড এ একটা ইমেজ সেট করব। তারজন্য আমরা লিখবঃ
body {
background-image: url(https://jakir.me/wp-content/uploads/2013/04/highway.jpg);
}
url দিয়ে ব্র্যাকেটের মধ্যে ইমেজটি কোথায় রয়েছে তা সেট করে দিতে হয়। তাই করলাম উপরে আমরা। যদি ইমেজটি আর html ফাইলটি একই ফোল্ডারে থাকে, তাহলে শুধু মাত্র ইমেজের নাম দিলেই হবে। যেমনঃ background-image: url(highway.jpg);
এবার আসি background-repeat নিয়ে।
আমাদের ইমেজটি যদি আমাদের ওয়েব পেইজ এর তুলনা অনেক ছোট হয় তাহলে দেখা যাবে যে ইমেজটি বার বার দেখাছে। আমরা চাইলে এটা বন্ধ করে দিতে পারি।
body {
background-image: url(https://jakir.me/wp-content/uploads/2013/04/highway.jpg);
background-repeat:no-repeat;
}
no-repeat দিলে ইমেজটি শুধু মাত্র একবার দেখাবে।
আমরা চাইলে একটি ডিরেকশন যেমন x অক্ষ বরাবর বা y অক্ষ বরারবর repeat করতে পারি। যেমন background-repeat:repeat-x দিলে x অক্ষ repeat করবে। background-repeat:repeat-y দিলে y অক্ষ repeat করবে।
background-position দিয়ে ইমেজটির পজিশন সেট করা হয়। যেমন background-position:center দেওয়া হলে ইমেজটি ওয়েব পেইজ এর মধ্য খানে থাকবে। background-position:top দিলে উপরের দিকে থাকবে। background-position:left লিখলে বামে থাকবে। background-position:right লিখলে ডানে। আবার background-position:top left; লিখলে উপরে এবং বাম পাশে দেখাবে। তেমনি background-position:top center; লিখলে উপরে এবং দুই পাশ থেকে মধ্য খানে দেখানে।
body {
background-image: url(https://jakir.me/wp-content/uploads/2013/04/highway.jpg);
background-repeat:no-repeat;
background-position:top center;
}
background-attachment দিয়ে ইমেজটি কি এক জাগায় স্থির থাকবে নাকি কন্টেন্ট স্ক্রোল করার সাথে সাথে উঠা নামা করবে তা ঠিক করা হয়। background-attachment এর ডিফল্ট মান হচ্ছে scroll, মানে কন্টেন্টের সাথে উঠা নামা করবে। background-attachment:fixed; দিয়ে দেখুন কি হয়। আবার background-attachment:scroll দিয়ে দেখুন কি হয়।
আমরা উপরের CSS Background এর সকল রুল দিয়ে একটি ওয়েব পেইজ তৈরি করতে পারি। উদাহরনটি দেখতে চাইলে এখানে ক্লিক করে দেখা যাবে।
কোড গুলোঃ
<!DOCTYPE html>
<head>
<title>ID Example</title>
<style>
p {
color:red;
}
#myid {
color:blue;
}
</style>
</head>
<body>
<h1> Hello web! </h1>
<p>This is a paragraph </p>
<p id="myid">This is another paragraph with an id </p>
<p>This is another paragraph with an id </p>
</body>
</html>
CSS Text Styling:
ওয়েব সাইট তো কত গুলো টেক্সট আর ইমেজের সমষ্টি তাই না? লেখা গুলোকে যে যত সুন্দর করে দেখাতে পারে তার ওয়েব সাইট তত সুন্দর হয়। css দিতে আমরা টেক্সটের যত বৈশিষ্ট / রুল রয়েছে তা নিচে দেওয়া হলো। পড়ে কিছু না বুঝলেও সমস্যা নেই, আমরা যখন উদাহরন দেখব তখন সব কিছু সহজেই বুঝা যাবে।
| Property | Description |
| color | লেখার রঙ দেওয়ার জন্য ব্যবহৃত হয়। |
| direction | আমরা ইংরেজী এবং বাংলা লিখি বাম থেকে ডানে, কোন কোন দেশের লেখা যেমন আরবী ডান থেকে বামে লিখতে হয়। এই ডান থেকে বামে হবে নাকি বাম থেকে ডান হবে তাই direction সিএসএস রুল দিয়ে সেট করা হয়। |
| letter-spacing | একটা বর্ণ থেকে আরেকটা বর্ণের দূরত্ব সেট করার জন্য এ property ব্যবহৃত হয়। |
| line-height | একটা লাইনের উচ্ছতা কতটুকু হবে তাই এটা দিয়ে সেট করা হয়। |
| text-align | লেখা গুলোর বিন্যাস/ align কিভাবে হবে, ডানে নাকি বামে নাকি মধ্য খানে তাই সেট করা হয়। |
| text-decoration | একটা লেখার নিছে বা উপরে বা মাঝখান দিয়ে একটা লাইন দেওয়ার জন্য ব্যহৃত হয়। |
| text-indent | পত্রিকায় আমরা প্রায় সময়ই দেখি প্রথম লাইনের শব্দটির আগে একটু গ্যাফ থাকে। এইচটিএমএল ফাইলে ঐরকম গ্যাফটা দেওয়া হয় text-indent দিয়ে। |
| text-transform | ছোট অক্ষরে বা বড় অক্ষতে লেখা গুলোকে পরিবর্তন করার কাজে ব্যবহৃত হয়। |
| word-spacing | লেখার প্রতিটি শব্দের মধ্যে ফাঁক দেওয়ার কাছে ব্যহৃত হয়। |
এগুলো ছাড়াও আরো কিছু Property রয়েছে।
CSS Text Color:
ইতিমধ্যে আমরা লেখার color পরিবর্তন করা দেখেছি। আবার দেখিঃ
p{
color:red;
}
যা সকল p ট্যাগ এর লেখা গুলোকে লাল রঙ পরিবর্তন করবে।রঙ এর নাম এর পরিবর্তে রঙ এর কোড ও দেওয়া যায় যা আমি এর আগের টিউটোরিয়ালে বলছিলাম।
CSS Text Direction:
আমরা ইংরেজী এবং বাংলা লিখি বাম থেকে ডানে, কোন কোন দেশের লেখা যেমন আরবী ডান থেকে বামে লিখতে হয়। এই ডান থেকে বামে হবে নাকি বাম থেকে ডান হবে তাই direction সিএসএস রুল দিয়ে সেট করা হয়। ডিফল্ট ভাবে সেট করা থাকে left-to-right. যেভাবে আমরা লিখি। আপনি যদি ডান থেকে বামে লেখে এমন কোন দেশের ওয়েব সাইট তৈরি করেন তাহলে আপনাকে right-to-left সেট করে দিতে হবে। আর তা সেট করেঃ
body{
direction:rtl;
}
rtl মানে right-to-left;
CSS Letter Spacing:
letter-spacing একটা বর্ণ থেকে আরেকটা বর্ণের দূরত্ব সেট করার জন্য এ property ব্যবহৃত হয়।
body{
letter-spacing:5px;
}
যত বেশি পিক্সেল দিব তত বেশি ফাঁক থাকবে দুটি বর্ণের মধ্যে। আবার যদি letter-spacing:-5px; দি, তাহলে একটা বর্ণ আরেকটা বর্নের উপর এসে পড়বে।
উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
p {letter-spacing:5px;}
h1 {letter-spacing:-3px;}
</style>
</head>
<body>.
<h1>This is a heading </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</body>
</html>
CSS Text Line Height:
line-height দিয়ে একটা লাইনের উচ্ছতা কতটুকু হবে তাই এটা দিয়ে সেট করা হয়। উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>
CSS Text Align :
text-align লেখা গুলোর বিন্যাস/ align কিভাবে হবে, ডানে নাকি বামে নাকি মধ্য খানে তাই সেট করা হয়। তিন ধরনের align করা যায়, center, left, right. সাধারন ভাবে সকল লেখা গুলো left align করা থাকে। উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.center{text-align:center}
.left {text-align:left}
.right {text-align:right}
</style>
</head>
<body>
<h1 class="center">This is centered text</h1>
<h1 class="left">This is left aligned text</h1>
<h1 class="right">This is right aligned text</h1>
</body>
</html>
CSS Text Decoration:
text-decoration দিয়ে একটা লেখার নিছে বা উপরে বা মাঝখান দিয়ে একটা লাইন দেওয়ার জন্য ব্যহৃত হয়। তিন ধরনের text-decoration করা যায়, underline , overline ও line-through। উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
#underline {text-decoration:underline;}
#overline {text-decoration:overline;}
#line_through{text-decoration:line-through;}
</style>
</head>
<body>
<h1 id="underline">a text with underline</h1>
<h1 id="overline">a text with overline </h1>
<h1 id="line_through">a text with line-through with it</h1>
</body>
</html>
CSS Text Indent:
text-indent পত্রিকায় আমরা প্রায় সময়ই দেখি প্রথম লাইনের শব্দটির আগে একটু গ্যাফ থাকে। এইচটিএমএল ফাইলে ঐরকম গ্যাফটা দেওয়া হয় text-indent দিয়ে। উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</body>
</html>
CSS Text Transform:
text-transform ছোট অক্ষরে বা বড় অক্ষতে লেখা গুলোকে পরিবর্তন করার কাজে ব্যবহৃত হয়। তিন প্রকার text-transform রয়েছে।
- Uppercase – সকল লেখাকে বড় হাতের অক্ষরে পরিনত করবে।
- Lowercase – সকল লেখাকে ছোট হাতের অক্ষরে পরিনত করবে।
- Capitalize – লেখার সকল শব্দের প্রথব বর্ণ বড় হাতের হবে।
উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">uppercase transformed text.</p>
<p class="lowercase">Lowercase Transformed Text</p>
<p class="capitalize">capitalize transformed text</p>
</body>
</html>
CSS Text Word Spacing:
word-spacing লেখার প্রতিটি শব্দের মধ্যে ফাঁক দেওয়ার কাছে ব্যহৃত হয়। উদাহরন হিসেবে নিচের কোড গুলো একটি এইচটিএমএল ফাইলে পেস্ট করে তারপর ব্রাউজারে দেখুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
p
{
word-spacing:30px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</body>
</html>
আজ মনে হয় অনেক বেশি লিখে পেলছি। তাই না? CSS Background এবং CSS Text এর আরো অনেক গুলো Property রয়েছে, নিজে নিজে আস্তে আস্তে ও গুলো শিখে নিতে পারবেন। আরেকদিন অন্যান্য স্টাইল নিয়ে লিখব। সবার জন্য শুভ কামনা।