Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
ওয়েবপেজে স্টাইলশীটের মাধ্যমে অতিসহজেই ওয়েব পেজকে মনোগ্রাহী রুপে উপস্থাপন করা যায়। এইচ টি এম এল এর মাধ্যমে একটি ওয়েব পেইজ বাহ্যিক রূপ পায় আর সি এস এস এর মাধ্যমে এর সৌন্দর্য পরিপূর্ণতা লাভ করে। মূলত সি এস এস ব্যবহারে পেইজ ডিজাইনিং এর কাজে প্রচুর সময় বাঁচে।ওয়েব ডিজাইনের দক্ষতা উপরের ধাপে উন্নিত করতে চাইলে Cascading Style Sheets (CSS) এর কোন বিকল্প নেই।সিএসএস একই ডকুমেন্টে একাধিকবার ব্যবহার হতে পারে এবং ডকুমেন্টের বিভিন্ন অংশে বিভিন্ন স্টাইল ব্যবহার করা যেতে পারে। স্টাইলশীটের ব্যবহারে ডকুমেন্টের স্টাইল বদলে যাবে কিন্তু স্টাকচার অপরিবর্তিত থাকবে। একই স্টাইলশীট একাধিক পেজে কিংবা একাধিক স্টাইলশীট একই পেজে ব্যবহার করা যেতে পারে। আপনার স্টাইলশীট (যেখানে আপনি কোডগুলো লিখবেন) টি সম্পুর্নভাবে এইচটিএমএল ডকুমেন্ট হতে পৃথক হবে যখন আপনি সিএসএস এবং এইচটিএমএল এ দক্ষতা অর্জন করতে পারবেন। আর একটি কথা না বললেই নয় সিএসএস শেখার আগে অবশ্যই এইচটিএমএল সম্বন্ধে ভাল জানতে হবে। এই বইটিতে আমরা ধারাবাহিকভাবে সিএসএস নিয়ে আলোচনা করব।
যা যা প্রয়োজন হবেঃ
সিএসএস লেখার জন্য আলাদা কোন টেক্সট এডিটর সফটওয়্যার ব্যবহার না করলেও হবে, আপনার কম্পিউটারে Notepad নামে যে টেক্সট এডিটর আছে সেখানেই কোড লিখতে পারবেন। তবে নোটপ্যাডের উন্নত সংস্করণ Notepad++ বা আরও উন্নত এডিটর যেখানে আপনি একই সাথে কোড লিখতে ও তার আউটপুট দেখতে পারবেন যেমন- Adobe Dreamweaver, HTML Kit ব্যবহার করতে পারেন। আপাতত আমি আপনাদের Notepad++ ব্যবহার করতে বলব। এবার সিএসএস কোডকে রান করানোর জন্য যেকোন একটি ব্রাউজার হলেই হবে। যেমনঃ Internet Explorer, Mozilla Firefox, Google Chrome ইত্যাদি। তৈরিকৃত সিএসএস ফাইলটি .css Extension দিয়ে সেভ করুন।
সিএসএস দ্বারা যেসকল কাজ করা যায়ঃ
১ সিএসএস এর মাধ্যমে এইচটিএমএল এ তৈরীকৃত পেজটি আরও দৃষ্টিনন্দন করা যায়।
২ কিছু সিএসএস কোড পরিবর্তন করে সম্পুর্নভাবে সাইটের restyle করা যায়।
সিএসএস সাধারন গঠনঃ
সিএসএস এর গঠনকে দুটি অংশে ভাগ করা যায়। একটি হল সিলেক্টর এবং অন্যটি হল এক বা একাধিক ডিকলারেশন। নিচে সাধারণ গঠনের চিত্র দেওয়া হল-
সিলেক্টর হল সাধারণ HTML এলিমেন্ট (h1⇒h6, p etc)
ডিকলারেশনের আবার দুইটি অংশ থাকবে-
Declaration={Properties: Value } Property
একাধিক Declaration থাকতে পারে যা সেমিকোলন দিয়ে পৃথক থাকবে।
আরও সহজ ভাবে লেখা যায়-
"HTML tag" { "CSS Property" : "Value" ; } Value
স্টাইলশীট ব্যবহারের পদ্ধতিঃ
এইচটিএমএল ডকুমেন্টে স্টাইলশীট ব্যবহারের তিনটি পদ্ধতি রয়েছে -internal, external এবং inline। একটা এইচটিএমএল পেজে <head> ট্যাগের ভিতর <style> ট্যাগ দিয়ে সিএসএস কোড যোগ করে পেজ স্টাইলিং করা যায়-এটা হচ্ছে ইন্টারনাল সিএসএস। আর যদি সিএসএস কোড বেশি হয়ে যায় তখন সিএসএস কোড আলাদা ফাইলে লেখা হয় এবং <head> ট্যাগের ভিতর <link> ট্যাগ দিয়ে সংযুক্ত করা হয়-এই পদ্ধতি হচ্ছে এক্সটার্নাল সিএসএস। আমরা ওয়েব পেজ ডিজাইন করতে এক্সটার্নাল সিএসএস বেশি ব্যবহার করব। আর এইচটিএমএল-এর প্রতিটা এলিমেন্টের সাথে এককভাবে স্টাইল নির্ধারণ করা হল-ইনলাইন সিএসএস। যে কোন এইচটিএমএল ডকুমেন্টে আপনি স্টাইলশীট ব্যবহার করতে পারেন।এখন আমরা ধরাবাহিকভাবে এই তিনটি পদ্ধতি নিয়ে আলোচনা করব:
১.ইন্টারনাল সিএসএসঃ
ইন্টারনাল সিএসএস সাধারণত তখনই ব্যবহার করা হয় যখন একটি এইচটিএমএল ডকুমেন্টের জন্য একটি ডিজাইন দরকার। ইন্টারনাল সিএসএস-এ <head> ট্যাগের ভিতর <style> ট্যাগ দিয়ে সিএসএস কোড যোগ করা হয়।যেমন-
<html>
<head>
<style type="text/css">
h1{color:#ff00ff;}
p{word-spacing:10px;}
</style>
<body>
<h1>My first CSS Codeing</h1>
<p>
CSS stands for Cascading Style Sheets. Styles define how to display HTML elements. Styles were added to HTML 4.0 to solve a problem. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files
</p>
</body>
</html>
উপরের কোডগুলো index.html নামে সেভ করে রান করে আউটপুট দেখুন।
.এক্সটার্নাল সিএসএসঃ
সবচেয়ে ভাল হয় যদি আপনারা সিএসএস কে এইচটিএমএল হতে পৃথক রাখেন, আর এটাই হল এক্সটার্নাল সিএসএস। যখন একটি সিএসএস কোড অনেক ডকুমেন্টের জন্য ব্যবহার করা হয় তখন এক্সটার্নাল সিএসএস উত্তম। এক্সটার্নাল সিএসএস -এ সিএসএস ফাইলকে <head> ট্যাগের ভিতর <link> ট্যাগ দিয়ে সংযুক্ত করা হয়। যেমন-
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
এক্সটার্নাল সিএসএস ফাইলটি শুধুমাত্র সিএসএস code ধারন করে এবং এই ফাইলটিকে ".css" ফাইল extension দিয়ে সেভ করা হয়। একটি উদাহরণ দেখুন-
H3 {color:#FF0000;}
p {background:#00F;text-align:center; }
এবার উপরের কোডগুলো style.css নাম দিয়ে সেভ করুন। এরপর নিচের মত করে এইচটিএমএল ফাইলের সাথে সিএসএস ফাইলটিকে লিংক করে দিন।
<html>
<head>
<link rel="stylesheet” type=”text/css” href=”style.css">
</head>
<body>
<h3>A white Header</h3>
<p>This paragraph has a blue font.
The background color of this page is gray because we changed it with CSS!</p>
</body>
</html>
তারপর এইচটিএমএল ফাইল টিকে index.html হিসাবে একই ফোল্ডারে অর্থাৎ যেখানে সিএসএস ফাইল আছে সেখানে সেভ করে index.html ফাইলটি রান করে আউটপুট দেখুন।
৩.ইনলাইন সিএসএসঃ
ডকুমেন্টের প্রতিটি এইচটিএমএল ট্যাগের সাথে Style এট্রিবিউট ব্যবহার করে ডকুমেন্টে স্টাইল নির্ধারণ করাই হল ইনলাইন সিএসএস । ইনলাইন সিএসএস ক্ষেত্রে Style নির্দেশ দেয়ার সময় Type Attribute ডিকলারেশন প্রয়োজন হয় না এবং দ্বিতীয় বন্ধনী {} এর বদলে উদ্ধৃতি চিহ্ন ব্যবহার করা হয়। নিচের উদাহরণে দেখুন-
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
এক্সটার্নাল বা ইন্টারনাল সিএসএস হতে ইনলাইন সিএসএস এর প্রাধান্য বেশি। এর অর্থ হচ্ছে এক্সটার্নাল বা ইন্টারনাল সিএসএস দ্বারা স্টাইল নির্দেশিত থাকলেও আপনি ইনলাইন সিএসএস দ্বারা ঐ স্টাইল override করতে পারেন। যাহোক, ইনলাইন সিএসএস যা সিএসএস এর সঠিক উদ্দেশ্য হতে বিচ্যুতি ঘটায় তাই এটা আংশিকভাবে ব্যবহার করা উচিত।
নোটঃ যদি এক্সটার্নাল সিএসএস ফাইলের লিংক ইন্টারনাল সিএসএস-এর পরে স্থাপন করা হয় তবে এক্সটার্নাল সিএসএস, ইন্টারনাল সিএসএস-কে override করবে।
মন্তব্য যোগ করাঃ
মন্তব্য যোগ করা যে কোন ল্যাংগুয়েযের একটি সাধারন বিষয়। সিএসএস-এ মন্তব্য "/*" দিয়ে শুরু হয় এবং "*/" দিয়ে শেষ হয়। যেমন-
/*This is a comment* /
{text-align: center; /*This is another comment */ color: black; font-family: arial; }
সিএসএস টেক্সট প্রপার্টি
সিএসএস-এর বেশ কিছু প্রপার্টি সরাসরি টেক্সটকে নিয়ন্ত্রন করে। একটি ওয়েব পেজে হেডিং হিসেবে বা প্যারাগ্রাফ হিসেবে বা অন্য কিছু হিসেবে অনেক অনেক টেক্সট থেকে থাকে। আর ওয়েব পেজকে সাজাতে এই সকল টেক্সটের স্টাইল নির্ধারণ করা আবশ্যক। সিএসএস টেক্সট প্রপার্টির মাধ্যমে আপনি টেক্সট এর spacing, decoration, color, alignment সহ আরও অনেক কিছুই নিয়ন্ত্রন করতে পারেন। আমরা এই অধ্যায়ে সিএসএস টেক্সট প্রপার্টি নিয়ে বিস্তারিত আলোচনা করবো।
10.vertical-align 11.white-space
12.word-spacing
টেক্সটের উলম্ব এলাইনমেন্ট নির্দেশ করে।
Specifies how white-space inside an element is handled এর মাধ্যমে পাশাপাশি শব্দগুলোর মধ্যে white space এর পরিমান কমানো বা বাড়ানো যায়।
১.টেক্সট কালার প্রপার্টিঃ
ওয়েব পেজের যে কোন টেক্সটের কালার নির্ধারণ করতে কালার প্রপার্টি ব্যবহার করা হয়। যেমন-
<html>
<head>
<style type="text/css">
h1 {color:#00ff00;}
p{color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph.</p>
</body>
</html>
আউটপুটঃ
This is heading 1
This is an ordinary paragraph.
বিঃ দ্রঃ কালার ভেলু আপনার এইচটিএমএল করার সময় যে ভাবে সেট করেছেন এখানে সেই একই ভাবে সেট করতে পারবেন।
২. টেক্সট ডিরেকশান প্রপার্টিঃ
টেক্সটের দিক নির্দেশ করতে এই প্রপার্টি ব্যবহার করা হয়। এর ব্যবহার অনেক কম। এটা না জানলেও হবে।
<html>
<head>
<style type="text/css">
p {direction:rtl;}
h5{direction:Itr}
</style> </head> <body>
<p>Some text. Default writing direction.</p>
<h5>Some text. Default writing direction.</h5>
</body>
</html>
এই প্রপাটি দুটি মান ব্যবহার করে-Itr
টেক্সটের দিক বাম থেকে ডানে হবে। এটা ডিফল্ট মান।rtl
টেক্সটের দিক ডান থেকে বামে হবে।
৩. লেটার স্পেসিং প্রপার্টিঃ
সিএসএস letter-spacing প্রপাটির মাধ্যমে একটি টেক্সটের ক্যারেক্টারগুলোর মধ্যে স্পেস এর পরিমান কমানো বা বাড়ানো যায়। যেমন-
<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
আউটপুটঃ
This is heading 1
This is heading 2
লক্ষ্য করুন নেগেটিভ মান ব্যবহারের কারণে লেখাগুলো গায়ে গায়ে লেগে গিয়েছে।
৪.লাইন হাইট প্রপার্টি :
দুটো লাইনের মাঝে কি পরিমাণ ফাঁকা স্থান থাকবে তা নির্দেশ করা হয় এই প্রপার্টির মাধ্যমে।
[বিঃ দ্রঃ নিচের উদাহরণটিতে সিএসএস ক্লাস সিলেক্টর ব্যবহার করা হয়েছে। সিলেক্টর সম্বন্ধে জানতে আগে সিলেক্টর পড়ে আসুন।]
<html>
<head>
<style type="text/css">
p.small {line-height:90%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
কোড বিশ্লেষণঃ উপরের উদাহরণটিতে সিএসএস লেখার সময় আমরা p.small 3 p.big ব্যবহার করেছি যা অনেকেই হয়তো বুঝতে পারেন নি। বডি অংশে লক্ষ্য করুন এখানে তিনটি প্যারাগ্রাফ আছে আমরা চাই তিনটি প্যারাগ্রাফে তিনটি আলাদা স্টাইল হোক তাই প্রথমে তাদেরকে <p class="small"> ও <p class="big"> নামে চিহ্নিত করে রেখেছি পরে স্টাইল শীটে ক্লাস নাম ধরে কল করেছি, এটাকে বলে ক্লাস সিলেক্টর।
line-height প্রপার্টিতে ব্যবহৃত মানের এককসূমহ-
১.সরাসরি নাম্বার ব্যবহার করা যায়। (এক্ষেত্রে লাইনের উচ্চতা হবে ফন্ট সাইজের মানের সাথে গুন করে যা হবে)
২. লাইনের উচ্চতা px, pt, cm এককের মাধ্যমে নির্ণয় করা।
৩.শতকরা (%) মান ব্যবহার করা হলে লাইনের উচ্চতা হবে ব্যবহৃত ফন্ট সাইজের সাপেক্ষে।
৫. টেক্সট এলাইন প্রপার্টিঃ
ওয়েব সাইটে সাধারনত টেক্সটগুলোর লেফট এলাইনমেন্ট নির্বাচিত থাকে। t e x t -a | ign প্রপাটির সাহায্যে টেক্সট এর বিভিন্ন এলাইনমেন্ট দেয়া যায়। এর মান হতে পারে-I e f t right, center, j us t if y । একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
৬. টেক্সট ডেকোরেশান প্রপার্টিঃ
এই প্রপার্টির মাধ্যমে টেক্সটকে বিভিন্নভাবে প্রদর্শন করা যেতে পারে। text-decoration প্রপার্টি সবচেয়ে বেশি ব্যবহার করা হয় লিঙ্কের আন্ডারলাইন দূর করতে। মেনু তৈরি করার সময় এটা অনেক কাজে লাগবে।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
</body>
</html>
আউটপুটঃ
This is heading 1
This is heading 2
This is heading 3
This is heading 4
Text-decoration যে মানগুলো ব্যবহার করতে পারে- বর্ণনা
ভেলু
none underline
1নরমাল টেক্সট নির্দেশ করে। এটা ডিফল্ট।
2টেক্সটে আন্ডারলাইন হবে
overline
3টেক্সটে ওভারলাইন হবে
line-through টেক্সটের মাঝ বরাবর দাগ হবে।
blink
4 টেক্সট জ্বলা নেভা করবে।
৭. টেক্সট ইনডেন্ট প্রপার্টিঃ
সিএসএস text-indent কে আমরা এইচটিএমএল (<pre>) ট্যাগ পরিবর্তে ব্যবহার করতে পারি। সরাসরি কোন মান বা শতকরা মান ব্যবহার করে আমরা text-indent নির্দিষ্ট করতে পারি। text indent মানে লেখাটি বাম দিকে থেকে কতটুকু ছাড় দিয়ে শুরু হবে। এর মান হিসেবে দৈঘ্য(em,ex,p†) ও শতকরা হার(%) ব্যবহৃত হতে পারে। নেগেটিভ মান দেওয়া যেতে পারে।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
h1 {text-indent:50px;}
</style> </head>
<body>
<h2>In my younger and more vulnerable</h2> <h1>In my younger and more vulnerable</h1>
</body>
</html>
কোড বিশ্লেষণঃ উপরের উদাহরণটিতে লক্ষ্য করুন <h1> এর text-indent:50px দেওয়ার কারণে লেখাটি বামদিক থেকে 50px দূরে সরে গিয়েছে।
৮. টেক্সট শ্যাডো প্ৰপাটিঃ
কোন টেক্সটে শ্যাডো এফেক্ট প্রয়োগ করা হবে কি না তা নির্দেশ করা হয় এই প্রপার্টি দিয়ে।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
h1 {background: white;color: red;text-shadow: 5px 3px 5px red;}
</style> </head>
<body>
<h1> Red Shadow Effect </h1>
</body>
</html>
ভেলুগুলো নির্দেশ করে কোনদিকে কত পিক্সেল শ্যাডো হবে আর রঙের নাম নির্দেশ করে কি রঙের শ্যাডো হবে।
৯. টেক্সট ট্রান্সফরমেশান প্রপার্টিঃ
টেক্সট Transform এর মাধ্যমে টেক্সট এর দ্রুত capitalize(ছোট থেকে বড় বা বড় থেকে ছোট হরফে পরিবর্তন) করা যায়। এর মাধ্যমে প্রতিটা শব্দের প্রথম অক্ষরকেও capitalize করা যেতে পারে। এর চারটি মান হতে
পারে।যেমন-
ভেলু
none
বর্ণনা
Capitalization হবে না। এটা ডিফল্ট I
capitalize প্রতিটা ওয়ার্ড এর প্রথম অক্ষর uppercase-এ পরিবর্তন করবে।
uppercase সকল ক্যারেক্টারকে uppercase-এ পরিবর্তন করবে। lowercase সকল ক্যারেক্টারকে lowercase -এ পরিবর্তন করবে।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase"> This is some text</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p> </body>
</html>
আউটপুটঃ
THIS IS SOME TEXT.
this is some text.
This Is Some Text.
১০.ভাটিক্যল এলাইন প্রপার্টি;
টেক্সটের উন্মব এলাইনমেন্ট নির্দেশ করা হয় এই প্রপাটির মাধ্যমে।
ভেলু
length
%
Vertical-align property যে মানগুলো ব্যবহার করতে পারে- বর্ণনা
নির্দিস্ট ভেলুর সাহায্যে কোন এলিমেন্টের সাইজ বাড়ায় বা কমায়। নেগেটিভ মান গ্রহনযোগ্য।
Raises or lower an element in a percent of the "line-height" property. নেগেটিভ মান গ্রহনযোগ্য।
sub
super
top
text-top middle bottom
baseline
মূল উপাদানের বেজলাইনের সাথে বর্তমান উপাদানকে এলাইন করে। This is default বর্তমান উপাদানকে subscript হিসেবে দেখায়।
বর্তমান উপাদানকে superscript হিসেবে দেখায়।
বর্তমান উপাদানের top কে বর্তমান সারির সবচেয়ে উঁচু উপাদানের top এর সাথে এলাইন করে। বর্তমান উপাদানকে মূল উপাদানের top of the font এর সাথে এলাইন করে। বর্তমান উপাদানকে মূল উপাদানের মাঝে এলাইন করে।
বর্তমান উপাদানের তলকে ওই লাইনের সবচেয়ে নিচের উপাদানটির তলের সাথে এলাইন করে। | বর্তমান উপাদানের তল(bottom) মূল উপাদানের তলের সাথে এলাইন করে।
text- bottom
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src=" logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src=" logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment. </p>
<p>An <img class="bottom" src=" logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>
১১. হোয়াইট স্পেস প্রপার্টিঃ
হোয়াইট স্পেস প্রপাটির মাধ্যমে একটি লেখা এক লাইনে চলতে থাকবে যতক্ষন না আপনি break <br /> ট্যাগ না দিবেন। </br> ট্যাগ দিলে তারপর থেকে নিচে লাইন যাবে।
ভেলু
normal
nowrap
Pre
|pre-line
pre-wrap
white-space propertyযে মানগুলো ব্যবহার করতে পারে- বর্ণনা
পাশাপাশি অনেকগুলো whitespace একটি whitespace-এ পরিণত হবে। টেক্সট মুড়িয়ে wrap) যাবে যখন প্রয়োজন। এটা ডিফল্ট ।
পাশাপাশি অনেকগুলো whitespace একটি whitespace-এ পরিণত হবে। টেক্সট মুড়িয়ে পরিবর্তী লাইনে যাবে না । কিন্তু এক লাইনে চলতে চলতে যদি <br /> ট্যাগ পায় তবে মুড়িয়ে যাবে। কোডিং-এ যতগুলো Whitespace থাকবে তার সবই ব্রাউজারে দেখা যাবে।
Text will only wrap on line breaks Acts like the <pre> tag in HTML পাশাপাশি অনেকগুলো whitespace একটি whitespace-এ পরিণত হবে। টেক্সট মুড়িয়ে( wrap) যাবে যখন প্রয়োজন হবে কিন্তু লাইন ব্রেক হবে না।
কোডিং-এ যতগুলো Whitespace থাকবে তার সবই ব্রাউজারে দেখা যাবে। টেক্সট মুড়িয়ে wrap) যাবে যখন প্রয়োজন হবে কিন্তু লাইন ব্রেক হবে না।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
P {white-space:nowrap;}
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p> </body>
</html>
১২.ওয়ার্ড স্পেসিং প্রপার্টিঃ
Word Spacing property-এর মাধ্যমে পাশাপাশি শব্দগুলোর মধ্যে white space এর পরিমান কমানো বা বাড়ানো যায়। এর মান px, pt, cm, em এককে হতে পারে। নেগেটিভ মান ব্যবহার করা যেতে পারে।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
Р {word-spacing:30px; }
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body> </html>
সিলেক্টর হল সাধারণ HTML এলিমেন্ট (h1⇒h6, p etc)
ডিকলারেশনের আবার দুইটি অংশ থাকবে-
Declaration={Properties: Value } Property
একাধিক Declaration থাকতে পারে যা সেমিকোলন দিয়ে পৃথক থাকবে।
আরও সহজ ভাবে লেখা যায়-
"HTML tag" { "CSS Property" : "Value" ; } Value
স্টাইলশীট ব্যবহারের পদ্ধতিঃ
এইচটিএমএল ডকুমেন্টে স্টাইলশীট ব্যবহারের তিনটি পদ্ধতি রয়েছে -internal, external এবং inline। একটা এইচটিএমএল পেজে <head> ট্যাগের ভিতর <style> ট্যাগ দিয়ে সিএসএস কোড যোগ করে পেজ স্টাইলিং করা যায়-এটা হচ্ছে ইন্টারনাল সিএসএস। আর যদি সিএসএস কোড বেশি হয়ে যায় তখন সিএসএস কোড আলাদা ফাইলে লেখা হয় এবং <head> ট্যাগের ভিতর <link> ট্যাগ দিয়ে সংযুক্ত করা হয়-এই পদ্ধতি হচ্ছে এক্সটার্নাল সিএসএস। আমরা ওয়েব পেজ ডিজাইন করতে এক্সটার্নাল সিএসএস বেশি ব্যবহার করব। আর এইচটিএমএল-এর প্রতিটা এলিমেন্টের সাথে এককভাবে স্টাইল নির্ধারণ করা হল-ইনলাইন সিএসএস। যে কোন এইচটিএমএল ডকুমেন্টে আপনি স্টাইলশীট ব্যবহার করতে পারেন।এখন আমরা ধরাবাহিকভাবে এই তিনটি পদ্ধতি নিয়ে আলোচনা করব:
১.ইন্টারনাল সিএসএসঃ
ইন্টারনাল সিএসএস সাধারণত তখনই ব্যবহার করা হয় যখন একটি এইচটিএমএল ডকুমেন্টের জন্য একটি ডিজাইন দরকার। ইন্টারনাল সিএসএস-এ <head> ট্যাগের ভিতর <style> ট্যাগ দিয়ে সিএসএস কোড যোগ করা হয়।যেমন-
<html>
<head>
<style type="text/css">
h1{color:#ff00ff;}
p{word-spacing:10px;}
</style>
<body>
<h1>My first CSS Codeing</h1>
<p>
CSS stands for Cascading Style Sheets. Styles define how to display HTML elements. Styles were added to HTML 4.0 to solve a problem. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files
</p>
</body>
</html>
উপরের কোডগুলো index.html নামে সেভ করে রান করে আউটপুট দেখুন।
.এক্সটার্নাল সিএসএসঃ
সবচেয়ে ভাল হয় যদি আপনারা সিএসএস কে এইচটিএমএল হতে পৃথক রাখেন, আর এটাই হল এক্সটার্নাল সিএসএস। যখন একটি সিএসএস কোড অনেক ডকুমেন্টের জন্য ব্যবহার করা হয় তখন এক্সটার্নাল সিএসএস উত্তম। এক্সটার্নাল সিএসএস -এ সিএসএস ফাইলকে <head> ট্যাগের ভিতর <link> ট্যাগ দিয়ে সংযুক্ত করা হয়। যেমন-
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
এক্সটার্নাল সিএসএস ফাইলটি শুধুমাত্র সিএসএস code ধারন করে এবং এই ফাইলটিকে ".css" ফাইল extension দিয়ে সেভ করা হয়। একটি উদাহরণ দেখুন-
H3 {color:#FF0000;}
p {background:#00F;text-align:center; }
এবার উপরের কোডগুলো style.css নাম দিয়ে সেভ করুন। এরপর নিচের মত করে এইচটিএমএল ফাইলের সাথে সিএসএস ফাইলটিকে লিংক করে দিন।
<html>
<head>
<link rel="stylesheet” type=”text/css” href=”style.css">
</head>
<body>
<h3>A white Header</h3>
<p>This paragraph has a blue font.
The background color of this page is gray because we changed it with CSS!</p>
</body>
</html>
তারপর এইচটিএমএল ফাইল টিকে index.html হিসাবে একই ফোল্ডারে অর্থাৎ যেখানে সিএসএস ফাইল আছে সেখানে সেভ করে index.html ফাইলটি রান করে আউটপুট দেখুন।
৩.ইনলাইন সিএসএসঃ
ডকুমেন্টের প্রতিটি এইচটিএমএল ট্যাগের সাথে Style এট্রিবিউট ব্যবহার করে ডকুমেন্টে স্টাইল নির্ধারণ করাই হল ইনলাইন সিএসএস । ইনলাইন সিএসএস ক্ষেত্রে Style নির্দেশ দেয়ার সময় Type Attribute ডিকলারেশন প্রয়োজন হয় না এবং দ্বিতীয় বন্ধনী {} এর বদলে উদ্ধৃতি চিহ্ন ব্যবহার করা হয়। নিচের উদাহরণে দেখুন-
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
এক্সটার্নাল বা ইন্টারনাল সিএসএস হতে ইনলাইন সিএসএস এর প্রাধান্য বেশি। এর অর্থ হচ্ছে এক্সটার্নাল বা ইন্টারনাল সিএসএস দ্বারা স্টাইল নির্দেশিত থাকলেও আপনি ইনলাইন সিএসএস দ্বারা ঐ স্টাইল override করতে পারেন। যাহোক, ইনলাইন সিএসএস যা সিএসএস এর সঠিক উদ্দেশ্য হতে বিচ্যুতি ঘটায় তাই এটা আংশিকভাবে ব্যবহার করা উচিত।
নোটঃ যদি এক্সটার্নাল সিএসএস ফাইলের লিংক ইন্টারনাল সিএসএস-এর পরে স্থাপন করা হয় তবে এক্সটার্নাল সিএসএস, ইন্টারনাল সিএসএস-কে override করবে।
মন্তব্য যোগ করাঃ
মন্তব্য যোগ করা যে কোন ল্যাংগুয়েযের একটি সাধারন বিষয়। সিএসএস-এ মন্তব্য "/*" দিয়ে শুরু হয় এবং "*/" দিয়ে শেষ হয়। যেমন-
/*This is a comment* /
{text-align: center; /*This is another comment */ color: black; font-family: arial; }
সিএসএস টেক্সট প্রপার্টি
সিএসএস-এর বেশ কিছু প্রপার্টি সরাসরি টেক্সটকে নিয়ন্ত্রন করে। একটি ওয়েব পেজে হেডিং হিসেবে বা প্যারাগ্রাফ হিসেবে বা অন্য কিছু হিসেবে অনেক অনেক টেক্সট থেকে থাকে। আর ওয়েব পেজকে সাজাতে এই সকল টেক্সটের স্টাইল নির্ধারণ করা আবশ্যক। সিএসএস টেক্সট প্রপার্টির মাধ্যমে আপনি টেক্সট এর spacing, decoration, color, alignment সহ আরও অনেক কিছুই নিয়ন্ত্রন করতে পারেন। আমরা এই অধ্যায়ে সিএসএস টেক্সট প্রপার্টি নিয়ে বিস্তারিত আলোচনা করবো।
10.vertical-align 11.white-space
12.word-spacing
টেক্সটের উলম্ব এলাইনমেন্ট নির্দেশ করে।
Specifies how white-space inside an element is handled এর মাধ্যমে পাশাপাশি শব্দগুলোর মধ্যে white space এর পরিমান কমানো বা বাড়ানো যায়।
১.টেক্সট কালার প্রপার্টিঃ
ওয়েব পেজের যে কোন টেক্সটের কালার নির্ধারণ করতে কালার প্রপার্টি ব্যবহার করা হয়। যেমন-
<html>
<head>
<style type="text/css">
h1 {color:#00ff00;}
p{color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph.</p>
</body>
</html>
আউটপুটঃ
This is heading 1
This is an ordinary paragraph.
বিঃ দ্রঃ কালার ভেলু আপনার এইচটিএমএল করার সময় যে ভাবে সেট করেছেন এখানে সেই একই ভাবে সেট করতে পারবেন।
২. টেক্সট ডিরেকশান প্রপার্টিঃ
টেক্সটের দিক নির্দেশ করতে এই প্রপার্টি ব্যবহার করা হয়। এর ব্যবহার অনেক কম। এটা না জানলেও হবে।
<html>
<head>
<style type="text/css">
p {direction:rtl;}
h5{direction:Itr}
</style> </head> <body>
<p>Some text. Default writing direction.</p>
<h5>Some text. Default writing direction.</h5>
</body>
</html>
এই প্রপাটি দুটি মান ব্যবহার করে-Itr
টেক্সটের দিক বাম থেকে ডানে হবে। এটা ডিফল্ট মান।rtl
টেক্সটের দিক ডান থেকে বামে হবে।
৩. লেটার স্পেসিং প্রপার্টিঃ
সিএসএস letter-spacing প্রপাটির মাধ্যমে একটি টেক্সটের ক্যারেক্টারগুলোর মধ্যে স্পেস এর পরিমান কমানো বা বাড়ানো যায়। যেমন-
<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
আউটপুটঃ
This is heading 1
This is heading 2
লক্ষ্য করুন নেগেটিভ মান ব্যবহারের কারণে লেখাগুলো গায়ে গায়ে লেগে গিয়েছে।
৪.লাইন হাইট প্রপার্টি :
দুটো লাইনের মাঝে কি পরিমাণ ফাঁকা স্থান থাকবে তা নির্দেশ করা হয় এই প্রপার্টির মাধ্যমে।
[বিঃ দ্রঃ নিচের উদাহরণটিতে সিএসএস ক্লাস সিলেক্টর ব্যবহার করা হয়েছে। সিলেক্টর সম্বন্ধে জানতে আগে সিলেক্টর পড়ে আসুন।]
<html>
<head>
<style type="text/css">
p.small {line-height:90%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
</p>
<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>
<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>
</body>
</html>
কোড বিশ্লেষণঃ উপরের উদাহরণটিতে সিএসএস লেখার সময় আমরা p.small 3 p.big ব্যবহার করেছি যা অনেকেই হয়তো বুঝতে পারেন নি। বডি অংশে লক্ষ্য করুন এখানে তিনটি প্যারাগ্রাফ আছে আমরা চাই তিনটি প্যারাগ্রাফে তিনটি আলাদা স্টাইল হোক তাই প্রথমে তাদেরকে <p class="small"> ও <p class="big"> নামে চিহ্নিত করে রেখেছি পরে স্টাইল শীটে ক্লাস নাম ধরে কল করেছি, এটাকে বলে ক্লাস সিলেক্টর।
line-height প্রপার্টিতে ব্যবহৃত মানের এককসূমহ-
১.সরাসরি নাম্বার ব্যবহার করা যায়। (এক্ষেত্রে লাইনের উচ্চতা হবে ফন্ট সাইজের মানের সাথে গুন করে যা হবে)
২. লাইনের উচ্চতা px, pt, cm এককের মাধ্যমে নির্ণয় করা।
৩.শতকরা (%) মান ব্যবহার করা হলে লাইনের উচ্চতা হবে ব্যবহৃত ফন্ট সাইজের সাপেক্ষে।
৫. টেক্সট এলাইন প্রপার্টিঃ
ওয়েব সাইটে সাধারনত টেক্সটগুলোর লেফট এলাইনমেন্ট নির্বাচিত থাকে। t e x t -a | ign প্রপাটির সাহায্যে টেক্সট এর বিভিন্ন এলাইনমেন্ট দেয়া যায়। এর মান হতে পারে-I e f t right, center, j us t if y । একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
৬. টেক্সট ডেকোরেশান প্রপার্টিঃ
এই প্রপার্টির মাধ্যমে টেক্সটকে বিভিন্নভাবে প্রদর্শন করা যেতে পারে। text-decoration প্রপার্টি সবচেয়ে বেশি ব্যবহার করা হয় লিঙ্কের আন্ডারলাইন দূর করতে। মেনু তৈরি করার সময় এটা অনেক কাজে লাগবে।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
</body>
</html>
আউটপুটঃ
This is heading 1
This is heading 2
This is heading 3
This is heading 4
Text-decoration যে মানগুলো ব্যবহার করতে পারে- বর্ণনা
ভেলু
none underline
1নরমাল টেক্সট নির্দেশ করে। এটা ডিফল্ট।
2টেক্সটে আন্ডারলাইন হবে
overline
3টেক্সটে ওভারলাইন হবে
line-through টেক্সটের মাঝ বরাবর দাগ হবে।
blink
4 টেক্সট জ্বলা নেভা করবে।
৭. টেক্সট ইনডেন্ট প্রপার্টিঃ
সিএসএস text-indent কে আমরা এইচটিএমএল (<pre>) ট্যাগ পরিবর্তে ব্যবহার করতে পারি। সরাসরি কোন মান বা শতকরা মান ব্যবহার করে আমরা text-indent নির্দিষ্ট করতে পারি। text indent মানে লেখাটি বাম দিকে থেকে কতটুকু ছাড় দিয়ে শুরু হবে। এর মান হিসেবে দৈঘ্য(em,ex,p†) ও শতকরা হার(%) ব্যবহৃত হতে পারে। নেগেটিভ মান দেওয়া যেতে পারে।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
h1 {text-indent:50px;}
</style> </head>
<body>
<h2>In my younger and more vulnerable</h2> <h1>In my younger and more vulnerable</h1>
</body>
</html>
কোড বিশ্লেষণঃ উপরের উদাহরণটিতে লক্ষ্য করুন <h1> এর text-indent:50px দেওয়ার কারণে লেখাটি বামদিক থেকে 50px দূরে সরে গিয়েছে।
৮. টেক্সট শ্যাডো প্ৰপাটিঃ
কোন টেক্সটে শ্যাডো এফেক্ট প্রয়োগ করা হবে কি না তা নির্দেশ করা হয় এই প্রপার্টি দিয়ে।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
h1 {background: white;color: red;text-shadow: 5px 3px 5px red;}
</style> </head>
<body>
<h1> Red Shadow Effect </h1>
</body>
</html>
ভেলুগুলো নির্দেশ করে কোনদিকে কত পিক্সেল শ্যাডো হবে আর রঙের নাম নির্দেশ করে কি রঙের শ্যাডো হবে।
৯. টেক্সট ট্রান্সফরমেশান প্রপার্টিঃ
টেক্সট Transform এর মাধ্যমে টেক্সট এর দ্রুত capitalize(ছোট থেকে বড় বা বড় থেকে ছোট হরফে পরিবর্তন) করা যায়। এর মাধ্যমে প্রতিটা শব্দের প্রথম অক্ষরকেও capitalize করা যেতে পারে। এর চারটি মান হতে
পারে।যেমন-
ভেলু
none
বর্ণনা
Capitalization হবে না। এটা ডিফল্ট I
capitalize প্রতিটা ওয়ার্ড এর প্রথম অক্ষর uppercase-এ পরিবর্তন করবে।
uppercase সকল ক্যারেক্টারকে uppercase-এ পরিবর্তন করবে। lowercase সকল ক্যারেক্টারকে lowercase -এ পরিবর্তন করবে।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase"> This is some text</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p> </body>
</html>
আউটপুটঃ
THIS IS SOME TEXT.
this is some text.
This Is Some Text.
১০.ভাটিক্যল এলাইন প্রপার্টি;
টেক্সটের উন্মব এলাইনমেন্ট নির্দেশ করা হয় এই প্রপাটির মাধ্যমে।
ভেলু
length
%
Vertical-align property যে মানগুলো ব্যবহার করতে পারে- বর্ণনা
নির্দিস্ট ভেলুর সাহায্যে কোন এলিমেন্টের সাইজ বাড়ায় বা কমায়। নেগেটিভ মান গ্রহনযোগ্য।
Raises or lower an element in a percent of the "line-height" property. নেগেটিভ মান গ্রহনযোগ্য।
sub
super
top
text-top middle bottom
baseline
মূল উপাদানের বেজলাইনের সাথে বর্তমান উপাদানকে এলাইন করে। This is default বর্তমান উপাদানকে subscript হিসেবে দেখায়।
বর্তমান উপাদানকে superscript হিসেবে দেখায়।
বর্তমান উপাদানের top কে বর্তমান সারির সবচেয়ে উঁচু উপাদানের top এর সাথে এলাইন করে। বর্তমান উপাদানকে মূল উপাদানের top of the font এর সাথে এলাইন করে। বর্তমান উপাদানকে মূল উপাদানের মাঝে এলাইন করে।
বর্তমান উপাদানের তলকে ওই লাইনের সবচেয়ে নিচের উপাদানটির তলের সাথে এলাইন করে। | বর্তমান উপাদানের তল(bottom) মূল উপাদানের তলের সাথে এলাইন করে।
text- bottom
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
<p>An <img src=" logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src=" logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment. </p>
<p>An <img class="bottom" src=" logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>
১১. হোয়াইট স্পেস প্রপার্টিঃ
হোয়াইট স্পেস প্রপাটির মাধ্যমে একটি লেখা এক লাইনে চলতে থাকবে যতক্ষন না আপনি break <br /> ট্যাগ না দিবেন। </br> ট্যাগ দিলে তারপর থেকে নিচে লাইন যাবে।
ভেলু
normal
nowrap
Pre
|pre-line
pre-wrap
white-space propertyযে মানগুলো ব্যবহার করতে পারে- বর্ণনা
পাশাপাশি অনেকগুলো whitespace একটি whitespace-এ পরিণত হবে। টেক্সট মুড়িয়ে wrap) যাবে যখন প্রয়োজন। এটা ডিফল্ট ।
পাশাপাশি অনেকগুলো whitespace একটি whitespace-এ পরিণত হবে। টেক্সট মুড়িয়ে পরিবর্তী লাইনে যাবে না । কিন্তু এক লাইনে চলতে চলতে যদি <br /> ট্যাগ পায় তবে মুড়িয়ে যাবে। কোডিং-এ যতগুলো Whitespace থাকবে তার সবই ব্রাউজারে দেখা যাবে।
Text will only wrap on line breaks Acts like the <pre> tag in HTML পাশাপাশি অনেকগুলো whitespace একটি whitespace-এ পরিণত হবে। টেক্সট মুড়িয়ে( wrap) যাবে যখন প্রয়োজন হবে কিন্তু লাইন ব্রেক হবে না।
কোডিং-এ যতগুলো Whitespace থাকবে তার সবই ব্রাউজারে দেখা যাবে। টেক্সট মুড়িয়ে wrap) যাবে যখন প্রয়োজন হবে কিন্তু লাইন ব্রেক হবে না।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
P {white-space:nowrap;}
</style>
</head>
<body>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p> </body>
</html>
১২.ওয়ার্ড স্পেসিং প্রপার্টিঃ
Word Spacing property-এর মাধ্যমে পাশাপাশি শব্দগুলোর মধ্যে white space এর পরিমান কমানো বা বাড়ানো যায়। এর মান px, pt, cm, em এককে হতে পারে। নেগেটিভ মান ব্যবহার করা যেতে পারে।
একটি উদাহরণ দেখুন-
<html>
<head>
<style type="text/css">
Р {word-spacing:30px; }
</style>
</head>
<body>
<p>
This is some text. This is some text.
</p>
</body> </html>
.jpg)
0 Comments