LEARN CSS- সিএসএস টিউটোরিয়াল

LEARN CSS

সিএসএস টিউটোরিয়াল | ভূমিকা
আপনারা নিজের web designing এর দক্ষতা উপরের ধাপে উন্নিত করতে চাইলে Cascading Style Sheets (CSS) এর কোন বিকল্প নেই। এখানে ধারাবাহিকভাবে সিএসএস টিউটোরিয়াল গুলো আলোচনা করা হবে। সিএসএস এর মাধ্যমে ওয়েব সাইটের শ্রী বৃদ্ধি করা যায়।সিএসএস এর মাধ্যমে যেসব বিষয় করা যায় —১ সিএসএস এর  মাধ্যমে এইচটিএমএল এ তৈরীকৃত পেজটি আরও দৃষ্টিনন্দন  করা যায়।২ কিছু সিএসএস  কোড পরিবর্তন করে  সম্পুর্নভাবে সাইট এর  restyle করা যায়।আপনার stylesheet (যেখানে আপনি কোডগুলো লিখবেন) টি সম্পুর্নভাবে  এইচটিএমএল documents হতে পৃথক হবে যখন আপনি  সিএসএস এবং এইচটিএমএল এ দক্ষতা অর্জন করতে পারবেন। আর একটি কথা না বললেই নয় সিএসএস শেখার আগে অবশ্যই এইচটিএমএল সম্বন্ধে ভাল জানতে হবে।
সিএসএস সিলেক্টর টিউটোরিয়াল(CSS Selector)
সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়। তারা নির্দেশ করে,  যে কোন এইচটিএমএল এইলমেন্ট কে আপনি কিভাবে  সিএসএস কোড এর সাথে সম্পৃক্ত করবেন। অতএব তাদের ( CSS selectors) সম্বন্ধে  ভাল ধারনা থাকতে হবে।সিএসএস সিলেক্টর এর গঠন:SELECTOR { PROPERTY: VALUE }”Property” হল এমন একটা  সিএসএস এলিমেন্ট যা আপনি ইচ্ছামত পরিচালনা করতে পারেন। আর   “VALUE”  হল,  যা নির্দিষ্ট property র মান নির্দেশ করে।সিএসএস Selector Name:
selector name দ্বারা এইচটিএমএল ট্যাগ এর সাথে  সরাসরি সম্পর্ক তৈরী করা যায় যা আপনি ইচ্ছানুযায়ী  সম্পাদন করতে পারেন।
p { PROPERTY: VALUE }
selector name হিসাবে p দ্বারা paragraph tag  কে নির্দেশ করছে।
ইন্টারনাল সিএসএস টিউটোরিয়াল (Internal CSS)
Cascading Style Sheets লেখার তিনটি ধরন আছে যেমন – internal, external এবং inline। যখন আপনারা  ইন্টারনাল সিএসএস ব্যবহার করবেন তখন অবশ্যই একটা নতুন ট্যাগ যোগ করতে হবে যেটা হচ্ছে  <style> tag  এবং যা HTML  <head> ট্যাগ এর ভিতরে রাখতে হবে। নিচে উদাহরন দেয়া হলো।01.<html>02.<head>03.<style>04.</style>
05.</head>
06.<body>
07.<p>Your page’s content!</p>
08.</body>
09.</html>
এমত অবস্থায় পেজে নতুন কিছু দেখাবে না। এই style ট্যাগ টি শুধু ব্রাউজার কে বলবে যে তারা এই পেজে নতুন কিছু CSS element যোগ করতে যাচ্ছে ।
ইন্টারনাল সিএসএস কোড তৈরী:  
HTML code এর মত করে CSS code লেখা হয় না,  যার অর্থ এই দাড়ায় CSS যা  HTML  এর মত নয়।
নিচে উদাহরন দেয়া হলো।
01.<html>
02.<head>
03.<style>
04.p {color: white; }
05.body {background-color: black; }
06.</style>
07.</head>
08.<body>
09.<p>White text on a black background!</p>
10.</body>
11.</html>
প্রদর্শন:
White text on a black background!
উপরের উদাহরনে আপনারা দেখেছেন CSS code এর মাধ্যমে <body> and <p> HTML tags এর এলিমেন্ট পরিবর্তিত হয়ে গেছে।
সাধারন সিএসএস ফরমেট
“HTML tag” { “CSS Property” : “Value” ; }
  • বিষয়টি পরিস্কার করতে  ধাপে ধাপে  দেখা যাক কিভাবে  সিএসএস কোড দিয়ে এইচটিএমএল এলিমেন্ট পরিবর্তিত হয়ে গেছে।
প্রথমে একটা এইচটিএমএল এলিমেন্ট  বাছাই করেছি যাকে নিয়ে আমরা কাজ করেছি  - p{ : ; }
তারপর CSS attribute color নির্বাচন করেছি  - p { color: ; }
পরে Value হিসাবে আমরা ফন্ট এর  color নির্বাচন করেছি  - p { color: white; }
এসব করার ফলে কি হয়েছে paragraph tag এর মধ্যে অবস্থিত সকল লেখা সাদা হয়ে গেছে ।
  • এখন আমরা আলোচনা করবো সিএসএস কোড  কিভাবে  <body> ট্যাগের  background কে পরিবর্তন করেছে।
