---------------------------1-----------------------
“বিসমিল্লাহির রাহমানির রাহিম”
আজ আমি আপনাদের সামনে এমন একটি কোর্স যেটির নাম আপনারা সকলেই কম বেশি শুনেছেন । হ্যা সঠিক ধরেছেন সেটি হচ্ছে আমাদের সকলের প্রিয় ওয়েব ডিজাইন লেজ্ঞুয়েজের একটি গুরুত্ব পূর্ণ পার্ট সি এস এস । ওও ও ও ও একটি মূল্যবান কথা বলতে ভুলে গিয়েছি আপনাদের সি এস এস শিখতে হলে অবশ্যই এইচটিএমএল শিখা জরুরী ……… তাই তাড়াতাড়ি এইচটিএমএল শিখে নিন ।সি এস এস (CSS) কি?
সি এস এস এর মানে হল ক্যাসকেডিং স্টাইল শিট
(CASCADING STYLE SHEETS) . HTML এলিমেন্টগুলো কিভাবে প্রদর্শিত হবে
স্টাইল সমূহ সেটি নির্ধারণ করে । এসব স্টাইল সাধারণত স্টাইল শিটে সংরক্ষণ
করে রাখা হয় । এক্সটারনাল স্টাইল শিট গুলো প্রচুর কাজ করা থেকে বাঁচিয়ে
দিতে পারে । এগুলো সি এস এস ফাইলে সংরক্ষণ করা হয় ।
সি এস এস শিক্ষার জন্য প্রথমে যা জানা প্রয়োজনঃ
সিএসএস শিক্ষার আগে আপনাকে অবশ্যই
HTML/XHTML এর প্রাথমিক জ্ঞান টুকু রপ্ত করতে হবে । কারন HTML/XHTML এর
ভেতরেই আপনাকে সিএসএস ব্যবহার করতে হবে । তাই HTML/XHTML সম্পর্কে জ্ঞান
না থাকলে আপনি সি এস এস সম্পর্কে শিখতে ও তা ব্যবহার করতে পারবেন না ।
সুতরাং সি এস এস শিক্ষার আগে HTML/XHTML শিখা অবশ্যই দরকার ।
সি এস এস সিনট্যাক্সঃ
সি এস এস(CSS)এর সিনট্যাক্স তিনটি অংশ নিয়ে গঠিত। এগুলো হলঃ
১) সিলেক্টর(SELECTOR)
২) প্রোপার্টি (PROPERTY)
৩)ভ্যালু(VALUE)
সিলেক্টর হলো সাধারন ভাবে আপনি যে HTML
এলিমেন্ট/ট্যাগটি নির্ধারণ করতে চান সেটি । প্রোপার্টি হলো সেই
অ্যাট্রিবিউট সেটিকে আপনি পরিবর্তন করতে চান ।আর প্রতিটি প্রোপার্টি একটি
ভ্যালুকে গ্রহণ করতে পারে । প্রোপার্টি এবং ভ্যালু একটি কোন দ্বারা পৃথক
করা থাকে এবং এদের চারপাশে একটি কার্লি ব্রাসেস দ্বারা এরা আবদ্ধ থাকে ।
body{color:red}
ভ্যালুটি যদি একাধিক শব্দ সম্বলিত হয় তবে ভ্যালুটি উদ্ধৃত চিন্হের মধ্য রাখতে হবে ।
p{front-family:”sans serif}
আপনি যদি একাধিক প্রোপার্টি নিদিষ্ট করে
দিতে চান তাহলে আপনাকে অবশ্যই প্রতিটি প্রোপার্টি একটি সেমিকোলন দ্বারা
পৃথক করে দিতে হবে ।নিচের উদাহরণটি লক্ষ্য করুন । এখানে সেন্টার
অ্যালাইকৃত প্যারাগ্রাফ রয়েছে যার টেক্সেটের কালার হলো লাল ।যেমনঃ
p{text-align:center;color:red}
স্টাইল ডেফিনেসন গুলোকে আরও পঠনযোগ্য করে দিতে আপনি প্রতিটি প্রোপার্টিকে নিচের মতো করে আলাদা আলাদা লাইনে উপস্থাপন করতে পারেন ।
গ্রুপিং
সিলেক্টর গুলোকে আপনি গ্রুপ করতে পারেন।
প্রতিটি সিলেক্টর একটি কমা দ্বারা পৃথক করতে হয় ।নিচের উদাহরণে সবগুলো
হেডার এলিমেন্টকে গ্রুপ করা হয়েছে । সকল হেডার এলিমেন্টই সবুজ টেক্সট
কালারে প্রদর্শিত হবে ।
---------------------------2-----------------------
“বিসমিল্লাহির রাহমানির রাহিম”
আজ আমি আপনাদের সামনে নিয়ে আসলাম সি এস এস এর ২য় পার্ট । আমার মনে হয় সি এস এস সম্পর্কে সকলেরেই ধারনা আছে আর যাদের ধারনা নেই তারা আমার প্রথম পার্ট থেকে ঘুরে আসতে পারেন ।
আসুন এই বার আমাদের ২য় পার্ট শুরু করা
যাক । ২য় পর্ব শুরু করার আগে আপনাদের কাছে আমার একটি ছোট অনুরোধ যদি রাখেন
তাহলে খুশি হব ” আপনাদের কারো যদি সি এস এস বুজতে সমস্যা হয় তবে একটু খুলে
বলেবেন “…………তাহলে শুরু করা যাক
:)ক্লাস সিলেক্টর (CLASS SELECTOR)
ক্লাস সিলেক্টরের মাধ্যমে আপনি একই ধরনের
HTML এলিমেন্টগুলোর জন্য বিভিন্ন স্টাইল সমূহ নির্ধারণ করে নিতে দিতে
পারেন। ধরুন আপনি চাচ্ছেন আপনার ডকুমেন্টে দুই ধরনের প্যারাগ্রাফ থাকবে
।যাদের একটি RIGHT প্যারাগ্রাফ এবং অন্যটি CENTER প্যারাগ্রাফ ।
p.right( text-align:right)
p.center(text-align:center)
আপনার HTML ডকুমেন্টে ক্লাস (CLASS) অ্যাট্রিবিউট ব্যবহার করতে হবে ।
<p class=”right”>tuner page </p>
<p class=”center”>tuner page</p>
প্রদান কৃত প্রতিটি এলিমেন্ট একাধিক ক্লাস প্রয়োগ করার সিনট্যাক্সটি হলঃ
<p class=”center bold “> tuner page </p>
আপনারা ইচ্ছা করলে center bold স্টাইল চেঞ্জ করে অন্য কোন স্টাইল ব্যবহার করতে পারেন …………………।
[বিঃদ্রঃঅবশ্যই মনে রাখবেন ক্লাসের নাম কখনও সংখ্যা দ্বারা শুরু করবেন না ।এটি মজিলা ফায়ারফক্স ব্রাউজারে কাজ করবে না ]
:) আই ডি সিলেক্টর (ID SELECTOR)
আই ডি সিলেক্টরের সাথে HTML এলিমেন্ট
গুলোর জন্য আপনি স্টাইল সমূহ নির্ধারণ করতে পারেন। আই ডি সিলেক্টরটি # এর
মাধ্যমে নির্ধারণ করতে পারেন ।নিচের স্টাইল রুলটি ঐ সমস্ত এলিমেন্টের সাথে
মিলবে যেগুলোর “green” ভ্যালুসহ একটি আইডি অ্যাট্রিবিউট রয়েছে ।
#green{color:green}
নিচের স্টাইল রুলটি p এলিমেন্টের সাথে মিলবে যার “paral” ভ্যালুসহ একটি আই ডি রয়েছে ।
p#paral
{
text-aliagn: center;
color:red
}
[বিঃদ্রঃ আই ডির নাম কখন সংখ্যা দ্বারা শুরু করবেন না । তাহলে মজিলা ফায়ারফক্স সাপোর্ট করবে না ]
সি এস এস কমেন্ট( CSS COMMENTS)
কোড ব্যাখ্যা করার কাজে কমেন্ট ব্যবহার হয়
।সোর্স কোড এডিট করার সময় কমেন্ট আপনাকে পূর্ণ সাপোর্ট দিবে ।কমেন্ট সমূহ
ব্রাউজার থেকে আগ্রহ্য থাকে । আমার মনে হ্য আপনার জানেন যে কমেন্ট
ব্রাউজারে প্রদর্শিত হয় না ।সিএসএস এর কমেন্ট শুরু হয় (“/*”)দিয়ে।
/*this is comment*/p
{
text-align:center;
/* this is another comment*/
color:block;
front-family: ariay
}
এইচটিএমএল ডকুমেন্টে স্টাইল শিট যোগ করা
ব্রাউজার স্টাইল শিট অনুযায়ী ডকুমেন্ট কে সাজিয়ে নেয় ।ডকুমেন্টে স্টাইল শিট সংযোজনের জন্য তিনটি উপায় আছে
১/ এক্সটারনাল স্টাইল শিট ( EXTARNAL STYLE SHEET) ২/:) ইন্টারনাল স্টাইল শিট (INTERNAL STYLE SHEET) ৩/:)ইনলাইন স্টাইলস ( INLAINE STYLES) এক্সটারনাল স্টাইল শীট ( EXTARNAL STYLE SHEET)
একই স্টাইল অনেক গুলো পেজে প্রয়োগ করার
জন্য এক্সটারনাল স্টাইল শিট একটি আদর্শ । এক্সটারনাল স্টাইল শিটের একটি
মাত্র ফাইলের পরিবর্তনের মাধ্যমে পুরো ওয়েব সাইডের চেহারার পরিবর্তন করা
সম্ভব । প্রতিটি পেজকে অবশ্যই <link> ট্যাগ ব্যবহার করে স্টাইল শিটের
সাথে লিংক করতে হবে । <link> ট্যাগ টি বসাতে হয় অবশ্যই head সেকশনে ।
<head>
<link rel=”stylesheet” type “text/css” href=”tunerpage”>
</head>
এখানে “tunerpage”আর বদলে আপনার স্টাইল
শিটের নাম বসাতে হবে । চলুন এই বার স্টাইল শিটের ব্যবহার দেখি ।এর জন্য
ক্যাসকেডিং শিটের ফাইল তৈরি করে নিতে হবে । আসুন ফাইল তৈরি করি ঃ
নোটপ্যাড খুলুন তাতে নিচের মত করে প্রোগ্রাম কোড লিখুন ।
body {baceground-color: yellow}
h1 {font-size:36pt}
h2 {color:blue}
p {margin-left:50px}
এই বার ফাইলটি style.css নামে সেভ করুন । পুনরায় নোটপ্যাড টি খুলুন । এতে নিচের মত করে কোড গুলো লিখুন ।
<html>
<head>
<link rel=”stylesheet”type=”text/css” href=”style.css”/>
</head>
<body>
<h1>tuner page 36 pt</h1>
<h2>tuner page blue</h2>
<p>tuner page 50px </p>
</body>
</html>
ফাইলটি test-style ernal.html নামে সেভ করুন একটু আগের ফাইল টি যেখানে সেভ করেছিলেন সেখানেই সেভ করুন ।
যে কোন ব্রাউজারে সেভ করা test-style external.html ফাইল টি খুলুন ।নিচের
মত ফলাফল দেখতে পারবেন । পেজের ব্যাকগ্রাউড সবুজ রং এবং প্রথম হেডিং ৩৬
পয়েন্ট ফন্ট সাইজে বাই ডিফল্ট কাল রঙের । দ্বিতীয় হেডিং নীল রঙয়ে প্রদর্শিত
হচ্ছে । এছাড়া প্যারাগ্রাফটি বাম মার্জিন থেকে ৫০ পিক্সেল দূরে সরে পেজে
প্রদর্শিত হচ্ছে ।
একটি উদাহরনে কি নাকি আরেকটি লাগবে ? যান দিয়েই দিলাম আরেকটি উদাহরণ
নোটপ্যাড টি খুলুন । নিচের কোড লিখুন
body {background-color: tan}
h1 {color:maroon;font-size:20pt}
hr {color:navy}
p {font-size:11pt;margin-left: 15px }
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a: active {color:blue}
ফাইল টি style1css দিয়ে সেভ করুন নোটপ্যাড টি খুলুন । এতে নিচের মত করে কোড গুলো লিখুন ।
<html>
<head>
<link rel=”stylesheet”type=”text/css” href=”style1.css”/>
</head>
<h1>tuner page 1</h1>
<hr/>
<p>tunerpage</p>
<p><a href=”http://www.tunerpage.com” target=”_blank”>this is a link</a><p/>
</body>
</html>
ফাইলটি test-style ernal1.html নামে সেভ করুন একটু আগের ফাইল টি যেখানে সেভ করেছিলেন সেখানেই সেভ করুন । যে কোন ব্রাউজারে সেভ করা test-style external1.html ফাইল টি খুলুন ।নিচের মত ফলাফল দেখতে পারবেন
---------------------------3-----------------------
আসুন
এই বার ৩য় পার্ট/পর্ব শুরু করা যাক । ৩য় পর্ব শুরু করার আগে আপনাদের কাছে
একটি ছোট অনুরোধ । আশা করি রাখবেন যদি আপনাদের কোন স্থানে বুজতে সমস্যা হয়
তাহলে একটু কষ্ট করে আমাকে জানাবেন কি বুজতে পারছেন না …………………… তাহলে শুরু করা যাক 
…………………… তাহলে শুরু করা যাক
ইন্টারনাল স্টাইল শিট (INTERNAL STYLE SHEE)
যখন কোন ডকুমেন্টে একটি ইউনিক স্টাইল থাকে তখন ইন্টারনাল স্টাইল শিট
ব্যবহার করা উচিত । হেড (head) সেকশনে স্টাইল<style>ট্যাগ ব্যবহার
করে স্টাইল শিট নির্ধারণ করতে হবে।চলুন একটি উদাহরণের মাধ্যমে বিষয় টি
পরিষ্কার হয়ই ।নিচে দেখুনঃ নোড প্যাড খুলুন কোড গুলো লিখুন<html>
<head>
<style type=”text/css”>
h1 {color: green}
h2 {color: gold}
</style>
</head>
<body>
<h1> this is header 1 </h>
<h2>this is header2 </h>
</body>
</html>
ফাইলটি আপনার নিজস্ব একটি নাম দিয়ে সেভ করুন অবশ্যই মনে রাখবেন নামের শেষে অবশ্যই .html লিখবেন । এই বার ফাইলটি খুলুন । নিচের মত ফলাফল দেখতে পারবেন । এই খানে হেড ১ (green)এবং দ্বিতিয় হেডার (gold) হবে ।
ইনলাইন স্টাইল
যখন এলিমেন্টএর সিঙ্গেল অকারেন্সে কোন
ইউনিক স্টাইল প্রয়োগ করতে হয় তখন ইনলাইন স্টাইল ব্যবহার করা হয়। ইনলাইন
স্টাইল প্রয়োগের জন্য সংশ্লিষ্ট ট্যাগে অ্যাট্রিবিউট ব্যবহার করা হয়।
স্টাইল অ্যাট্রিবিউট যে কোন সি এস এস প্রোপার্টি বহন করতে পারে ।আসুন
ব্যবহার দেখিঃ
নোড প্যাড খুলুন নিচের কোড গুলো লিখুন
<html>
<body>
<p style=”color: red; margin-left: 40px; font-size: 50px;”>
tuner page/The Ultimate Path Of The Bangla Technology
</p>
</body>
</html>
এই বার আপনার নিজস্ব একটি নামে সেভ করুন ।
যে কোন ব্রাউজারে ফাইলটি ওপেন করুন । প্যারাগ্রাফটি লাল রঙে বাম মার্জিন
থেকে ২০ পিক্সেল দুরে সরে ৩০ পিক্সেল ফন্ট সাইজে প্রদর্শিত হবে ।এই বার
দেখুন নিচের মত দেখাবেঃ
:):) মাল্টিপল স্টাইল শিট:)
যদি ভিন্ন ভিন্ন স্টাইল শিটে একই
সিলেক্টরের জন্য কিছু প্রোপার্টি সেট করা হয় তাহলে ভ্যালুটি সবচাইতে
নিদিষ্ট কৃত স্টাইল শিট হতে ইনহেরিট হয় ।এখানে h3 সিলেক্টর জন্য এক্সটারনাল
স্টাইল শিটে তিনটি প্রোপার্টিজ রয়েছে । আসুন দেখি ঃ
নিচের মত করে কোড লিখুন =
h3
{
color:red ;
text-alian:left ;
font-size: 8pt
}
এই বার ফাইলটি সেভ করুন আগের মত করে এই বার HTML কোড লিখুন=
<html>
<head>
<link rel =”stylesheet” type text=”text/css” href=”b.css”/>
<style type=”text/css”>
h3
{
color:blue;
text-align: center;
font-size:50px;
}
</style>
</head>
<body>
<h3>tal patar sipahi </h3>
</body>
</html>
এই বার যে কোন ব্রাউজারে ফাইলটি ওপেন করুন । দেখুন নিচের মত করে ফলাফল দেখা যাচ্ছে কিনা ?
কি হল বুজলেন নাতো এই তো বুঝিয়ে দিচ্ছি আমি প্রথমে একটি সি সি এস ফাইল
তৈরি করলাম তারপর তাহা সেভ করলাম একটি নিদিষ্ট নামে ।এবং পরবর্তীতে এইচ টি
এম এল ফাইল লিখলাম সেখানে আবার সি এস এস ফাইল লিখলাম । এটি লিখার কারনে
বুজতেপারলাম যে সি এস এস আলাদা ফাইল থেকে এইচ টি এম এলের মাঝের ফাইলটি আগে
গ্রহণযোগ্য হয়ে থাকে ।
আজ এই পর্যন্তই আবার দেখা হবে আগামি পর্বে
নতুন কিছু নিয়ে । যাবার আগে আপনাদের একটি ফ্রী উপদেশ দিয়ে যাই তা হল নিজে
শিখুন এবং অন্য কে শিখতে সহয়তা করুন ।
---------------------------4-----------------------
তাহলে এই বার সহজ বাংলায় সি এস এস/ CSS
(CASCADING STYLE SHEET ) শিখুন : পর্ব- ৪ শুরু করা যাক কি বলেন ? আমার এই
পর্ব শুরু করার আগে আমি আপনাদের কাছে একটি ছোট অনুরোধ করবো ,আশা করি
আপনারা আমার এই ছোট অনুরোধটি রাখার চেষ্টা করবেন ।অনুরোধটি হচ্ছে আমার
টিউটোরিয়ালটি যদি কারো বুজতে সমস্যা হয় তাহলে একটু কষ্ট করে কমেন্ট করে
জানাবেন ।আমি চেষ্টা করবো তাহার সমাধান দেয়ার ধন্যবাদ তাহলে শুরু করা যাক
ধন্যবাদ তাহলে শুরু করা যাক সি এস এস /C S S ব্যাক গ্রাউন্ড >>>>ব্যাক গ্রাউন্ড কালার নির্ধারণ<<<<<
আমাদের এই পর্বের শিখার বিষয় হচ্ছে সি এস এস
/C S S ব্যাক গ্রাউন্ড । সি এস এস ব্যাক গ্রাউন্ড প্রোপার্টি গুলো একটি
এলিমেন্টের ব্যাক গ্রাউন্ড ইফেক্ট নির্ধারণ করে । তাহলে দেখা যাক কিভাবে
আমাদের ব্যাক গ্রাউন্ড ইফেক্ট নির্ধারণ করতে হবে। আপনারা নিশ্চয় এতদিন
কালার প্রকাশ করেছেন কালারের নিদিষ্ট নাম দিয়ে এখন থেকে আপনি ইচ্ছা করেলে
কালার প্রকাশ করতে পারবেন কোড এর মাধ্যমে ।কালার কোডে প্রকাশের আগে অবশ্যই
আমাদের জানতে হবে কোন কালারের কি কোড । এজন্য আপনাদের আমিও একটি দিচ্ছি
আপনারা একটু কষ্ট করে লিংকে ঢুকে কোডটি দেখে নিন
>>>>>>>>>>>>
…………… ওয়েব সাইড লিংক……………- নোটপ্যাড খুলুন
- নিচের মত করে কোড গুলো লিখুন
<head>
<style type=”text/css”>
body
{
background-color:#B8860B;
}
h1
{
background-color:#5F9EA0;
}
p
{
background-color:#808080;
}
</style>
</head>
<body>
<h1>IslamForUniverse.com</h1>
<p>Mohammod Ikhtiar Hossain</p>
</body>
</html>
- ফাইলটি আপনার নিজস্ব একটি নাম দিয়ে সেভ করুন অবশ্যই মনে রাখবেন নামের শেষে অবশ্যই .html লিখবেন ।
- এই বার ফাইলটি খুলুন । নিচের মত ফলাফল দেখতে পারবেন ।ব্যাক গ্রাউন্ড কালার হবে DarkGoldenRod এবং হেডিং কালার হচ্ছে CadetBlueআর প্যারাগ্রাফ কালার হচ্ছে Grey
>>>>>>>>> কোন ইমেজকে ব্যাক গ্রাউন্ড হিসেবে নির্ধারণ <<<<<<<<<<
আপনারা তো বুজতেই পারছেন আমি এখন আপনাদের
দেখাব কিভাবে ইমেজকে ব্যাক গ্রাউন্ড ইমেজ হিসেবে নির্ধারণ করবেন । তাহলে
দেরি কেন শুরু করে দেয়া যাক …
- প্রথমেই নোট প্যাড ওপেন করুন
- নিচের মত করে কোড লিখুন
<head>
<style type=”text/css”>
body
{
background-image:url(’534987_3268625511805_1152354651_32686274_1601375275_n.jpg’);
}
</style>
</head>
<body>
<h1> TUNER PAGE </h1>
</body>
</html>
- এই বার ফাইলটি আপনার নির্দিষ্ট একটি নামে সেভ করুন অবশ্যই মনে রাখবেন যে নামের শেষে .html যুক্ত করবেন
- আমি এখানে আমার পছন্দের একটি ইমেজ ব্যবহার করেছি । আপনি ইচ্ছা করলে আপনার নিজের পছন্দের একটি ছবি ব্যবহার করতে পারবেন । ছবিটি নির্ধারণ করতে হলে প্রথমে আপনার ছবিটির প্রপার্টি তে প্রবেশ করতে হবে সেখান থেকে আপনি আপনার ছবিটির নাম নিতে হবে ।অতপর নামটির সাথে আপনি ছবিটির নিদিষ্ট ফরমেট যুক্ত করে দিতে হবে তাহলে আপনার কাজ শেষ ।
- একটি কথা অবশ্যই মনে রাখবেন যে HTML ফাইল এবং আপনার সিলেক্ট করা ছবিটি একই ফোল্ডারে রাখতে হবে ।নাহলে কিন্তু আপনার পরিশ্রম পণ্ড শ্রম হিসেবে দাঁড়াবে ।
- মনে রাখবেন একটি কথা আমার সিলেক্ট করা ইমেজ টি ছোট ছিল তাই এটি অনেক বার দেখা যাচ্ছে আপনার ইমেজটির আকৃতি যদি বড় হয়ে থাকে তাহলে আপনারটিতে মাত্র একবারই ইমেজ টি আসবে ।
>>>>ব্যাকগ্রাউন্ড ইমেজ কে ভার্টিক্যাল রিপিট করা <<<
- নোটপ্যাড খুলুন
- তাতে কোড লিখুন
<html> <head> <style type="text/css"> body { background-image:url('course-escargot-image-maternelle-poesie.jpg'); background-repeat:repeat-y; } </style> </head> <body> <h1>TUNER PAGE </h1> </body> </html>
- ফাইলটি ঠিক আগের নিয়মেই সেভ করুন
- দেখুন তো নিচের মত ফলাফল দেখতে পারছেন কিনা ?
- আপানার ব্যাকগ্রাউন্ড ইমেজটি একটি নির্দিষ্ট পাশে অবস্থান করবে ।
>>>>>>ব্যাকগ্রাউন্ড ইমেজকে হরাইজন্টালি রিপিট করা <<<<<<<<
- নোটপ্যাড খুলুন
- নিচের কোড লিখুন
<html> <head> <style type="text/css"> body { background-image:url('534987_3268625511805_1152354651_32686274_16013
75275_n.jpg'); background-repeat:repeat-x; } </style> </head> <body> <h1>TUNER PAGE </h1> </body> </html>
- আপনি আপনার নিদিষ্ট নামে সেভ করুন ঠিক আগের নিয়মে
- দেখুন নিচের মত দেখা যাচ্ছে কিনা
>>>>>>ব্যাকগ্রাউন্ড ইমেজকে শুধু একবার প্রদর্শন করা এবং একটি নির্দিষ্ট স্থানে স্থাপন করা <<<<<<
- নোটপ্যাড খুলুন
- নিচের কোড গুলো লিখুন
<head>
<style type=”text/css”>
body
{
background-image:url(‘Zeus–greek-mythology-687267_1024_768.jpg’);
background-repeat:no-repeat;
background-position:left top;
}
</style>
</head>
<body>
<h1>TUNER PAGE</h1>
<p>MOHA PLABON</p>
</body>
</html>
- আপনারা ইচ্ছা করলে আমার মত সাজিয়ে নিতে পারেন বুঝার সুবিধার জন্য । আমি
আমার ইমেজটি LEFT এ দিয়েছি আপনি ইচ্ছা করলে আপনার ইমেজটি সেন্টার কিংবা
রাইটে দিতে পারেন । দেখুনতো আপনার ইমেজটি আমার ইমেজের মত হয়েছে কিনা
>>>>>> পিক্সেল ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজের পজিশন নির্ধারণ <<<<<<
- নোটপ্যাড খুলুন
- নিচের কোড গুলো লিখুন
<head>
<style type=”text/css”>
body
{
background-image:url(‘facebook image.jpg’);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:20px 40px;
}
</style>
</head>
<body>
<h1>TUNER PAGE</h1>
<p>TJ JIBON(DT).</p>
</body>
</html>
- এই বার ফাইলটি আপনার নিদিষ্ট একটি নামে সেভ করুন
- একটি কথা অবশ্যই মনে রাখবেন যে background attachment শুধু মাত্র মজিলা এবং অপেরার fixed background হিসেবে কাজ করবে । আপনি কিন্তু ইচ্ছা করলে পজিশনের পিক্সেলের হার কমিয়ে বাড়িয়ে পজিশনের পরিবর্তন আনতে পারেন ।
- এই বার দেখুন আপনারটি ইমেজটি সঠিক হয়েছে
আজ আপনাদের জন্য এই পর্যন্তই ।আপনাদের সকলকে অসংখ্য ধন্যবাদ আপনাদের এতক্ষণ মুল্যবান সময় আমার সাথে কাটানোর জন্য ।
---------------------------5-----------------------
আজকের ক্লাসের নাম হচ্ছে CSS TEXT . আজ আমি আপনাদের দেখব কি করে সি এস এস টেক্সট প্রপার্টিজের মাধ্যমে কিভাবে পেজে টেক্সট লিখবেন । তাহলে শুরু করা যাক ………
body{color:red}
h1{color:#ooffoo}
h4{color:rgb(255,0,0)
কি কিছুই বুজলেন না দাঁড়ান এখনই সব বুঝতে পারবেন ।
<head>
<style type=”text/css”>
a {text-decoration:none;}
h4 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h1 {text-decoration:blink;}
</style>
</head>
<body>
<p>Link to: <a href=”http://www.tunerpage.com/”>www.tunerpage.com</a></p>
<h4>”Gravitation is not responsible for people falling in love.” – Albert Einstein</h4>
<h2>”Only a life lived for others is a life worthwhile.” – Albert Einstein</h2>
<h3>”Poverty is the parent of revolution and crime.” – Aristotle</h3>
<h1>TAL PATAR SIPAHI</h1>
</body>
</html>
<head>
<style type=”text/css”>
p {text-indent:200px;}
</style>
</head>
<body>
<p>”Our wretched species is so made that those who walk on the well-trodden path always throw stones at those who are showing a new road.” – Voltaire</p>
</body>
</html>
<head>
<style type=”text/css”>
h1 {letter-spacing:5px;}
h2 {letter-spacing:-5px;}
</style>
</head>
<body>
<h1>”Prejudice is opinion without judgement.” – Voltaire</h1>
<h2>”Anything too stupid to be said is sung.” – Voltaire</h2>
</body>
</html>
আজ এই পর্যন্তই, আবার আগামী পর্বে দেখা হবে। আপনারা সকলে ভাল থাকবেন এই দোয়া করি। আমারএই পোস্টটি কেমন হল একটু কষ্ট করে মন্তব্য করে জানাবেন ।এবং যদি কোথায় বুজতে সমস্যা হয় তাহলে একটু কষ্ট করে জানাবেন ।
---------------------------6-----------------------
ফ্রন্ট স্টাইল ব্যবহার হয় বেশিরভাগ ক্ষেত্রেই ইটালিক টেক্সট নির্দিষ্ট করে দিতে । এই প্রপার্টির রয়েছে তিনটি ভ্যালু। যথাঃ
<html>
<head>
<style type=”text/css”>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class=”normal”>”Just as a candle cannot burn without fire, men cannot live without a spiritual life” – Buddha</p>
<p class=”italic”>”An idea that is developed and put into action is more important than an idea that exists only as an idea” – Buddha</p>
<p class=”oblique”>”With our thoughts we create the world” – Buddha</p>
</body>
</html>
♦এই বার ফাইলটি সেভ করুন সেভ করার আগে অবশ্যই একটি কথা মনে রাখবেন যে আপনার নির্দিষ্ট সেভ করা নামের শেষে অবশ্যই .html অ্যাড করবেন ।
♦এই বার ফাইলটি যে কোন ব্রাউজারে ওপেন করুন এবং দেখুন নিচের মত ফ্রন্ট স্টাইলে লেখাটি আসছে কিনা ?
কোন টেক্সটের ফ্রন্ট ফ্যামিলিকে font family প্রপার্টি দ্বারা সেট করা যায় ।যদি কোন ব্রাউজার প্রথম ফ্রন্টকে সমর্থন না করে তবে তা অন্য কোন ফ্রন্ট নিয়ে চেষ্টা করে । যদি অন্য কোন ফ্রন্ট সহজ লভ্য না হয় তবে জেনেরিক ফ্যামিলির একই ধরনের যে কোন ফ্রন্ট কে ব্রাউজার তুলে নিয়ে আসে ।একটি ফ্রন্ট ফ্যামিলির নামে যদি একটি শব্দের বেশি থাকে তাহলে অবশ্যই কোটেশনের মধ্যে রাখতে হবে । যেমনঃ”Times New Roman”. একটির বেশি ফ্রন্ট সেপেরেটেড লিস্টের মাধ্যমে নির্দিষ্ট করা হয় । যেমনঃ p{font family : Times New Roman”,Georgia,Serif}
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<body>
<h1>”The strength of a nation derives from the integrity of the home.” – Confucius</h1>
<p class=”serif”>”A journey of a thousand miles begins with a single step.” – Confucius</p>
<p class=”sansserif”>”Do not impose on others what you yourself do not desire.” – Confucius</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
♦ আপনাদের জন্য আমি নিয়ে আসলাম হরেক রকম ফ্যামিলি ফ্রন্ট ।এই ফ্রন্ট গুলো দিয়ে চেষ্টা করে দেখুন তোঁ কোন ফ্রন্ট আপনাদের কোন স্টাইলের লেখা দেয় ।
টেক্সটের সাইজ নির্ধারণে ফ্রন্ট সাইজ প্রপার্টি ব্যবহার হয় । ওয়েব ডিজাইনের জন্য এটি অন্তত্য গুরুত্বপূর্ণ বিষয় । font size ভ্যালু অ্যাবসলুট এবং রিলেটিভ সাইজের হতে পারে ।
♦ব্যবহারকারীকে সকল ব্রাউজারে টেক্সটের সাইজ পরিবর্তনের সুযোগ দেয় না ।
. ব্যবহার কারী কতৃক ব্রাউজারের সাইজ পরিবর্তনের সুযোগ দেয় ।
. যদি কোন ফ্রন্টের সাইজ নির্দিষ্ট করে না দেয়া হয় তবে নরম্যাল টেক্সটের মত ডিফল্ট সাইজ হবে ।
পিক্সেলের মাধ্যমে টেক্সটের সাইজ নির্ধারণ করলে তা সম্পূর্ণ টেক্সটের উপর নিয়ন্ত্রন প্রদান করে । পিক্সেলের ফ্রন্ট সমূহ হলঃ
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style>
h1 {font-size:50px;}
h2 {font-size:40px;}
p {font-size:30px;}
</style>
</head>
<body>
<h1>”The roots of all goodness lie in the soil of appreciation for goodness.” – Dalai Lama</h1>
<h2>”My religion is very simple. My religion is kindness” – Dalai Lama</h2>
<p>”We can never obtain peace in the outer world until we make peace with ourselves” – Dalai Lama</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
ইন্টারনেটের বহু সমস্যার মধ্যে একটি হল ইন্টারনেট এক্সপ্লোরারের রিসাইজিং সমস্যা এড়াতে অনেক ডেভলোপার পিক্সেলের পরিবর্তে EM ব্যবহার করেন । ই এম ব্যবহার করতে হলে একটি হিসাব জানতে হয় । এটি হচ্ছে pixels/16=em. আপনি নিশ্চয় এতক্ষণ আমার কথা বুঝেন নাই দাঁড়ান এখনই বুঝিয়ে দিচ্ছি । অর্থাৎ নির্দিষ্ট সংখ্যক পিক্সেলকে ১৬দিয়ে ভাগ করলে যে মান বের হয় সেটিই হচ্ছে নির্দিষ্ট সংখ্যক পিক্সেলের EM মান । যদি এখন না বুঝে থাকেন তাও সমস্যা না । দেখুন তোঁ ফ্রন্ট গুলো দ্বারা কিছু বুজতে পারছেন । এখানে আপনাদের সুবিধার জন্য মানে হিসাব বুঝার সুবিধার্থে /*————*/ ব্যবহার করা হয়েছে । সাধারণত কোডিং এর সময় এটি ব্যবহারের প্রয়োজন হয় না ।
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style>
h1 {font-size:5em;}
h2 {font-size:3.75em;}
p {font-size:2.5em;}
</style>
</head>
<body>
<h1>”You’ll miss the best things if you keep your eyes shut.” – Dr Seuss</h1>
<h2>”You are you. Now, isn’t that pleasant?” – Dr Seuss</h2>
<p>”Adults are just obsolete children and the hell with them.” – Dr Seuss</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
এটি ব্যবহারের প্রধান কারন হচ্ছে এটি আপনি যে কোন ব্রাউজারে ওপেন করতে পারবেন । নিচে এটির ফ্রন্ট দেখনো হল এটি মাঝে body এলমেন্ট ব্যবহার করা হয়েছে ।
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style>
body {font-size:100%;}
h1 {font-size:5em;}
h2 {font-size:3.5em;}
p {font-size:2.55em;}
</style>
</head>
<body>
<h1>”Excellence always sells” – Earl Nightingale</h1>
<h2>”What’s going on in the inside shows on the outside” – Earl Nightingale</h2>
<p>”You become what you think about” – Earl Nightingale</p>
<p>”Our attitude towards others determines their attitude towards us” – Earl Nightingale</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
এটি দ্বারা আপনি সিএসএস এর সকল ফ্রন্ট ব্যবহার করতে পারবেন । দেখুন আমি নিচে আমি সকল ফ্রন্টে একটি নির্দিষ্ট ফ্রন্ট দেখিয়ে দিয়েছি ।
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
p.ex1
{
font:15px arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
</style>
</head>
<body>
<p class=”ex1″>”Whatever it is you are feeling is a perfect reflection of what you are in the process of becoming” – Esther Hicks – Abraham</p>
<p class=”ex2″> The only way that you can ever know if something is of value to you is by the way it feels as you are receiving it” – Esther Hicks – Abraham</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>
<body>
<p class=”normal”>”There are no big problems, there are just a lot of little problems” - Henry Ford</p>
<p class=”light”>”There is no man living that can not do more than he thinks he can” - Henry Ford</p>
<p class=”thick”>”Any colour – so long as it’s black” - Henry Ford</p>
<p class=”thicker”>”Money is like an arm or a leg – use it or lose it” -Henry Ford</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
এখন আমরা দেখবো ফ্রন্টের ভরিয়েন্ট নির্ধারণ কি করে করতে হয় । নিন্মে ভরিয়েন্ট নির্ধারণ করার জন্য যে ফ্রন্ট লাগবে তা দেখানো হলঃ
কি ফ্রন্ট দেখে কিছুই বোধগম্য হল না ।দাঁড়ান এখন একটি উদাহরণ দিচ্ছি সেখানেই সকল কিছু বুজতে পারবেন আসা করি । তাহলে শুরু করা যাক
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class=”normal”>”Common sense is not so common.” – Voltaire</p>
<p class=”small”>”Prejudice is opinion without judgement.” – Voltaire</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
---------------------------7-----------------------
CSS Styling Links
তাহলে চলুন এই বার উদাহরণ দেখা যাক।
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
a:link {color:#C0C0C0;} /* unvisited link */
a:visited {color:#000000 ;} /* visited link */
a:hover {color:339966;} /* mouse over link */
a:active {color:#FF9966;} /* selected link */
body{background:#0000FF}
p {font-size:200px;}
p {font-size:100px;}
---------------------------8-----------------------
Table Borders এটি দ্বারা আমরা আমাদের টেবিলের চারদিকের একটি পুরু একটি আবরন তৈরি করে । এটি তৈরি করতে হলে আপনাকে table,tr,th,td
Collapse Borders এটি ব্যবহার করা হয় টেবিল নরমাল ভাবে উপস্থাপন করার জন্য । এখানে আমি শুধু মাত্র একটি কোড ব্যবহার করব। table{bordercollapse:collapse;} এই কোড ব্যবহার করলেই আপনার তৈরি টেবিলটি সাধারন ভাবে উপস্থাপন হবে ।
<html>
<head>
<style type=”text/css”>
table
{
border-collapse:collapse;
}
table,th,td
{ border:20px solid CornflowerBlue; }
body{background:48D1CC}
th { background-color:BlanchedAlmond; }
td { background-color:DarkGoldenRod; }
th{font-size:40px;}
td {font-size:30px;}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
</table>
</body>
</html>
Table Width and Height এটি টেবিলের জন্য অনেক গুরুত্ব পূর্ণ । এটি দ্বারা আমরা আমাদের টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করব । তাহলে আসুন আমরা দেখি কি করে টেবিলের উচ্চতা এবং প্রস্থ নির্ধারণ করি ।
<head>
<style type=”text/css”>
table,th,td
{ border:20px solid CornflowerBlue; }
body{background:48D1CC}
th { background-color:BlanchedAlmond; }
td { background-color:DarkGoldenRod; }
th{font-size:40px;}
td {font-size:30px;}
table
{
width:100%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
</table>
</body>
</html>
Table Text Alignment এটি সি এস এস টেবিল তৈরির ক্ষেত্রে অনেক গুরুত্ব পূর্ণ । এটি টেবিলের টেক্সট সমূহ কিভাবে বিদ্যমান হবে তা নির্ধারণ করে । আসুন তাহলে আমরা টেক্সট সমূহের অবস্থান নির্ধারণ করি । এর আমাদের টেক্সটের কোড ব্যবহার করতে হবে সে গুলো হচ্ছে td{text-align:left; } এখানে আপনে যদি left এর বদলে right কিংবা center ব্যবহার করতে পারেন । আপনি যেটি ব্যবহার করবেন আপনার টেক্সট গুলোর অবস্থান গুলো হবে সে রুপ মানে বাম ,ডান কিংবা মধ্যে । আসুন তাহলে দেখে নেই এটির ব্যবহার।
দুই প্রকারঃ ১. horizontal alignment:
<head>
<style type=”text/css”>
table,th,td
{
border:5px solid 7CFC00;
}
th { background-color:8B4513; }
td { background-color:00008B; }
th{font-size:60px;}
td {font-size:40px;}
td
{
height:200px;
vertical-align:top;
}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
<th>BANGLADESH</th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>bangladesh </td>
</tr>
</table>
</body>
</html>
Table Padding এটি দ্বারা প্যাড্ এর সাইজ নির্ধারণ করা হয় । আসুন তাহলে দেখি কি করে সাইজ নির্ধারণ করতে পারি । আমরা প্যাডের সাইজ নির্ধারণ করার জন্য কোড ব্যবহার করবঃ td{padding:100px;}
Table Color এটি সম্পর্কে আর কি বলব টেবিল কালার আপনাদের আগেই অনেক কিছু জানিয়ে দিয়েছি । এখন আপনার আরেকটু দেখিয়ে দেই আসুন । টেবিল কালারের জন্য এখন আমরা যে কোড ব্যবহার করব সেগুলো হচ্ছে th{background-color:Red;color:800080;} । আমি এখানে শুধু মাত্র th কালার করেছি ।
<head>
<style type=”text/css”>
table, td, th
{
border:10px solid Red;
}
th
{
background-color:Red;
color:800080;
}
th{font-size:40px;}
td {font-size:30px;}
</style>
</head>
<body>
<table>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
<th>BANGLADESH</th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>bangladesh </td>
</tr>
</table>
</body>
</html>
Position of the table caption এটি সম্পর্কে কি বলব টেবিল শিরোনাম অবস্থান। এখানে শুধু একটি কোড বাড়তি ব্যবহার করা হয়েছে সেটি হচ্ছে caption {caption-side:bottom;} ।
<head>
<style type=”text/css”>
table,th,td
{
border:10px solid 8A2BE2;
}
th{font-size:60px;}
td {font-size:40px;}
caption {caption-side:bottom;}
</style>
</head>
<body>
<table border=”3″>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
<th>BANGLADESH</th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>bangladesh </td>
</tr>
</table>
</body>
</html>
---------------------------9-----------------------
আজকের ক্লাসের নাম হচ্ছে CSS TEXT . আজ আমি আপনাদের দেখব কি করে সি এস এস টেক্সট প্রপার্টিজের মাধ্যমে কিভাবে পেজে টেক্সট লিখবেন । তাহলে শুরু করা যাক ………
CSS TEXT ( সি এস এস টেক্সট )
টেক্সট কালার (text color)
কালার প্রপার্টি ব্যবহার হবে পেজের কালার নির্ধারণে । কালার কে তিনটি উপায়ে সেট করা যায়ঃ -
- কালার এর নির্দিষ্ট নাম অনুযায়ী । যেমনঃ blue
- RGBযা একটি কালারের RGB ভ্যালু নির্ধারণ করে । যেমনঃ ” rgb(255,o,o)
- Hex যা একটি কালারের ভ্যালু নির্ধারণ করে ।যেমনঃ “#ffoooo” ।
body{color:red}
h1{color:#ooffoo}
h4{color:rgb(255,0,0)
কি কিছুই বুজলেন না দাঁড়ান এখনই সব বুঝতে পারবেন ।
- নোটপ্যাড খুলুন
- নিচের কোড গুলো লিখুন
<p>
<html>
<head>
<style type="text/css">
body {color:CadetBlue;}
h1 {color:#B8860B;}
p.tt {color:rgb(72,61,139);}
</style> </head>
<body>
<h1>Happiness is the meaning and the purpose of life, the whole aim and end of human existence." - Aristotle</h1>
<p> "Success is not the key to happiness. Happiness is the key to success.
If you love what you are doing, you will be successful." - Albert Schweitzer</p>
<p class="tt">"What progress, you ask, have I made? I have begun to be a friend to myself." - Hecato</p>
</body>
</html>
</p>
- বলুন তো আমি এই কালার কোড এবং rgb কোড গুলো কোথায় থেকে সংগ্রহ করলাম
একটু চিন্তা করেন পেয়ে যাবেন কি পেলেন না আমি আপনাদের গত পড়বে একটি ওয়েব সাইডের লিংক দিয়েছিলাম সেখান থেকে নিয়ে নিয়েছি আপনারাও একটু কষ্ট করে নিয়ে নিবেন ।
- p.tt এর অর্থ নিশ্চয় চিন্তা করছেন এটি শুধু মাত্র এইচটিএমএল এর সাথে সি এস এস এর লিংক স্থাপন করেছে মানে আপনি ইচ্ছা করলে tt জায়গায় tb ,fr কিংবা আপনার মনমত যে কোন ট্যাগ ব্যবহার করতে পারবেন
- দেখুন তো আপনার পেজের লিখা গুলো এরূপ হয়েছে কিনাঃ
টেক্সট অ্যালাইনমেন্ট (text alignment)
text align প্রোপার্টি ব্যবহার হয় কোন পেজের
হরাইজন্টাল অ্যালাইনমেন্ট সেট করার জন্য ।টেক্সট কে ডানে ,বামে কিংবা
মাঝখান থেকে অ্যালাইন করার পাশাপাশি জাস্টিফাইড অ্যালাইনও নির্ধারণ করা যায়
জাস্টিফাইড অ্যালাইন সেট করা হয় তখনিই যখন
টেক্সট টুকুতে অবস্থিত প্রতিটি লাইন সমানভাবে উইডথ অনুযায়ী বিন্যস্ত হয়
এবং ডান ও বাম মার্জিন সমান যেমনটা আপনি ম্যাগাজিন কিংবা পত্রিকায় দেখেন
।তাও বুজেন নাই তাহলে এখনই বুজে নিন । তাহলে -
-
- নোটপ্যাড খুলুন
- নিচের কোড গুলো লিখুন
<p>
<html>
<head>
<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:AlbertEinstein;}
</style>
</head>
<body>
<h1> "These thoughts did not come in any verbal formulation.
I rarely think in words at all. A thought comes,
and I may try to express it in words afterward". - Albert Einstein -</h1>
<p class="date">january, 2050</p>
<p class="main">"I think and think for months and years.
Ninety-nine times, the conclusion is false.
The hundredth time I am right." - Albert Einste</p>
<p><b>Note:</b>The human mind has first to construct forms, independently,
before we can find them in things." - Albert Einstein</p>
</body>
</html>
</p>
- আমার পেজটি এরূপ এসেছে দেখুনতো আপনার পেজটি কি রুপ এসেছে । দেখুন আমি প্রথম লেখাটি center এ কারন আমি সেট করেছি সেন্টারে । আপনি ইচ্ছা করলে এটি বামে কিংবা
টেক্সট ডেকারেসন(text decaration)
টেক্সট থেকে সেট করতে কিংবা ডেকারেশন সরিয়ে
ফেলতে টেক্সট ডেকারেশন ব্যবহার হয় । টেক্সট ডেকারেসন বেসির ভাগ ক্ষেত্রে
ডিজাইনের থেকে আন্ডার লাইন সরিয়ে দিতে ব্যবহার করা হয় ।
যেমনঃ a{text-decoration:none}
তাহলে আর কথা না বাড়িয়ে দেখি এটি দ্বারা কিভাবে কাজ করা যায় ।
-
- নোটপ্যাড খুলুন
- নিচের কোড গুলো লিখুন
<head>
<style type=”text/css”>
a {text-decoration:none;}
h4 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h1 {text-decoration:blink;}
</style>
</head>
<body>
<p>Link to: <a href=”http://www.tunerpage.com/”>www.tunerpage.com</a></p>
<h4>”Gravitation is not responsible for people falling in love.” – Albert Einstein</h4>
<h2>”Only a life lived for others is a life worthwhile.” – Albert Einstein</h2>
<h3>”Poverty is the parent of revolution and crime.” – Aristotle</h3>
<h1>TAL PATAR SIPAHI</h1>
</body>
</html>
- আপনি আপনার ফাইলটি আপনার একটি নির্দিষ্ট নামে সেভ করুন ।
- দেখবেন প্রথম টিতে আপনার পছন্দের একটি লিংক দিন এবং লিংকটি নাম আপনার পছন্দের যেকোন একটি হতে পারে ।
- একটি জিনিস খেয়াল করুন h1 এর মধ্যে থাকা অংশটুকু এক্সপ্লোরার, ক্রোম এবং সাফারিতে ব্লিঙ্ক করবে না মানে আপনি এটির আসল কাজ দেখতে পারবেন শুধু মাত্র মজিলায় । এইবার চেষ্টা করে এখুন তো আপনি আমার টার মত করতে পারেন নাকি ।
টেক্সট ট্রান্সফরমেশন(text transformation)
টেক্সটের ভিতর আপারকেস ও লোয়ারকেস অক্ষর
নির্ধারণ করতেtext transformation ব্যবহার হয় ।এটি ব্যবহার করে পুরো টেক্সট
আপারকেস ও লোয়ারকেস অক্ষরে কিংবা প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের
লেখায় পরিণত করা যায় ।
তাহলে দেখি এটি কি ভাবে কাজ করে ।
-
- নোটপ্যাড খুলুন
- নিচের কোড গুলো লিখুন
<head>
<style type=”text/css”>
h1.uppercase {text-transform:uppercase;}
h2.lowercase {text-transform:lowercase;}
h3.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<h1>”Wit is educated insolence.” – Aristotle</h1>
<h2>”A friend is a second self.” – Aristotl</h2>
<h3>”Happiness depends upon ourselves.” – Aristotle</h3>
</body>
</html> - ফাইলটি সেভ করুন যেকন একটি নির্দিষ্ট নামে অবশ্যই মনে রাখবেন যে নামের শেষে অবশ্যই .html লেখাটি লিখবেন ।তাহলে দেখুন তো আপনি ফাইলটি সঠিক রূপে তৈরি করতে পারেন কিনা ।
টেক্সট ইন্ডেন্টেশন(text indentation)
টেক্সটের প্রথম লাইনটির ইন্ডেন্টেশন নির্ধারণ করতে text indentation ব্যবহার হয় ।আসুন তাহলে এটির ব্যবহার দেখি।
যেমনঃ p {text-indent:50px;}
- নোডপ্যাড খুলুন
- নিচের মত করে কোড লিখুন
<head>
<style type=”text/css”>
p {text-indent:200px;}
</style>
</head>
<body>
<p>”Our wretched species is so made that those who walk on the well-trodden path always throw stones at those who are showing a new road.” – Voltaire</p>
</body>
</html>
- একটি জিনিস খেয়াল করুন যে আপনি পিক্সেলের মাধ্যমে আপনি ঠিক করবেন আপনার ফাইলটির প্রথম ফাইলের দূরত্ব কতটুকু হবে ।দেখুন তো আপনারটি এ রকম হয়েছে কিনা ।
ক্যারেক্টারসমূহের মধ্যকার স্পেস নির্ধারণ
এটি দ্বারা আমরা শিখবো কি করে টেক্সটের মধ্যের ক্যারেক্টারসমূহের স্পেস বাড়ানো কমানো যায় ।তাহলে দেখা যাক ।
- নোড প্যাড খুলুন
- নিচের মত করে কোড লিখুন
<head>
<style type=”text/css”>
h1 {letter-spacing:5px;}
h2 {letter-spacing:-5px;}
</style>
</head>
<body>
<h1>”Prejudice is opinion without judgement.” – Voltaire</h1>
<h2>”Anything too stupid to be said is sung.” – Voltaire</h2>
</body>
</html>
- দেখুন তো আপনার ফাইলটি আমার টির মত হয়েছে কিনা ।
- দেখুন আমার প্রথম লাইনটির মধ্যে স্পেস বেশি রাখা হয়েছে ।
- এবং ২য় লাইনটির মধ্যে স্পেস একেবারে নেই কারন আমি px এর আগে (-) ব্যবহার করেছি ।
প্যারাগ্রাফের শব্দ সমূহের মধ্যকার হোয়াইট স্পেস বৃদ্ধি করা
এটি দ্বারা আমরা দেখব আমরা কিভাবে প্যারাগ্রাফের হোয়াইট স্পেস বৃদ্ধি করতে পারি ।তাহলে শুরু করা যাক।
- নোড প্যাড খুলুন
- নিচের কোড গুলো লিখুন
<html> <head> <style type="text/css"> p { word-spacing:70px; } </style> </head> <body>
<p>"Just as a candle cannot burn without fire,
men cannot live without a spiritual life" - Buddha</p>
</body> </html>
- দেখুনতো আপনারটি কিরুপ হয়েছে ।
ইমেজ ভারটিক্যাল অ্যালাইমেন্ট নির্ধারণ করা
এটির মাধ্যমে ইমেজের ভারটিক্যাল অ্যালাইমেন্ট সেট করতে পারব । আসুন তাহলে দেখি কিভাবে করা যায় ।
- নোডপ্যাড খুলুন
- নিচের কোড গুলো লিখুন
<html> <head> <style type="text/css"> img.top{vertical-align:text-top} img.super{vertical-align:super} </style> </head> <body> <p>"If you want to live a happy life, tie it to a goal,
not to people or things." - Albert Einstein<img src="author_einstein.jpg"
alt="tal patar sipahi" width="162" height="227"/> <p>Albert Einstein<img src="author_einstein.jpg" alt="tal patar sipahi"
width="162" height="227"/>"Imagination is everything.
It is the preview of life's coming attractions" - Albert Einstein/p> </body> </html>
- দেখুন তো আপনার ইমেজটি সঠিক ভাবে দেখা যাচ্ছে কিনা । আমারটি তো দারুন দেখাচ্ছে দেখুন।
আজ এই পর্যন্তই, আবার আগামী পর্বে দেখা হবে। আপনারা সকলে ভাল থাকবেন এই দোয়া করি। আমারএই পোস্টটি কেমন হল একটু কষ্ট করে মন্তব্য করে জানাবেন ।এবং যদি কোথায় বুজতে সমস্যা হয় তাহলে একটু কষ্ট করে জানাবেন ।
---------------------------6-----------------------
ফ্রন্ট স্টাইল
ফ্রন্ট স্টাইল ব্যবহার হয় বেশিরভাগ ক্ষেত্রেই ইটালিক টেক্সট নির্দিষ্ট করে দিতে । এই প্রপার্টির রয়েছে তিনটি ভ্যালু। যথাঃ
- normal- টেক্সট স্বাভাবিক ভাবে প্রদর্শন হবে ।
- italic- টেক্সট ইটালিক স্টাইলে প্রদর্শন হবে ।
- oblique- টেক্সট অনেকটা ইটালিকের মত প্রদর্শন হবে ।
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
কি বুঝলেন কিছুই না ।তাহলে দাঁড়ান একটি উদাহরণ দেই তাহলেই সব বুজতে পারবেন ।<html>
<head>
<style type=”text/css”>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class=”normal”>”Just as a candle cannot burn without fire, men cannot live without a spiritual life” – Buddha</p>
<p class=”italic”>”An idea that is developed and put into action is more important than an idea that exists only as an idea” – Buddha</p>
<p class=”oblique”>”With our thoughts we create the world” – Buddha</p>
</body>
</html>
♦এই বার ফাইলটি সেভ করুন সেভ করার আগে অবশ্যই একটি কথা মনে রাখবেন যে আপনার নির্দিষ্ট সেভ করা নামের শেষে অবশ্যই .html অ্যাড করবেন ।
♦এই বার ফাইলটি যে কোন ব্রাউজারে ওপেন করুন এবং দেখুন নিচের মত ফ্রন্ট স্টাইলে লেখাটি আসছে কিনা ?
ফ্রন্ট ফ্যমিলি
কোন টেক্সটের ফ্রন্ট ফ্যামিলিকে font family প্রপার্টি দ্বারা সেট করা যায় ।যদি কোন ব্রাউজার প্রথম ফ্রন্টকে সমর্থন না করে তবে তা অন্য কোন ফ্রন্ট নিয়ে চেষ্টা করে । যদি অন্য কোন ফ্রন্ট সহজ লভ্য না হয় তবে জেনেরিক ফ্যামিলির একই ধরনের যে কোন ফ্রন্ট কে ব্রাউজার তুলে নিয়ে আসে ।একটি ফ্রন্ট ফ্যামিলির নামে যদি একটি শব্দের বেশি থাকে তাহলে অবশ্যই কোটেশনের মধ্যে রাখতে হবে । যেমনঃ”Times New Roman”. একটির বেশি ফ্রন্ট সেপেরেটেড লিস্টের মাধ্যমে নির্দিষ্ট করা হয় । যেমনঃ p{font family : Times New Roman”,Georgia,Serif}
p.serif{font-family:”Times New Roman”,Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
তাহলে চলুন এই বার উদাহরণ দেখা যাক।p.sansserif{font-family:Arial,Helvetica,sans-serif;}
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
p.serif{font-family:”Times New Roman”,Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<style type=”text/css”>
p.serif{font-family:”Times New Roman”,Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>”The strength of a nation derives from the integrity of the home.” – Confucius</h1>
<p class=”serif”>”A journey of a thousand miles begins with a single step.” – Confucius</p>
<p class=”sansserif”>”Do not impose on others what you yourself do not desire.” – Confucius</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
♦ আপনাদের জন্য আমি নিয়ে আসলাম হরেক রকম ফ্যামিলি ফ্রন্ট ।এই ফ্রন্ট গুলো দিয়ে চেষ্টা করে দেখুন তোঁ কোন ফ্রন্ট আপনাদের কোন স্টাইলের লেখা দেয় ।
font-family
Georgia, serif
“Palatino Linotype”, “Book Antiqua”, Palatino, serif
“Times New Roman”, Times, serif
Arial, Helvetica, sans-serif
Arial Black, Gadget, sans-serif
“Comic Sans MS”, cursive, sans-serif
Impact, Charcoal, sans-serif
“Lucida Sans Unicode”, “Lucida Grande”, sans-serif
Tahoma, Geneva, sans-serif
“Trebuchet MS”, Helvetica, sans-serif
Verdana, Geneva, sans-serif
“Courier New”, Courier, monospace
“Lucida Console”, Monaco, monospace
|
ফ্রন্ট সাইজ
টেক্সটের সাইজ নির্ধারণে ফ্রন্ট সাইজ প্রপার্টি ব্যবহার হয় । ওয়েব ডিজাইনের জন্য এটি অন্তত্য গুরুত্বপূর্ণ বিষয় । font size ভ্যালু অ্যাবসলুট এবং রিলেটিভ সাইজের হতে পারে ।
অ্যাবসলুট সাইজঃ
♦টেক্সটকে নির্দিষ্ট কোন সাইজে সেট করে ।♦ব্যবহারকারীকে সকল ব্রাউজারে টেক্সটের সাইজ পরিবর্তনের সুযোগ দেয় না ।
রিলেটিভ সাইজঃ
. পারিপার্শ্বিক উপাদান গুলোর সাথে সমন্বয় করে টেক্সটের সাইজ নির্ধারণ করে ।. ব্যবহার কারী কতৃক ব্রাউজারের সাইজ পরিবর্তনের সুযোগ দেয় ।
. যদি কোন ফ্রন্টের সাইজ নির্দিষ্ট করে না দেয়া হয় তবে নরম্যাল টেক্সটের মত ডিফল্ট সাইজ হবে ।
পিক্সেলের মাধ্যমে টেক্সটের সাইজ নির্ধারণ
পিক্সেলের মাধ্যমে টেক্সটের সাইজ নির্ধারণ করলে তা সম্পূর্ণ টেক্সটের উপর নিয়ন্ত্রন প্রদান করে । পিক্সেলের ফ্রন্ট সমূহ হলঃ
h1 {font-size:50px;}
h2 {font-size:40px;}
p {font-size:30px;}
তাহলে চলুন এই বার উদাহরণ দেখা যাক।h2 {font-size:40px;}
p {font-size:30px;}
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style>
h1 {font-size:50px;}
h2 {font-size:40px;}
p {font-size:30px;}
</style>
</head>
<body>
<h1>”The roots of all goodness lie in the soil of appreciation for goodness.” – Dalai Lama</h1>
<h2>”My religion is very simple. My religion is kindness” – Dalai Lama</h2>
<p>”We can never obtain peace in the outer world until we make peace with ourselves” – Dalai Lama</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
EM ব্যবহার করে টেক্সটের সাইজ নির্ধারণঃ
ইন্টারনেটের বহু সমস্যার মধ্যে একটি হল ইন্টারনেট এক্সপ্লোরারের রিসাইজিং সমস্যা এড়াতে অনেক ডেভলোপার পিক্সেলের পরিবর্তে EM ব্যবহার করেন । ই এম ব্যবহার করতে হলে একটি হিসাব জানতে হয় । এটি হচ্ছে pixels/16=em. আপনি নিশ্চয় এতক্ষণ আমার কথা বুঝেন নাই দাঁড়ান এখনই বুঝিয়ে দিচ্ছি । অর্থাৎ নির্দিষ্ট সংখ্যক পিক্সেলকে ১৬দিয়ে ভাগ করলে যে মান বের হয় সেটিই হচ্ছে নির্দিষ্ট সংখ্যক পিক্সেলের EM মান । যদি এখন না বুঝে থাকেন তাও সমস্যা না । দেখুন তোঁ ফ্রন্ট গুলো দ্বারা কিছু বুজতে পারছেন । এখানে আপনাদের সুবিধার জন্য মানে হিসাব বুঝার সুবিধার্থে /*————*/ ব্যবহার করা হয়েছে । সাধারণত কোডিং এর সময় এটি ব্যবহারের প্রয়োজন হয় না ।
h1 {font-size:5em;} /*80px/16=5em */
h2 {font-size:3.75em;} /* 60px/16=3.75em */
p {font-size:2.5em;} /* 40px/16=2.5em */
♦নোটপ্যাড খুলুনh2 {font-size:3.75em;} /* 60px/16=3.75em */
p {font-size:2.5em;} /* 40px/16=2.5em */
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style>
h1 {font-size:5em;}
h2 {font-size:3.75em;}
p {font-size:2.5em;}
</style>
</head>
<body>
<h1>”You’ll miss the best things if you keep your eyes shut.” – Dr Seuss</h1>
<h2>”You are you. Now, isn’t that pleasant?” – Dr Seuss</h2>
<p>”Adults are just obsolete children and the hell with them.” – Dr Seuss</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
Percent এবং Em যৌথ ব্যবহার
এটি ব্যবহারের প্রধান কারন হচ্ছে এটি আপনি যে কোন ব্রাউজারে ওপেন করতে পারবেন । নিচে এটির ফ্রন্ট দেখনো হল এটি মাঝে body এলমেন্ট ব্যবহার করা হয়েছে ।
body {font-size:100%;}
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style>
body {font-size:100%;}
h1 {font-size:5em;}
h2 {font-size:3.5em;}
p {font-size:2.55em;}
</style>
</head>
<body>
<h1>”Excellence always sells” – Earl Nightingale</h1>
<h2>”What’s going on in the inside shows on the outside” – Earl Nightingale</h2>
<p>”You become what you think about” – Earl Nightingale</p>
<p>”Our attitude towards others determines their attitude towards us” – Earl Nightingale</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
এক ডিক্লারেশনে সকল ফ্রন্ট প্রপার্টি নির্ধারণ
এটি দ্বারা আপনি সিএসএস এর সকল ফ্রন্ট ব্যবহার করতে পারবেন । দেখুন আমি নিচে আমি সকল ফ্রন্টে একটি নির্দিষ্ট ফ্রন্ট দেখিয়ে দিয়েছি ।
p.ex1
{
font:15px arial,sans-serif;
}
{
font:15px arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
♦নোটপ্যাড খুলুন{
font:italic bold 12px/30px Georgia,serif;
}
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
p.ex1
{
font:15px arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
</style>
</head>
<body>
<p class=”ex1″>”Whatever it is you are feeling is a perfect reflection of what you are in the process of becoming” – Esther Hicks – Abraham</p>
<p class=”ex2″> The only way that you can ever know if something is of value to you is by the way it feels as you are receiving it” – Esther Hicks – Abraham</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
ফ্রন্টের বোল্ড নেস নির্ধারণ
আমরা যে লেখা বোল্ড করে লিখি সেটি যে সেটি যে
সি এস এস দ্বারা তৈরি করা যায় সেটি কি আপনারা জানেন । দাঁড়ান আমি এখনই
আমি আপনাদের ফ্রন্টের বোল্ডনেস নির্ধারণ করার সিস্টেম টি বলে দিচ্ছি ।
দেখুন নিন্মে বোল্ডনেসের ফ্রন্ট গুলো দেখান হলঃ
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
কি কিছুই বুজলেন না দাঁড়ান আপনাদের একটি উদাহরণ দেখাচ্ছি । এই উদাহরণের মাধ্যমেই আপনারা বিষয়টি বুজতে পারবেন ।p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
</style>
</head>
<body>
<p class=”normal”>”There are no big problems, there are just a lot of little problems” - Henry Ford</p>
<p class=”light”>”There is no man living that can not do more than he thinks he can” - Henry Ford</p>
<p class=”thick”>”Any colour – so long as it’s black” - Henry Ford</p>
<p class=”thicker”>”Money is like an arm or a leg – use it or lose it” -Henry Ford</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
ফ্রন্টের ভরিয়েন্ট নির্ধারণ
এখন আমরা দেখবো ফ্রন্টের ভরিয়েন্ট নির্ধারণ কি করে করতে হয় । নিন্মে ভরিয়েন্ট নির্ধারণ করার জন্য যে ফ্রন্ট লাগবে তা দেখানো হলঃ
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
p.small {font-variant:small-caps;}
কি ফ্রন্ট দেখে কিছুই বোধগম্য হল না ।দাঁড়ান এখন একটি উদাহরণ দিচ্ছি সেখানেই সকল কিছু বুজতে পারবেন আসা করি । তাহলে শুরু করা যাক
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
</style>
</head>
<body>
<p class=”normal”>”Common sense is not so common.” – Voltaire</p>
<p class=”small”>”Prejudice is opinion without judgement.” – Voltaire</p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । দেখুন তোঁ আপনার ফাইলের ফ্রন্ট আমার ফাইলের ফ্রন্টের মত হয়েছে কিনা ?
---------------------------7-----------------------
CSS Styling Links
এটি সম্পর্কে আর কি বলবো । এটি দ্বারা আপনি
সি এস এস এর যে কোন সম্পত্তি যেমন রঙ, ফন্ট পরিবার, পটভূমি, ইত্যাদি তে
স্টাইল করা যায় ।
লিংকের চারটি ভিন্ন ভিন্ন অবস্থান আছে । সেগুলো হচ্ছে ঃ
LINK : এটি একটি সাধারন লিঙ্ক । যেটি এখন ও ব্যবহার হয় নি ।মানে লিংক প্রথমবার ব্যবহার না করা পর্যন্ত যেভাবে প্রদর্শিত হয় ।
VISITED :এটি হচ্ছে পরিদর্শন লিংক । অর্থ্যাৎ এটি এমন লিংক যেটি এক বা একাধিক বার ব্যবহার হয়েছে ।
HOVER :এটি এমন একটি লিংক যেটির উপর মাউস রাখলে ভিজুয়েল ইফেক্ট দেখা দিবে ।
ACTIVE : এটি একটি সচল লিংক । অর্থ্যাৎ লিংকের উপর মাউস দ্বারা ক্লিক করলে লিংকটি যেভাবে দেখাবে তাকে সক্রিয় লিংক বলে ।
তাহলে আসুন আমরা উদাহরণের মাধ্যমে দেখি কি করে একই সাথে চারটি পার্টের ব্যবহার করতে পারিঃACTIVE : এটি একটি সচল লিংক । অর্থ্যাৎ লিংকের উপর মাউস দ্বারা ক্লিক করলে লিংকটি যেভাবে দেখাবে তাকে সক্রিয় লিংক বলে ।
তাহলে চলুন এই বার উদাহরণ দেখা যাক।
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
a:link {color:#C0C0C0;} /* unvisited link */
a:visited {color:#000000 ;} /* visited link */
a:hover {color:339966;} /* mouse over link */
a:active {color:#FF9966;} /* selected link */
body{background:#0000FF}
p {font-size:200px;}
p {font-size:100px;}
</style>
<head>
<head>
<body>
<p style=”background-color:#FF0000″><b><a href=”http://www.tunerpage.com/” >TUNER PAGE </a></b></p>
<p style=”background-color:#00FFFF”><a href=”http://www.tunerpage.com/css-bangla-tutorial” > CSS ( Cascading Style Sheets)</a></p>
</body>
</html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । আপনারা নিশ্চয় বুজতে পারছেন যে আমি লিংক ছাড়া আর কিছু যোগ করেছি এগুলোর সাথে আমি আগেই আপনাদের পরিচয় করিয়েছি । সেগুলো হচ্ছে ফ্রন্ট সাইজ এবং ব্যাক গ্রাউন্ড কালার । আপনারা ইচ্ছা করলে ফ্রন্ট সাইজ এবং গ্রাউন্ড কালার বাদ দিয়ে করতে পারেন ।
এখানে লিংক থেকে সকল প্রকার বাড়তি প্রসাধনী সরিয়ে ফেলা হবে । কারন এটি নিয়ে তেমন কিছু বলার নাই
তাহলে চলুন এই বার উদাহরণ দেখা যাক।
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । আমি এখানে সামান্য কিছু বাড়তি যোগ করেছি সেটি হচ্ছে ফ্রন্ট সাইজ (p {font-size:200px;}) আপনি ইচ্ছা করলে এটি নাও যোগ করতে পারেন ।
♦এই বার এই লিংকে ক্লিক করে দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
নামটি শুনে নিশ্চয় বুজতে পারছেন যে এটির কাজ কি । এটি দ্বারা আমরা লিংকের ব্যাক গ্রাউন্ড কালার করবো এটি কাজ আমি আপনাদের প্রথমেই দেখিয়েছি ।এখন তাও একবার দেখিয়ে দিচ্ছি । কারন এটিতে আমরা অন্য পন্থা ব্যবহার করবো ।
তাহলে চলুন এই বার উদাহরণ দেখা যাক।
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।আমি এখানে সামান্য কিছু বাড়তি যোগ করেছি সেটি হচ্ছে ফ্রন্ট সাইজ (p {font-size:200px;}) আপনি ইচ্ছা করলে এটি নাও যোগ করতে পারেন ।
♦এই বার এই লিংকে ক্লিক করে দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
ভালো করে লক্ষ্য করে দেখুন আমি a:link {background-color:003366;} /* unvisited link */এই এলিমেন্ট গুলো আগে শুধু মাত্র ”a” বসিয়েছি কিন্তু কোন সংখ্যা বসাইনি । এখন আমি দেখাব “a” পরে যদি one , two , three এরূপ সংখ্যা দ্বারা কি করে বসাতে হয় । আর কি কি পরিবর্তন হতে পারে ।
তাহলে চলুন এই বার উদাহরণ দেখা যাক।
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
a.five:hover {text-decoration:underline;}
♦এই বার এই লিংকে ক্লিক করে দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । আপনারা নিশ্চয় বুজতে পারছেন যে আমি লিংক ছাড়া আর কিছু যোগ করেছি এগুলোর সাথে আমি আগেই আপনাদের পরিচয় করিয়েছি । সেগুলো হচ্ছে ফ্রন্ট সাইজ এবং ব্যাক গ্রাউন্ড কালার । আপনারা ইচ্ছা করলে ফ্রন্ট সাইজ এবং গ্রাউন্ড কালার বাদ দিয়ে করতে পারেন ।
♦এই বার এই লিংকে ক্লিক করে দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
CSS Text Decoration(টেক্সট সজ্জা)
এখানে লিংক থেকে সকল প্রকার বাড়তি প্রসাধনী সরিয়ে ফেলা হবে । কারন এটি নিয়ে তেমন কিছু বলার নাই
তাহলে চলুন এই বার উদাহরণ দেখা যাক।
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
p {font-size:200px;}a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
</style>
</head>
<body>
<p><b><a href=”http://www.tunerpage.com/archives/123281” >TUNER PAGE TJ CLUB</a></b></p>
<p><b><a href=”http://www.tunerpage.com/archives/123281” >TUNER PAGE TJ CLUB</a></b></p>
</body>
</html>♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । আমি এখানে সামান্য কিছু বাড়তি যোগ করেছি সেটি হচ্ছে ফ্রন্ট সাইজ (p {font-size:200px;}) আপনি ইচ্ছা করলে এটি নাও যোগ করতে পারেন ।
♦এই বার এই লিংকে ক্লিক করে দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
CSS Background Color(পটভূমির রঙ )
নামটি শুনে নিশ্চয় বুজতে পারছেন যে এটির কাজ কি । এটি দ্বারা আমরা লিংকের ব্যাক গ্রাউন্ড কালার করবো এটি কাজ আমি আপনাদের প্রথমেই দেখিয়েছি ।এখন তাও একবার দেখিয়ে দিচ্ছি । কারন এটিতে আমরা অন্য পন্থা ব্যবহার করবো ।
তাহলে চলুন এই বার উদাহরণ দেখা যাক।
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
a:link {background-color:003366;} /* unvisited link */
a:visited {background-color:000066;} /* visited link */
a:hover {background-color:00CCCC;} /* mouse over link */
a:active {background-color:FFCC33;} /* selected link */
a:link {background-color:003366;} /* unvisited link */
a:visited {background-color:000066;} /* visited link */
a:hover {background-color:00CCCC;} /* mouse over link */
a:active {background-color:FFCC33;} /* selected link */
p {font-size:100px;}
</style>
</head>
<body>
<p><b><a href=”http://www.tunerpage.com/archives/104685 “>TUNER PAGE Library</a></b></p>
<p><b><a href=”http://www.tunerpage.com/archives/104685 “>TUNER PAGE Library</a></b></p>
</body>
</html>♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।আমি এখানে সামান্য কিছু বাড়তি যোগ করেছি সেটি হচ্ছে ফ্রন্ট সাইজ (p {font-size:200px;}) আপনি ইচ্ছা করলে এটি নাও যোগ করতে পারেন ।
♦এই বার এই লিংকে ক্লিক করে দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
নতুন কিছু স্টাইল
ভালো করে লক্ষ্য করে দেখুন আমি a:link {background-color:003366;} /* unvisited link */এই এলিমেন্ট গুলো আগে শুধু মাত্র ”a” বসিয়েছি কিন্তু কোন সংখ্যা বসাইনি । এখন আমি দেখাব “a” পরে যদি one , two , three এরূপ সংখ্যা দ্বারা কি করে বসাতে হয় । আর কি কি পরিবর্তন হতে পারে ।
তাহলে চলুন এই বার উদাহরণ দেখা যাক।
♦নোটপ্যাড খুলুন
♦ নিচের মত করে কোড লিখুন
<html>
<head>
<style type=”text/css”>
a.one:link {color:0066FF;}
a.one:visited {color:6666FF;}
a.one:hover {color:#008B8B;}
a.one:link {color:0066FF;}
a.one:visited {color:6666FF;}
a.one:hover {color:#008B8B;}
a.two:link {color:CadetBlue;}
a.two:visited {color:00008B;}
a.two:hover {font-size:200%;}
a.two:visited {color:00008B;}
a.two:hover {font-size:200%;}
a.three:link {color:F0FFFF;}
a.three:visited {color:006400;}
a.three:hover {background:FFD700;}
a.three:visited {color:006400;}
a.three:hover {background:FFD700;}
a.four:link {color:Lavender;}
a.four:visited {color:66CDAA;}
a.four:visited {color:66CDAA;}
a.four:hover{font-style:oblique;}
a.five:link {color:9370D8;text-decoration:none;
a.five:link {color:9370D8;text-decoration:none;
a.five:visited {color:00FF7F;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p><b><a class=”one” href=”http://www.tunerpage.com/” >TUNER PAGE </a></b></p>
<p><b><a class=”two” href=”http://www.tunerpage.com/” >TUNER PAGE </a></b></p>
<p><b><a class=”three” href=”http://www.tunerpage.com/” > TUNER PAGE </a></b></p>
<p><b><a class=”four” href=”http://www.tunerpage.com/” > TUNER PAGE </a></b></p>
<p><b><a class=”five” <a href=”http://www.tunerpage.com/” >TUNER PAGE </a></b></p>
</body>
</html><p><b><a class=”two” href=”http://www.tunerpage.com/” >TUNER PAGE </a></b></p>
<p><b><a class=”three” href=”http://www.tunerpage.com/” > TUNER PAGE </a></b></p>
<p><b><a class=”four” href=”http://www.tunerpage.com/” > TUNER PAGE </a></b></p>
<p><b><a class=”five” <a href=”http://www.tunerpage.com/” >TUNER PAGE </a></b></p>
</body>
♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । আসুন এই বার আমরা দেখি আমরা এখানে কি কি পরিবর্তন করেছি
- এটিতে মাউস রাখলে লিংকের কালার পরিবর্তন করছি ।
a.one:link {color:0066FF;}
a.one:visited {color:6666FF;}
a.one:hover {color:#008B8B;}
a.one:visited {color:6666FF;}
a.one:hover {color:#008B8B;}
2. এটিতে মাউসের এরো রাখলে লিংকের লেখার সাইজের পরিবর্তন হচ্ছে । কারন এখানে আমরা ফ্রন্টের (a.two:hover {font-size:200%;}) সাইজের পরিবর্তন করেছি ।
3.এটিতে আমরা ব্যাক গ্রাউন্ড কালার ব্যবহার করেছি । a.three:hover {background:FFD700;} এটি সম্পর্কে অন্য একটি উদাহরণে দেখানো হয়েছেন ।
4. এটিতে ফ্রন্ট পরিবর্তন হচ্ছে কারন এখানে দুটি ফ্রন্ট ব্যবহার করা হয়েছে । four:hover{font-style:oblique;} । একটি হচ্ছে প্যারাগ্রাফ ফ্রন্ট অন্যটি obique ফ্রন্ট ।
5. এখানে লিংকের নিচ থেকে আন্ডার লাইন তুলে দেয়া হয়েছে ।a.five:link {color:9370D8;text-decoration:none;
a.five:visited {color:00FF7F;text-decoration:none;}a.five:hover {text-decoration:underline;}
---------------------------8-----------------------
CSS Tables
সিএসএস টেবিল ওয়েব ডিজাইনের ক্ষেত্রে অনেক
গুরুতপূর্ণ । ওয়েব ডিজাইনে সি এস এস টেবিলের বহুল ব্যবহার হয় । সি এস এস
এইচটিএমএল টেবিলের একটু উন্নত ভার্শন । এখানে আপনি এইচটিএমএল টেবিলটি আরও
আকর্ষণীয় করে উপস্থাপন করতে পারবেন । আসুন আমরা এখন সি এস এস টেবিল তৈরিতে
নেমে পড়ি ।
Table Borders
Table Borders এটি দ্বারা আমরা আমাদের টেবিলের চারদিকের একটি পুরু একটি আবরন তৈরি করে । এটি তৈরি করতে হলে আপনাকে table,tr,th,td
- tr: আপনাকে আপনার কোড গুলো tr ব্যবহার করে লিখতে হবে । যেমনঃ<tr> <td>tuner page </td><td>tal patar sipahi </td> </tr>
- th: এটি ব্যবহার করে আমরা আমাদের হেডিং লিখব। যেমনঃ<th>TUNER PAGE </th><th > TAL PATAR SIPAHI </th>
- td:এটি আমরা p ট্যাগ এর পরিবর্তে ব্যবহার করব । যেমনঃ <td>tuner page </td>
আসুন তাহলে শুরু করা যাকঃ
প্রথমে নোট প্যাড খুলুন
এখন দ্রুত নিচের কোড গুলো লিখে ফেলুন
<html>
<head>
<style type=”text/css”>
table,th,td
{ border:20px solid CornflowerBlue; }
body{background:48D1CC}
th { background-color:#6495ed; }
td { background-color:FF4500; }
th{font-size:40px;}
td {font-size:30px;}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
</table>
</body>
</html>
<head>
<style type=”text/css”>
table,th,td
{ border:20px solid CornflowerBlue; }
body{background:48D1CC}
th { background-color:#6495ed; }
td { background-color:FF4500; }
th{font-size:40px;}
td {font-size:30px;}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
</table>
</body>
</html>
আপনি আপনার নির্দিষ্ট নামে সেভ করুন ।
অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন । এই বার লেখাটি যে কোন
ব্রাউজারে ওপেন করুন ।আমি এখানে কিছু বাড়তি আইটেম যোগ করেছি সেগুলো হচ্ছে body-background color . th- background color মানে শিরোনামের নিচের অংশ কালার , td= background color মানে প্যারাগ্রাফের নিচের অংশ কালার এবং শিরোনাম এবং প্যারাগ্রাফ এর নিচের সাইজের পরিবর্তন । body{background:48D1CC}/th{background-color:#6495ed;}/td{background-color:FF4500;}/th{font-size:40px;}/td {fontsize:30px;}
এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Collapse Borders
Collapse Borders এটি ব্যবহার করা হয় টেবিল নরমাল ভাবে উপস্থাপন করার জন্য । এখানে আমি শুধু মাত্র একটি কোড ব্যবহার করব। table{bordercollapse:collapse;} এই কোড ব্যবহার করলেই আপনার তৈরি টেবিলটি সাধারন ভাবে উপস্থাপন হবে ।
- আসুন তাহলে শুরু করা যাকঃ
- প্রথমে নোট প্যাড খুলুন
- এখন দ্রুত নিচের কোড গুলো লিখে ফেলুন
<head>
<style type=”text/css”>
table
{
border-collapse:collapse;
}
table,th,td
{ border:20px solid CornflowerBlue; }
body{background:48D1CC}
th { background-color:BlanchedAlmond; }
td { background-color:DarkGoldenRod; }
th{font-size:40px;}
td {font-size:30px;}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
</table>
</body>
</html>
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।আমি এখানে কিছু বাড়তি আইটেম যোগ করেছি সেটি হচ্ছে আমি আগের উপরের পোস্টটি খালি নিচের বসিয়ে দিয়েছি আমার অনুমতি নিয়ে । অর্থ আগের সকল উপাদান বিদ্যমান আছে ।
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Table Width and Height
Table Width and Height এটি টেবিলের জন্য অনেক গুরুত্ব পূর্ণ । এটি দ্বারা আমরা আমাদের টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করব । তাহলে আসুন আমরা দেখি কি করে টেবিলের উচ্চতা এবং প্রস্থ নির্ধারণ করি ।
- প্রথমে নোট প্যাড খুলুন
- এখন দ্রুত নিচের কোড গুলো লিখে ফেলুন
<head>
<style type=”text/css”>
table,th,td
{ border:20px solid CornflowerBlue; }
body{background:48D1CC}
th { background-color:BlanchedAlmond; }
td { background-color:DarkGoldenRod; }
th{font-size:40px;}
td {font-size:30px;}
table
{
width:100%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
</tr>
</table>
</body>
</html>
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।আমি এখানে কিছু বাড়তি আইটেম যোগ করেছি সেটি হচ্ছে আমি আগের উপরের পোস্টটি খালি নিচের বসিয়ে দিয়েছি আমার অনুমতি নিয়ে । অর্থ আগের সকল উপাদান বিদ্যমান আছে ।
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Table Text Alignment
Table Text Alignment এটি সি এস এস টেবিল তৈরির ক্ষেত্রে অনেক গুরুত্ব পূর্ণ । এটি টেবিলের টেক্সট সমূহ কিভাবে বিদ্যমান হবে তা নির্ধারণ করে । আসুন তাহলে আমরা টেক্সট সমূহের অবস্থান নির্ধারণ করি । এর আমাদের টেক্সটের কোড ব্যবহার করতে হবে সে গুলো হচ্ছে td{text-align:left; } এখানে আপনে যদি left এর বদলে right কিংবা center ব্যবহার করতে পারেন । আপনি যেটি ব্যবহার করবেন আপনার টেক্সট গুলোর অবস্থান গুলো হবে সে রুপ মানে বাম ,ডান কিংবা মধ্যে । আসুন তাহলে দেখে নেই এটির ব্যবহার।
দুই প্রকারঃ ১. horizontal alignment:
2.vertical alignment:
- horizontal alignment এর জন্য যে কোড আমাদের ব্যবহার করতে হবেঃ td{text-align:right;} এটি দ্বারা আপনি টেবিলের টেক্সট সমূহের ডান বাম কিংবা মধ্যবর্তী স্থান নির্ধারণ করবেন ।
- vertical alignment এর জন্য যে কোড আমাদের ব্যবহার করতে হবেঃ td{height:100px;vertical-align:top;}এটি দ্বারা আপনি টেবিলের টেক্সট সমূহের top, bottom, কিংবা middle নির্ধারণ করবেন সাথে আপনি আপনার টেবিলের সাইজও নির্ধারণ করতে পারবেন
- প্রথমে নোট প্যাড খুলুন
- এখন দ্রুত নিচের কোড গুলো লিখে ফেলুন
<head>
<style type=”text/css”>
table,th,td
{
border:5px solid 7CFC00;
}
th { background-color:8B4513; }
td { background-color:00008B; }
th{font-size:60px;}
td {font-size:40px;}
td
{
height:200px;
vertical-align:top;
}
</style>
</head>
<body>
<table>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
<th>BANGLADESH</th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>bangladesh </td>
</tr>
</table>
</body>
</html>
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন । এখানে vertical alignment দেখান হয়েছে যদি আপনি horizontal alignment ব্যবহার করতে চান তাহলে শুধু মাত্র vertical alignment এর কোড সমূহের বদলে horizontal alignment এর কোড সমূহ ব্যবহার করবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Table Padding
Table Padding এটি দ্বারা প্যাড্ এর সাইজ নির্ধারণ করা হয় । আসুন তাহলে দেখি কি করে সাইজ নির্ধারণ করতে পারি । আমরা প্যাডের সাইজ নির্ধারণ করার জন্য কোড ব্যবহার করবঃ td{padding:100px;}
- প্রথমে নোট প্যাড খুলুন ।
- নিচের কোড গুলো লিখুন
| <html> | |
| <head> | |
| <style type=”text/css”> | |
| table,th,td | |
| { | |
| border:10px solid 8A2BE2; | |
| } | |
| th { background-color:DC143C; } | |
| td { background-color:DAA520; } | |
| th{font-size:60px;} | |
| td {font-size:40px;} | |
| td | |
| { | |
| padding:100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table> | |
| <tr> | |
| <th>TUNER PAGE </th> | |
| <th > TAL PATAR SIPAHI </th> | |
| <th>BANGLADESH</th> | |
| </tr> | |
| <tr> | |
| <td>tuner page </td> | |
| <td>tal patar sipahi </td> | |
| <td>Bangladesh </td> | |
| </tr> | |
| <tr> | |
| <td>tuner page </td> | |
| <td>tal patar sipahi</td> | |
| <td>Bangladesh </td> | |
| </tr> | |
| <tr> | |
| <td>tuner page </td> | |
| <td>tal patar sipahi</td> | |
| <td>Bangladesh </td> | |
| </tr> | |
| <tr> | |
| <td>tuner page </td> | |
| <td>tal patar sipahi</td> | |
| <td>bangladesh </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Table Color
Table Color এটি সম্পর্কে আর কি বলব টেবিল কালার আপনাদের আগেই অনেক কিছু জানিয়ে দিয়েছি । এখন আপনার আরেকটু দেখিয়ে দেই আসুন । টেবিল কালারের জন্য এখন আমরা যে কোড ব্যবহার করব সেগুলো হচ্ছে th{background-color:Red;color:800080;} । আমি এখানে শুধু মাত্র th কালার করেছি ।
- প্রথমে নোট প্যাড খুলুন ।
- নিচের কোড গুলো লিখুন
<head>
<style type=”text/css”>
table, td, th
{
border:10px solid Red;
}
th
{
background-color:Red;
color:800080;
}
th{font-size:40px;}
td {font-size:30px;}
</style>
</head>
<body>
<table>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
<th>BANGLADESH</th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>bangladesh </td>
</tr>
</table>
</body>
</html>
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
Position of the table caption
Position of the table caption এটি সম্পর্কে কি বলব টেবিল শিরোনাম অবস্থান। এখানে শুধু একটি কোড বাড়তি ব্যবহার করা হয়েছে সেটি হচ্ছে caption {caption-side:bottom;} ।
- প্রথমে নোট প্যাড খুলুন ।
- নিচের কোড গুলো লিখুন
<head>
<style type=”text/css”>
table,th,td
{
border:10px solid 8A2BE2;
}
th{font-size:60px;}
td {font-size:40px;}
caption {caption-side:bottom;}
</style>
</head>
<body>
<table border=”3″>
<tr>
<th>TUNER PAGE </th>
<th > TAL PATAR SIPAHI </th>
<th>BANGLADESH</th>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi </td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>Bangladesh </td>
</tr>
<tr>
<td>tuner page </td>
<td>tal patar sipahi</td>
<td>bangladesh </td>
</tr>
</table>
</body>
</html>
- আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।
- এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন
- এই বার দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ
---------------------------9-----------------------
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.