প্রথমে একটা HTML Body element  বাছাই করেছি – body { : ; }
তারপর CSS attribute,  background-color নির্বাচন করেছি  - body { background-color: ; }
CSS attribute background-color এর রং নির্বাচন করেছি  - body { background-color: black; }
অনেক সময় দেখা যাবে যে সিএসএস  স্টাইল প্রয়োগ করার পরও তা প্রদর্শন করছে না তখন আমাদের যেসব বিষয় লক্ষ রাখতে তা হলো আমরা সিএসএস attribute এর পর কোলন এবং সিএসএস attribute এর ভেলুর পর সেমিকোলন ঠিক মত দিয়েছে কিনা { CSS attribute : value;}।
এক্সটার্নাল সিএসএস (External CSS)
সবচেয়ে ভাল হয় যদি আপনারা সিএসএস কে  এইচটিএমএল হতে পৃথক রাখেন।এক্সটার্নাল সিএসএস ফাইলটি শুধুমাত্র সিএসএস code ধারন করে এবং এই ফাইলটিকে “.css” ফাইল extension দিয়ে সেভ করা হয়।  সিএসএস ফাইল টিকে <style> ট্যাগ এর পরিবর্তে <link> ট্যাগ এর সাহায্যে লিংক করা হয় ।ফাইল তৈরী:প্রাথমিকভাবে আমরা  নোটপ্যাড দিয়ে নিচের সিএসএস কোড টি লিখবো।1.body{ background-color: gray;}2.p { color: blue; }
3.h3{ color: white; }
তারপর সিএসএস ফাইলটিকে  (.css) ফাইল extension দিয়ে সেভ করবো। ফাইলটির নাম হবে test.css ।  তবে test ছাড়াও আমরা অন্য নাম দিতে পারি তবে ফাইল extension(.css)  টি ঠিক রাখতে হবে ।
এরপর নতুন  এইচটিএমএল ফাইল তৈরী করে সিএসএস ফাইলটির সাথে লিংক করবো।
01.<html>
02.<head>
03.<link rel=”stylesheet” type=”text/css” href=”/test.css” />
04.</head>
05.<body>
06.<h3> A White Header </h3>
07.<p> This paragraph has a blue font.
08.The background color of this page is gray because
09.we changed it with CSS! </p>
10.</body>
11.</html>
3 নম্বর লাইনে test.css এর আগে যে / চিহ্নটা আছে তা ভুল,এটা বাদ দিয়ে লিখুন্
তারপর এইচটিএমএল ফাইল টিকে index.html হিসাবে একই  ফোল্ডারে  অর্থাৎ যেখানে  সিএসএস ফাইল আছে সেখানে সেভ করবো। এবার আপনার এইচটিএমএল ফাইল টিকে ব্রাউজারে এ খুলুন করুন এবং পরিবর্তন লক্ষ্য করুন।
প্রদর্শন: White Header
This paragraph has a blue font. The background color of this page is gray because we changed it with সিএসএস!
কেন আমরা এক্সটার্নাল সিএসএস ব্যবহার করবো?
আপনার  ওয়েবসাইট ডিজাইন কে সংরক্ষন এবং content কে পৃথক রাখতে ব্যবহ্নত হয়।
আলাদা ফাইল হিসাবে রাখলে খুব সহজেই  সিএসএস কোড কে পুনরায় ব্যবহার করা যায়। বারবার একই সিএসএস কোড প্রত্যেক ওয়েব পেজ এ লেখার পরিবর্তে  শুধুমাত্র “link” ট্যাগ এর সাহায্যে একটা সিএসএস ফাইল কে প্রত্যেক ওয়েব পেজ এ যুক্ত করা যায়।
ইনলাইন সিএসএস টিউটোরিয়াল(Inline CSS)
ইনলাইন সিএসএস হচ্ছে সিএসএস style কে  এইচটিএমএল কোড এর ভিতরে ব্যবহার করার নিয়ম।এক্সটার্নাল বা ইন্টারনাল সিএসএস হতে ইনলাইন সিএসএস এর প্রাধান্য বেশি। এর অর্থ হচ্ছে একসটার্নাল বা ইন্টারনাল সিএসএস দ্বারা স্টাইল নির্দেশিত থাকলেও আপনি স্টাইল  override করতে পারেন। যাহোক, ইনলাইন সিএসএস যা সিএসএস এর সঠিক উদ্দেশ্য হতে বিচ্যুতি ঘটায় তাই এটা আংশিকভাবে ব্যবহার করা উচিত।সিএসএস Inline – HTML Attribute: বিশ্বাস করেন বা না করেন প্রত্যেক এইচটিএমএল ট্যাগ এর মধ্যে সিএসএস কে তৈরী করা যায়। যদি আপনি সব এইচটিএমএল এলিমেন্ট এর স্টাইল করতে চান তাহলে style নামক  HTML attribute এর মধ্যে প্রত্যাশিত  সিএসএস property গুলো লিখুন।1.<p style=”background: blue; color: white;”>A new background and
2.font color with inline CSS</p>
প্রদর্শন:
A new background and font color with inline CSS
যে কোন HTML element সম্বলিত inline CSS সেটিং এর একটি  সাধারন ফরমেট দেয়া হলো:
Pseudo Code:
<html tag style=”css property1: value; css property2: value;”> </html tag>
প্রত্যেক সিএসএস statement অবশ্যই  semicolon “;” দ্বারা পৃথক থাকবে এবং  সিএসএস property ও তার value “:”colons  দ্বারা পৃথক থাকবে।
সিএসএস ক্লাস টিউটোরিয়াল (CSS Class)
সিএসএস এর মাধ্যমে এইচটিএমএল এলিমেন্ট এর অসংখ্য স্টাইল দেয়া যায়। একটা উদাহরন দিয়ে বিষয়টি পরিস্কার করা যাক । ধরুন আপনি কখনও চাচ্ছেন আপনার লেখাটির ফন্ট বড় এবং সাদা হোক।  আবার চাচ্ছেন ছোট এবং কাল হোক। আপনি ভাগ্যবান এই অর্থে যে  সিএসএস classes ব্যবহার করার  মাধ্যমে আপনি আপনার ইচ্ছা পুরন করতে পারেন।Class এর FormatClass  ব্যবহার করা খুব সাধারন। সাধারন  সিএসএস কোড এর  অংশকে বর্ধিত (extension) করতে হবে। আর এই বর্ধিত অংশকে অবশ্যই এইচটিএমএল ট্যাগ এ Class এর মান হিসাবে বসাতে হবে। নিচে উদাহরন দেয়া হলো:1.p.first{ color: blue; }2.p.second{ color: red; }
01.<html>
02.<body>
03.<p>This is a normal paragraph.</p>
04.
05.<p>This is a paragraph that uses the p.first CSS code!</p>
06.<p>This is a paragraph that uses the p.second CSS code!</p>
07.</body>
08.
09.</html>
প্রদর্শন:
This is a normal paragraph.
This is a paragraph that uses the p.first CSS code!
This is a paragraph that uses the p.second CSS code!
আপ নি যেকোন এইচটিএমএল এলিমেন্ট এর সাথে সিএসএস class  ব্যবহার করতে পারেন।ধরুন আপনি <p> ট্যাগ ব্যবহার করে স্টাইল দিয়েছেন এবং সিএসএস class ব্যবহার করে অন্য একটি স্টাইল নিদিষ্ট করে দিয়েছেনে ফলে আগের  default স্টাইল টি আর নিদিষ্ট লেখার ঊপর কাজ করবে না।
1.p{ color: red; font-size: 20px; }
2.p.test1{ color: blue; }
3.p.test2{ font-size: 12px; }
1.<html>
2.<body>
3.<p>This is a normal paragraph.</p>
4.<p>This is a paragraph that uses the p.test1 CSS code!</p>
5.<p>This is a paragraph that uses the p.test2 CSS code!</p>
6….
প্রদর্শন:
This is a normal paragraph.
This is a paragraph that uses the p.test1 CSS code!
This is a paragraph that uses the p.test2 CSS code!
সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল (CSS Background)
আপনার সাইটের background অনেক বেশি গুরুত্ত্বপুর্ন তাই এই টিউটোরিয়াল টি আপনাদের মনোযোগ সহকারে দেখা উচিত। আপনি যদি professional website তৈরী করতে চান তাহলে  light background এর মধ্যে dark টেক্স ব্যবহার করা উচিত। আর যদি শুধু শখের জন্য তৈরী করতে চান তাহলে যেকোন কালারের সমন্নয় গ্রহনযোগ্য।সিএসএস এর মাধ্যমে আপনি যেকোন সিএসএস এলিমেন্ট এর background color or image  সেট করতে পারেন। তাছাড়া  background image কিভাবে প্রর্দশিত হবে সে বিষয়টি আপনি নিয়ন্ত্রন করতে পারবেন। আপনি পছন্দমত এটিকে horizontally, vertically repeat করতে পারেন।তাছাড়া আপনি  background কে fixed position এ রাখতে পারেন বা scroll করতে পারেন।নিচে সিএসএস background এর ঊদাহরন দেয়া হলো।1.h4 { background-color: white; }2.p  { background-color: #1078E1; }
3.ul { background-color: rgb( 149, 206, 145); }
প্রদর্শন

This is a <h4> with a white background

This is a <p> with a background using the hexadecimal value of #1078E1
  • This is an unordered list
  • with an RGB value of 149, 206, 145

সিএসএস Background Image:

gradient background এর মত image কে left-to-right  করা যায়। অথবা যখন ইউজার স্ক্রল করবে তখন আপনি image কে fixed  অবস্থায় রাখতে পারেন ।
1.p { background-image: url(smallPic.jpg); }
2.h4{ background-image: url(http://
3.www.webcoachbd.com/pics/cssT/smallPic.jpg); }
This <p> has a background image using a local path to the picture.

This <h4> has a background image using the complete url path.

01.p {
02.background-image: url(smallPic.jpg);
03.background-repeat: repeat; }
04.h4 {
05.background-image: url(smallPic.jpg);
06.background-repeat: repeat-y;}
07.ol {
08.background-image: url(smallPic.jpg);
09.background-repeat: repeat-x;}
10.ul {
11.background-image: url(smallPic.jpg);
12.background-repeat: no-repeat;}
প্রদর্শন:
This <p> has a background image repeating in both directions (default repeat). If you use this option, make sure that your image was designed to be repeated.

This <h4> has a background image repeating vertically (y). You could this to add a style to the side of your element.

  1. This is an ordered list
  2. With a background that repeats
  3. Horizontally (x)
  • This is an unordered list
  • With a background that repeats
  • in neither direction.

সিএসএস Background Image এর অবস্থান:

আপনি যদি নির্দিষ্ট করতে চান যে এইচটিএমএল এলিমেন্ট এর মধ্যে কোথায় image টি প্রদর্শিত হবে তাহলে সেটা CSS’s background-position এর মাধ্যমে করা যায়।নিচে তিন (length, percentages, keywords) প্রকারের নির্দিষ্ট করার ঊপায় দেখানো হলো।
01.p {
02.background-image: url(smallPic.jpg);
03.background-position: 20px 10px;
04.}
05.h4 {
06.background-image: url(smallPic.jpg);
07.background-position: 30% 30%;
08.}
09.ol {
10.background-image: url(smallPic.jpg);
11.background-position: top center;
12.}
প্রদর্শন:
This <p> has a background image positioned with pixel values.

This <h4> has a background image positioned with percentages.

  1. This is an ordered list
  2. With a background that was positioned
  3. using keywords.

সিএসএস Gradient Background:

যদি gradient background  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।
Image:
ঊপরের image টি খুব সাধারন । আমরা এটাকে horizontal ভাবে রেখেছি । এই image টি 1 pixel এর। repeat attribute এর মাধ্যমে এর value       repeat-x   সেট করেছি  যার ফলে image টি নির্দিষ্ট এর বাম হতে ডান দিকে বিস্তৃতি লাভ করবে। নিচে উদাহরনে paragraph এলিমেন্ট এ gradient background যোগ হয়েছে
1.p {
2.background-image: url(http://www.example.com/gradient.gif);
3.background-repeat: repeat-x;
4.}
প্রদর্শন:
এখানে বেশিরভাগ ব্যাকগ্রাউন্ড ইমেজগুলি আসেনাই।সম্ভবত এটা আমাদের হোস্টিং এর সমস্যার কারনে।এই কোডগুলি দিয়ে প্রাকটিস করতে পারেন আপনার সমস্যা হবেনা।
সিএসএস ফন্ট (CSS Font)
টেক্স কিভাবে প্রদর্শিত হবে তার নিয়ন্ত্রন ভার সিএসএস আপনাকে দিয়েছে। আপনি টেক্সের size, color, style ইত্যাদি পরিবর্তন করতে পারেন। আপনি জেনেছেন কিভাবে টেক্স bold  বা underline করতে হয় কিন্তু আপনি কি জানেন percentage  ব্যবহার কিভাবে ফন্ট resize  করা যায়। এই বিষয়ে আলোচনা  নিচে করা হয়েছে ।

সিএসএস ফন্ট রং:

যদিও টেক্সের কালারকে সিএসএস ফন্ট অংশ মনে হয় কিন্তু প্রকৃতপক্ষে এটা স্বাধীন  সিএসএস attribute। নিচে ফন্ট এর কালার পরিবর্তনের উদাহরন দেয়া হলো।
1.h4 { color: red; }
2.h5 { color: #9000A1; }
3.h6 { color: rgb(0, 220, 98); }
প্রদর্শন:

This is a red h4 header.

This is a hexadecimal #9000A1 h5 header.
This is an rgb(0, 220, 98) h6 header.
উপরের উদাহরনে কালার নির্দেশ করতে আমরা কালারের তিন প্রকারের ফরমেট ব্যবহার করেছি।

সিএসএস ফন্ট Family:

ফন্ট family দুইটি  group  এ বিভক্ত যেমন: serif and sans-serif । গবেষনায় দেখা গিয়েছে serif fonts হতে sans-serif fonts যা  computer monitor এ খুব সহজে পড়া যায় ।
1.h4 { font-family: sans-serif; }
2.h5 { font-family: serif; }
3.h6 { font-family: arial; }
প্রদর্শন:

This is a header with sans-serif font

This is a header with a serif font
This is a header with an arial font

সিএসএস ফন্ট আকার:

আপনি values, percentages বা key terms ব্যবহার করে ফন্ট আকার ঠিক করতে পারেন। যখন আপনি default ফন্ট পরিবর্তন করতে চাবেন তখন Percentages ব্যবহার করা ভাল কিন্তু static value সেট করা উচিত নয়।
1.p { font-size: 120%; }
2.ol{ font-size: 10px; }
3.ul{ font-size: x-large; }
Display:
This is a font size of 120%
  1. This is a font size of 10px
  • This is a font size of “x-large”
ফন্ট-weight এর অন্যান্য key terms গুলো হল: bold, bolder, and normal.

সিএসএস ফন্ট Variant:

সিএসএস ফন্ট Variant এর সাহায্যে আপনি ফন্ট কে  small caps এ পরিবর্তিত করতে পারেন। Note: কিন্তু সকল ফন্ট,  সিএসএস ফন্ট Variant কে সাপোর্ট করে না তাই প্রকাশ করা আগে নিশ্চিত হয়ে নেয়া উচিত।
1.p { font-variant: small-caps; }
প্রদর্শন:
this text was written normally and converted to small-caps
সিএসএস টেক্সক্ট টিউটোরিয়াল (CSS Text)
সিএসএস টেক্সট এর মাধ্যমে আপনি  টেক্সট এর spacing, decoration,  এবং alignment নিয়ন্ত্রন করতে পারেন।

টেক্সট Decoration:

টেক্সট Decoration এর মাধ্যমে আমরা লিংক এর underline দুর করতে পারি।  তাছাড়া line-through,
overline এবং underline  ইত্যাদি টেক্সট এ ব্যব্হার করতে পারি।
1.h4{ text-decoration: line-through; }
2.h5{ text-decoration: overline; }
3.h6{ text-decoration: underline; }
4.a { text-decoration: none; }
প্রদর্শন:

This header has a line through the middle

This header has an overline
This header has an underline
This is a link without an underline – See our CSS Link tutorial for more information

টেক্সট Indent:

সিএসএস text-indent কে আমরা এইচটিএমএল (<pre>)  ট্যাগ পরিবর্তে ব্যবহার করতে পারি। values
or percentages ব্যবহার করে আমরা text-indent নির্দিষ্ট করি।text indent মানে লেখাটি বাম দিকে থেকে কতটুকু
ছাড় দিয়ে শুরু হবে।
1.p { text-indent: 20px; }
2.h5 { text-indent: 30%; }
প্রদর্শন:
This is a paragraph that uses a text indentation with the value of 20px. This is the recommended usage of text indentation.
This is a header that uses a text indentation of 30%. Webcoachbd does not recommend indenting your text with percentages.

টেক্সট Align:

সাধারনত  website এ default হিসাবে টেক্সট Align: left নিবার্চিত থাকে। টেক্সট Align attribute এর সাহায্যে
টেক্সট  এর বিভিন্ন Alignment দেয়া যায়।
1.p { text-align: right; }
2.h5{ text-align: justify; }
প্রদর্শন:
This paragraph is aligned to the right side of the HTML element. If you ever find a use
for using right justify, please let us know. Just kidding, we don’t really want to know.
This header is justified. We recommend that you either align your text to the left, which is the
default setting, or justify your text. But feel free to experiment with all the available
alignment options that are at your disposal.

টেক্সট Transform:

টেক্সট Transform এর মাধ্যমে টেক্সট এর দ্রুত capitalize করা যায়।
1.p { text-transform: capitalize; }
2.h5{ text-transform: uppercase; }
3.h6{ text-transform: lowercase; }
প্রদর্শন:
Hi, I am happy to see you.

Hi, I am happy to see you.

Hi, I am happy to see you.

সিএসএস White Space:

white-space attribute এর মাধ্যমে লেখাটি  এক লাইনে চলতে থাকবে যতক্ষন না আপনি break <br />
ট্যাগ না দিবেন।
1.p { white-space: nowrap; }
প্রদর্শন:
This paragraph will not wrap until I tell it to with a break tag.
</br> ট্যাগ দিলে তারপর থেকে নিচে লাইন যাবে।

সিএসএস Word Spacing:

সিএসএস Word Spacing attribute এর মাধ্যমে পাশাপাশি শব্দগলোর মধ্যে gap এর পরিমান নির্ধারন করে দেয়া যায়।
1.p { word-spacing: 10px; }
প্রদর্শন:
This paragraph has a word-spacing value of 10px.

সিএসএস Letter Spacing:

সিএসএস letter-spacing attribute এর মাধ্যমে শব্দের মধ্যে বর্ণ গুলোর মধ্যে gap এর পরিমান নির্ধারন করে
দেয়া যায়।
1.p { letter-spacing: 3px; }
প্রদর্শন:
This is a paragraph with letter-spacing of 3px.
সিএসএস প্যাডিং টিউটোরিয়াল (CSS Padding)
সিএসএস প্যাডিং ব্যবহার করে আপনি এইচটিএমএল এলিমেন্ট (paragraphs, tables ইত্যাদি ) এর  default প্যাডিং  পরিবর্তন করতে পারেন। আর  প্যাডিং বলতে বোঝায় এলিমেন্ট এর  border এবং তার content  এর মধ্যের অংশকে।1.p {padding: 15px; border: 1px solid black; }2.h5{padding: 0px; border: 1px solid red;}
This is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and left.
This header has no padding, which places the text right against the border!

সিএসএস প্যাডিং: 1 Value

1 Value বিশিষ্ট প্যাডিং সকল (top, right, bottom, left.) পাশে uniform padding  তৈরী করে।
1.p {padding: 2%; border: 1px solid black; }
2.h5{padding: 0px; border: 1px solid red;}
প্রদর্শন:
This is a paragraph that has a padding of 5 pixels on every side: left, top, right, and bottom.
This header has no প্যাডিং. It is only spaced away from the paragraph because the paragraph has a প্যাডিং of 5 pixels!

সিএসএস প্যাডিং: padding-(direction):

প্রত্যেক  এইচটিএমএল এলিমেন্ট এর প্রকৃতপক্ষে চারটি ভিন্ন প্যাডিং থাকে যেমন top, right, bottom, এবং left । প্যাডিং direction  attribute এর মাধ্যমে পৃথক পৃথক প্যাডিং নির্দেশ করা যায়। এক direction (যেমন -left) এ নির্দেশ করলে অন্যগুলো অপরিবর্তিত থাকে।
p { padding-left: 5px; border: 1px solid black; }
h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
border: 1px solid red;
}
প্রদর্শন:
This paragraph had one padding specified(left), using directional declaration.
This header had each padding specified separately, using directional declaration.

সিএসএস প্যাডিং: 2 & 4 Values

যখন আমরা দুইটি প্যাডিং Value ব্যবহার করবো তখন প্রথম Value টি top এবং bottom প্যাডিং Value নির্দেশ করবে এবং দ্বিতীয়  Value টি  left and right প্যাডিং Value নির্দেশ করবে। মনে রাখতে হবে সাধারনত প্যাডিং Value টি  top দিয়ে শুরু হয় এবং clockwise ভাবে এটি left  এ শেষ হয়। প্যাডিং Value  এর ধারাবাহিকতা হল top, right, bottom এবং left ।
1.p {
2.padding: 5px 15px;
3.border: 1px solid black;
4.}
5.h5{
6.padding: 0px 5px 10px 3px;
7.border: 1px solid red;
8.}
প্রদর্শন:
This paragraph has a top and bottom padding of 5 pixels and a right and left padding of 15 pixels.
This header has a top padding of 0 pixels, a right padding of 5 pixels, a bottom padding of 10 pixels, and a left padding of 3 pixels.

সিএসএস Margin:

সিএসএস Margins  প্রায় সিএসএস প্যাডিং attribute এর মত। শুধু একটা গুরুত্বপূর্ন পাথর্ক্য হচ্ছে:Margin বলতে এইচটিএমএল এলিমেন্ট এর border এর  চারপাশের অংশকে বোঝায় আর প্যাডিং  বলতে border এর ভিতরের অংশকে বোঝায়। প্যাডিং এর মত Margin এর Value সেট করা যায়।
1.p {margin: 5px; border: 1px solid black; }
2.h5{margin: 0px; border: 1px solid red;}
প্রদর্শন:
This is a paragraph that has a margin of 2% on every side: top, right, bottom, and left.
This header has a margin of 5 pixels.

সিএসএস Margin: 1 Value

এটা সিএসএস প্যাডিং: 1 Value এর মত
1.<b> </b>
2.p {margin: 2%; border: 1px solid black; }
3.h5{margin: 0px; border: 1px solid red;}
প্রদর্শন:
This is a paragraph that has a margin of 2% on every side: top, right, bottom, and left.
This header has a margin of 5 pixels.

সিএসএস Margin: margin-(direction):

এটা সিএসএস প্যাডিং: padding-(direction) এর মত ।
1.p { margin-left: 5px; border: 1px solid black; }
2.h5{ margin-top: 0px;
3.margin-right: 2px;
4.margin-bottom: 13px;
5.margin-left: 21px;
6.border: 1px solid red; }
প্রদর্শন:
This paragraph had one margin specified (left), using directional declaration. Note that there is still a margin below and above this paragraph. This is because our CSS only replaced one of the four margins, which didn’t effect the top and bottom margins.
This header had each margin specified separately, using directional declaration.

সিএসএস Margin: 4 Values

এটা সিএসএস প্যাডিং: 2 & 4 Values এর মত ।
1.p {margin: 5px 15px;
2.border: 1px solid black; }
3.h5{margin: 0px 5px 10px 3px;
4.border: 1px solid red;}
প্রদর্শন:
This paragraph has a top and bottom margin of 5 pixels and a right and left margin of 15 pixels.
This header has a top margin of 0 pixels, a right margin of 5 pixels, a bottom margin of 10 pixels, and a left margin of 3 pixel
সিএসএস বর্ডার টিউটোরিয়াল (CSS Border)
এইচটিএমএল এলিমেন্টs এর চারপাশে যে বর্ডার দেখা যায় তা সিএসএস বর্ডার এর মাধ্যমে সম্পুর্নভাবে customize করা যায়। সিএসএস বর্ডার এর মাধ্যমে বর্ডার এর স্টাইল পরিবর্তন করা যায়।বর্ডার Style Types:অসংখ্য প্রকারের বর্ডার Style রয়েছে যা আপনি আপনার পছন্দমত বিভিন্ন ধরনের বর্ডার তৈরী করতে পারেন।এই টিউটোরিয়ালে সিএসএস ক্লাস ব্যবহার করেছি,ক্লাস সমন্ধে জনা না থাকলে আগে আমাদের সিএসএস ক্লাস টিউটোরিয়ালটি পরে আসুন। http://www.webcoachbd.com/css-tutorials/css-class01.p.solid {border-style: solid; }
02.p.double {border-style: double; }
03.p.groove {border-style: groove; }
04.p.dotted {border-style: dotted; }
05.p.dashed {border-style: dashed; }
06.p.inset {border-style: inset; }
07.p.outset {border-style: outset; }
08.p.ridge {border-style: ridge; }
09.p.hidden {border-style: hidden; }
প্রদর্শন:
This is a solid border
This is a double border
This is a grooved border
This is a dotted border
This is a dashed border
This is an inset border
This is an outset border
This is a ridged border
This is a hidden বর্ডার
বর্ডার Width:
বর্ডার-width attribute এর সাহায্যে বর্ডার এর পুরুত্ব পরিবর্তন করা যায়। বিভিন্ন key terms বা ভেলু দিয়ে বর্ডার-width নির্দিষ্ট করা যায়। বিভিন্ন term ব্যবহার করা যেতে পারে যেমন thin, medium, thick ইত্যাদি।
1.table { border-width: 7px;
2.border-style: outset; }
3.td { border-width: medium;
4.border-style: outset; }
5.p { border-width: thick;
6.border-style: solid; }
প্রদর্শন:
This table has an outset borderwith a width of 7 pixels.
Each cell has an outset borderwith a “medium” width.
This paragraph has a solid border with a “thick” width.
বর্ডার Color:
border-color attribute এর মাধ্যমে আপনি পছন্দমত color combination করে বর্ডারকে দৃষ্টি নন্দন করে তুলতে পারেন।
01.table { border-color: rgb( 100, 100, 255);
02.border-style: dashed; }
03.
04.
05.td { border-color: #FFBD32;
06.border-style: ridge; }
07.
08.
09.p { border-color: blue;
10.border-style: solid; }
প্রদর্শন:
This table has a dashed borderwith the RGB value ( 100, 100, 255).
Each cell has a ridged borderwith a hexadecimal color of #FFBD32.
This paragraph has a double border with a color of “blue”.
সিএসএস লিস্ট টিউটোরিয়াল (CSS List)
লিস্টs  মুলত দুই প্রকার যথা:  unordered এবং  ordered ।সিএসএস দিয়ে লিস্ট কে এইচটিএমএল হতে অনেক বেশি customize করা যায়। এমনকি image  কে bullet points হিসাবে unordered লিস্ট এর জন্য ব্যবহার করা যায়।সিএসএস লিস্ট Style Type:আপনি যদি default number এর ordered লিস্ট বা unordered লিস্ট এর  bullets/discs হতে ভিন্ন স্টাইল ব্যবহার  করতে চান তাহলে আপনি লিস্ট এর জন্য  বিভিন্ন ধরনের স্টাইল ব্যবহার করতে  পারেন। নিচে বিভিন্ন স্টাইল দেয়া হলো:১. Unordered list styles: square, circle, disc (default), এবং none ।২.  Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), এবং  none ।
1.ol { list-style-type: upper-roman; }
2.ul { list-style-type: circle; }
প্রদর্শন:
Here is an ordered list:
  1. This list is
  2. using roman
  3. numerals
  4. with CSS!
and now an unordered list:
  • This list is
  • using circle types
  • with CSS!
সিএসএস লিস্ট ইমেজের সাথে:
আমরা আগেই বলেছি  normal bullet এর পরিবর্তে image  কে  ব্যবহার করা যায়।
1.ul { list-style-image: url(“listArrow.gif”); }
2.ol { list-style-image: url(“listArrow2.gif”); }
প্রদর্শন:
Here is an unordered list:
  • This list is
  • using a picture with CSS!
and now an ordered list:
  1. This list is
  2. using a picture
  3. with CSS!
সবচেয়ে ভাল হয় Unordered লিস্ট  এর ক্ষেত্রে  image  কে ব্যবহার করা।
সিএসএস লিস্ট Position:
list-style-position এর ভেলু  inside দিলে তখন লিস্টগুলো মার্জিন হতে ভিতরের দিকে থাকবে আর Outside দিলে normal লিস্ট Position এ থাকবে। Outside ভেলুটি একটি default setting ।
1.ul { list-style-position: inside; }
2.ol { list-style-position: outside; }
প্রদর্শন:
  • This list is
  • using inside
  • positioning with CSS!
and now an ordered list:
  1. This list is
  2. using outside
  3. positioning with CSS!
লিস্ট:সব একটাতে
এই  list-style-type এর মাধ্যমে এমন একটা ব্যবস্থা করা যায় যখন আপনার list-style image লোড নিবে না তখন অন্য list-style দেখাবে।
1.ul { list-style: upper-roman inside url(“http://www.example.com/notHere.gif”);}
প্রদর্শন:
  1. This list’s image did
  2. NOT load correctly
  3. But because we chose to include
  4. A CSS list type, we avoided a bland list!
সিএসএস লিংক টিউটোরিয়াল (Pseudo Class)
সিএসএস এর মাধ্যমে এনকর ট্যাগ বা  লিংকে এ আমরা ইফেক্ট যোগ করতে পারি।সিএসএস এনকর/লিংক অবস্থা:আপনি কি জানেন  লিংক এর চারটি ভিন্ন অবস্থা আছে। সিএসএস এর মাধ্যমে প্রতিটি অবস্থাকে    customize করা যায়। নিচের keyword গুলো আলাদা অবস্থা নির্দেশ করে।১ link –এটি একটি লিংক যেটি ব্যবহার হয়নি ।২ visited – এটি একটি লিংক যা পূর্বে ব্যবহার হয়েছে কিন্তূ লিংকের ঊপর mouse রাখা হয়নি।
৩ hover – এটি একটি লিংক যার ঊপর মাউস রাখার সাথে সাথে visual ইফেক্ট দেখাবে।
৪ active – this is a link that is in the process of being clicked
সিএসএস Pseudo-Classes:
সিএসএস Pseudo-Classe এর মাধ্যমে আমরা  সিএসএস লিংক এর চারটি অবস্থাকে(state)modify করতে পারি।
1.a:(STATE’S NAME) { attribute: value; }
state বা অবস্থার নাম হল pseudo class যা এইচটিএমএল এলিমেন্ট দেখতে কেমন হবে তা নির্দেশ করে। link, visited এবং hover এই order মেনে চললে আমরা সঠিকভাবে কার্যকর সিএসএস লিংক তৈরী করতে পারবো।
1.a:লিংক { color: red; }
2.a:visited { color: red; }
3.a:hover { color: blue; }
1.<a href=”/”>This is a special CSS Link</a>!
প্রদর্শন:
This is Link
আমরা লিংকের Underline দুর করতে text-decoration এর ভেলু none করে দেই।
1.a:link { color: red; text-decoration: none; }
2.a:visited { color: red; text-decoration: none; }
3.a:hover { color: blue; }
প্রদর্শন:
মাউস রাখার পূর্বে
মাউস রাখার পরে
লিংকের Underline দুর করার সময় সর্তক হওয়া ঊচিত কেননা normal text এবং লিংক চিনতে সমস্যা সৃস্টি হতে পারে। সেজন্য লিংকের দুটি অবস্থা যেমন লিংক এবং hover এর কালার ভিন্ন হওয়া উচিত।
01.a:link {
02.color: white;
03.background-color: black;
04.text-decoration: none;
05.border: 2px solid white;
06.}
07.a:visited {
08.color: white;
09.background-color: black;
10.text-decoration: none;
11.border: 2px solid white;
12.}
13.a:hover {
14.color: black;
15.background-color: white;
16.text-decoration: none;
17.border: 2px solid black;
18.}
প্রদর্শন:
মাউস রাখার পূর্বে
This link is a almost over-the-top
মাউস রাখার পরে
01.a:link {
02.color: blue;
03.background-color: red;
04.font-size: 26px;
05.border: 10px outset blue;
06.font-family: sans-serif;
07.text-transform: lowercase;
08.text-decoration: none;
09.}
10.a:visited {
11.color: blue;
12.background-color: red;
13.font-size: 26px;
14.border: 10px outset blue;
15.font-family: sans-serif;
16.text-transform: lowercase;
17.text-decoration: none;
18.}
19.a:hover{
20.color: blue;
21.background-color: red;
22.font-size: 27px;
23.border: 10px inset blue;
24.font-family: serif;
25.text-transform: uppercase;
26.text-decoration: line-through;
27.letter-spacing: 3px;
28.word-spacing: 6px;
29.font-weight: normal;
30.}
প্রদর্শন:
মাউস রাখার পূর্বে
মাউস রাখার পরে
সিএসএস কার্সর (CSS Cursor)
আমরা   উইন্ডোজ, লিনাক্স ব্যবহার সময় বিভিন্ন মাউস কার্সর আইকন দেখেছি। বিভিন্ন পরিস্থিতি সাপেক্ষে মাউস কার্সর এর আইকন বিভিন্ন হয়। জনসাধারন যখন আপনার site visit করবে সেখানেও  বিভিন্ন পরিস্থিতি সাপেক্ষে মাউস এর আইকন বিভিন্ন করে তৈরী করা যায়। যা সিএসএস দ্বারা করা সম্ভব ।

সিএসএস কার্সর আইকন:

এবার আপনাদের দেখাবো কিভাবে বিভিন্ন এইচটিএমএল এলিমেন্ট এর জন্য মাউস কার্সর আইকন পরিবর্তন করা যায়।
১ default –  normal mouse cursor icon প্রদর্শন করে।
২ wait –   এই  mouse icon নির্দেশ করে যে computer চিন্তা করছে।
৩ crosshair –  cross hair চিহ্ন প্রদর্শন করে।
৪ text –   এই “I” shape icon   টি   নির্দেশ করে যে, যখন আপনি কোন text কে select  করবেন।
৫ pointer – এই hand icon  টি   নির্দেশ করে যে, যখন আপনি কোন এইচটিএমএল link ঊপর hover করবেন।
৬ help- এই  icon  টি   নির্দেশ করে যে  আপনি কোন বিষয়ে সাহায্য বা প্রশ্ন করতে চাচ্ছেন (question mark)
1.p { cursor: wait }
2.h4 { cursor: help }
3.h5 { cursor: crosshair }
প্রদর্শন:
Please Wait While this Web Page Loads

How May I Help You?

Stick Your Hands in the Air!
সিএসএস প্রোপর্টিজ টিউটোরিয়াল(CSS Properties)
লেখক মো: ফেরদৌস আলম
এইচটিএমএল এ তার ট্যাগ ( <b>, <body>, <a>, ইত্যাদি) গুলো হল এইচটিএমএল language এর গোসত এবং আলু। সিএসএস এ আপনারা tutorial পড়ার সময় অনেক গুলো property ( Font, Text, Box, Color ইত্যাদি) লক্ষ্য করেছেন ।নিচে আলোচনা করা হলো।সিএসএস ফন্ট প্রোপার্টিজ:সিএসএস ফন্ট প্রোপার্টিজ এর সাহায্যে এর টেক্সট এর  graphical representation কে নিয়ন্ত্রন করা যায়।নিচে সিএসএস ফন্ট property  গুলো দেয়া হলো ।
  • font
  • font-family
  • font-size
  • font-style
  • font-weight
  • font-variant
সিএসএস টেক্সট প্রোপার্টিজ:
সিএসএস টেক্সট প্রোপার্টিজ যা টেক্সট এর spacing, alignment, decoration ইত্যাদি বিষয়গুলো নিয়ন্ত্রন করে। নিচে সিএসএস টেক্সট property  গুলো দেয়া হলো ।
  • letter-spacing
  • word-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • text-align
  • text-indent
  • line-height
সিএসএস বক্স প্রোপার্টিজ:
সিএসএস বক্স প্রোপার্টিজ যা এইচটিএমএল এলিমেন্ট এর ভিতরে এবং চারপাশের অংশকে নির্দেশ করে।এদের মধ্যে  Border, Margin এবং Padding property  গুলোর আবার চারটি property রয়েছে সেগুলো হল top, right, bottom এবং left ।নিচে সিএসএস box property  গুলো দেয়া হলো ।
  • Margin
  • Padding
  • Border
  • Border-width
  • Border-color
  • Border-style
  • Width
  • Height
  • Float
  • Clear
সিএসএস কালার প্রোপার্টিজ:
সিএসএস কালার property নির্দেশ করে যে, কি ধরনের কালার আমরা নির্দিষ্ট এইচটিএমএল এলিমেন্ট এর টেক্সট এর জন্য ব্যবহার করবো। নিচে সিএসএস কালার property  দেয়া হলো ।
Color
সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টিজ:
সিএসএস background প্রোপার্টিজ যা background এর এমন বিষয় নিয়ন্ত্রন করে ,তা হলো যদি background টি single color বা image হয়ে থাকে । যদি তা image হয়ে থাকে তাহলো আপনি image  এর position ঠিক করতে পারেন । আপনি image কে    repeat left-to-right      অথবা top-to-bottom করতে পারেন। নিচে সিএসএস background property  গুলো দেয়া হলো ।
  • Background
  • Background Color
  • Background Image
  • Background Repeat
  • Background Attachment
  • Background Position
সিএসএস Classification প্রোপার্টিজ:
Display
Whitespace
List Style
List Style Type
List Style Image
List Style Position
সিএসএস পজিশন টিউটোরিয়াল (CSS Position)
সিএসএস পজিশন এর মাধ্যমে আমরা এইচটিএমএল এলিমেন্টs  এর exact পজিশন নির্দেশ করতে পারি।Position Relative:Relative position  দ্বারা  এইচটিএমএল এলিমেন্ট এর position  অন্য এলিমেন্ট এর সাপেক্ষে পরিবর্তন করা যায়।01.h3 {02.position: relative;
03.top: 15px;
04.left: 150px;
05.}
06.p {
07.position: relative;
08.left: -10px;
09.}
Move Left –   এক্ষেত্রে left এর জন্য negative value ব্যবহার করতে হবে।
Move Right – এক্ষেত্রে left এর জন্য positive value ব্যবহার করতে হবে।
Move Up –     এক্ষেত্রে top এর জন্য negative value ব্যবহার করতে হবে।     .
Move Down – এক্ষেত্রে left এর জন্য positive value ব্যবহার করতে হবে।
উদাহরন:
সিএসএস দেয়ার আগে                   সিএসএস দিয়ে পজিশন ঠিক করার পর
Position Absolute:
absolute position  দ্বারা  এইচটিএমএল এলিমেন্ট এর exact position (pixel value) নির্দেশ করা যায়।
01.h3 {
02.position: absolute;
03.top: 50px;
04.left: 45px;
05.}
06.p{
07.position: absolute;
08.top: 75px;
09.left: 75px;
10.}
উদাহরন:
সিএসএস দেয়ার আগে                    সিএসএস দিয়ে পজিশন ঠিক করার পর
Position Fixed 
একটা এলিমেন্টের পজিশন যদি ফিক্সড করে দেন তাহলে সেটা ব্রাউজারের উইন্ডো সাপেক্ষে অবস্থান করবে এবং ব্রাউজার যদি স্ক্রল করেন তবুও সেটা স্থির (fixed) থাকবে।
উদাহরন:এখানে দেখুন “স্ক্রল করলেও আমি সরবনা” এই লাইনটির পজিশন ফিক্সড করে দেয়া হয়েছে তাই স্ক্রল করলেও এটি তার অবস্থান থেকে সরবেনা।
স্ক্রল করলেও আমি সরবনা
Note: Internet Explorer 7 (and higher) supports the fixed value if a !DOCTYPE is specified.
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
Some text
নোট:Internet Explorer এ এটি support করবে যদি এর !DOCTYPE নির্দিষ্ট করে দেন।
সিএসএস লেয়ার (CSS Layers)
এবার আমরা দেখবো  লেয়ার ব্যবহার করার মাধ্যমে কোন এলিমেন্ট  টি উপরে দেখাবে, যা সিএসএস লেয়ার এর মাধ্যমে আমরা নিয়ন্ত্রন করতে পারি।  সিএসএস এ প্রত্যেক এলিমেন্ট কে priority দেয়া হয়ে  থাকে। যদি দুটি  overlapping      CSS positioned         elements  থাকে, তাহলে যার priority বেশি তাকে আগে উপরে দেখাবে।Priority নির্ধারন করতে আমরা z-index value সেট করে থাকি ।যার z-index value যত বেশি তার priority  তত বেশি।01.h4{02.position: relative;03.top: 30px;
04.left: 50px;
05.z-index: 2;
06.background-color: #336699;
07.}
08.
09.
10.p {
11.position: relative;
12.z-index: 1;
13.background-color: #FFCCCC;
14.}
প্রদর্শন:
সিএসএস ফ্লট টিউটোরিয়াল (CSS Float)
ফ্লট দ্বারা ছবি কে এক পাশে  বা অন্য পাশে অবস্থান করানো যায়। ছবি এর চারপাশে টেক্সক্ট থাকে । যেমনটি দেখা যায় magazines বা সংবাদপত্রে বিভিন্ন আকারের ছবির চারপাশে টেক্সট এর অবস্থান ।Float Image:সিএসএস Float attribute এর সাহায্যে খুব সহজে টেক্সট কে ছবির চারপাশে Wrapping করা যায়।আপনি ইচ্ছামত ছবি কে বাম বা ডানে Float করতে পারেন। নিচে ঊদাহরন দেয়া হলো ।1.img.floatLeft {
2.float: left;
3.margin: 4px;
4.}
5.img.floatRight {
6.float: right;
7.margin: 4px;
8.}
1.<body>
2.<img src=”/sunset.gif”>
3.<p>The images are contained with…</p>
4.
5.
6.<img src=”/sunset.gif”>
7.<p>This second paragraph has an…</p>
8.</body>
প্রদর্শন:
The images are contained within the paragraph tag. The image has floated to the left, and also to the right because we have used both types of image floating in this example. Notice how the text wraps around the images quite nicely. The images are contained within the paragraph tag. The image has floated to the left, and also to the right because we have used both types of image floating in this example. Notice how the text wraps around the images quite nicely.
This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content. This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content.
Floating Multiple Images:
যদি আমরা অনেক গুলো ছবি কে float করতে চাই যেন একটার নিচে আরেকটা অবস্থান করবে সেক্ষেত্রে আমরা সিএসএস Clear attribute এর মাধ্যমে তা করতে পারি। নিচের ঊদাহরনে আমরা ডানদিকে float করেছি ।
1.img.floatRightClear {
2.float: right;
3.clear: right;
4.margin: 4px;
5.}
1.<body>
2.<img src=”/sunset.gif”>
3.<img src=”/sunset.gif”>
4.<p>The images are appearing…</p>
5.<p>If we had specified…</p>
6.<p>The number of paragraphs…</p>
7.</body>
প্রদর্শন:
The images are appearing below one another because the CSS clear attribute was used with the value of “right”. This forces all right floating items to appear below any previous right floating items.
If we had specified clear:left in our CSS code, then there would be no effect on the images, and they would appear in their default pattern, next to each other, all on one line.
The number of paragraphs, and the size of the paragraphs, will not effect how these images will appear.
সিএসএস আইডি বনাম ক্লাস (CSS ID Vs Class)
লেখক মো: ফেরদৌস আলম
এটা প্রায়ই সন্দেহের সৃষ্টি করে যে কখন আমরা সিএসএস ID ব্যবহার করব আর কখন আমরা সিএসএস Classes ব্যবহার করব।এই অধ্যায়ে এ বিষয়ে পরিস্কার আলোচনা করা হবে।আইডি নির্বাচক (id  Selector)একটা এইচটিএমএল এলিমেন্ট এর স্টাইল কেমন হবে এটা ঠিক করার জন্য সিএসএস আপনাকে নিজস্ব সিলেক্টর ব্যাবহারের সুবিধা দেয় এদেরকে বলে “id” এবং “selector”ID সিলেক্টর একটা (অনন্য) এলিমেন্টের স্টাইল দিতে ব্যাবহৃত হয়। id হল এলিমেন্ট  এর unique identifier ।সিএসএস ID প্রায়ই  সিএসএস classes কাছাকাছি।কিন্তূ তারা এলিমেন্ট এর special case নির্দেশ করে ।1.p#exampleID1 { background-color: orange; }
2.p#exampleID2 { text-transform: uppercase; }
1.<p id=”ExampleID1″>This paragraph has an ID name of
2.”exampleID1″ and has a orange CSS defined background</p>
3.<p id=”ExampleID2″>This paragraph has an ID name of
4.”exampleID2″ and has had its text transformed to uppercase letters. </p>
**id নাম সংখ্যা দিয়ে শুরু করবেন না তাহলে এটা মজিলা ফায়ারফক্সে কাজ করবেনা।
প্রদর্শন:
This paragraph has an ID name of “exampleID1″ and has a orange CSS defined background.
THIS PARAGRAPH HAS AN ID NAME OF “EXAMPLEID2″ AND HAS HAD ITS TEXT TRANSFORMED TO UPPERCASE LETTERS.
ক্লাস নির্বাচক (class Selector)
একদল এলিমেন্টের স্টাইল দেয়ার জন্য class selector ব্যাবহৃত হয়।class selector এইচটিএমএল এর class attribute ব্যাবহার করে এবং এটা “.” দিয়ে লেখা (সংঙ্গায়িত) হয়।নিচের উদাহরনে  যেসব এইচটিএমএল এলিমেন্টs এ এটা থাকবে তাদের সকলের Align মাঝখানে হয়ে যাবে।
1..center {text-align:center;}
আপনি ইচ্ছে করলে এইচটিএমএল এর যেকোন একটা এলিমেন্ট ঠিক করে দিতে পারেন যেটা একটা class দ্বারা প্রভাবিত হবে।যেম:
1.p.center {text-align:center;}
**class নাম সংখ্যা দিয়ে শুরু করবেন না তাহলে এটা ইন্টারনেট এক্সপ্লোরার এ কাজ করবেনা।
ID =  একজনের Identification (ID) একজন ব্যক্তির জন্য unique ।
Class = অনেক জনগণ   একটি class এ পড়ে ।
সিএসএস প্রদর্শন টিউটোরিয়াল (CSS Display)
সিএসএস ঊদাহরনে দেখেছেন আমরা মেনুর শ্রী বৃদ্ধির জন্য বিভিন্ন কাজ করেছি। এইচটিএমএল এ কিছু ঊদাহরনে কোন line break নেই ।তবে আমরা কিছু নির্দিষ্ট ঊদাহরনের anchor ট্যাগ এর line break তৈরী  করেছি ।এই line break গুলো block value এর মাধ্যমে তৈরী করা হয়েছে।1.a { display: block; }2.p { display: inline; }01.<a href=”http://www.tizag.com/” target=”_blank”>Tizag.com – Learn to Whip the Web02.</a>
03….
04.<a href=”http://www.webcoachbd.com/” target=”_blank”>Webcoachbd – Learn to Whip the Web
05.</a>
06.<br />
07.<p>These paragraph </p>
08.<p>elements</p>
09.<p>have been </p>
10.<p>inlined.</p>
প্রদর্শন:
Webcoachbd – Learn to Whip the WebWebcoachbd – Learn to Whip the Web
Webcoachbd – Learn to Whip the Web
Webcoachbd – Learn to Whip the Web
These paragraph
elements
have been
inlined.
Display None (Hidden):
কিছু সময় আপনার কোন content,   Hide করে রাখার প্রয়োজন হতে পারে বা দেখানো প্রয়োজন  হতে পারে । none value এর মাধ্যমে কোন কিছু যেকোন content,  Hide করে রাখা যায়।
1.p.show { display: block }
2.p.hide { display: none; }
1.<p>This paragraph is displayed correctly because
2.it has a display value of “block”.</p>
3.<p>This paragraph is hidden because
4.it has a display value of “none”.  Why am I even
5.writing anything in here?</p>
প্রদর্শন:
This paragraph is displayed correctly because it has a display value of “block”.
at

কোন মন্তব্য নেই:

একটি মন্তব্য পোস্ট করুন