1 files changed, 281 insertions, 0 deletions
diff --git a/files/bn/learn/css/building_blocks/values_and_units/index.html b/files/bn/learn/css/building_blocks/values_and_units/index.html
new file mode 100644
index 0000000000..715c208203
--- /dev/null
+++ b/files/bn/learn/css/building_blocks/values_and_units/index.html
@@ -0,0 +1,281 @@
+---
+title: রং
+slug: Web/CSS/Getting_Started/Color
+tags:
+  - CSS
+  - Example
+  - Guide
+  - NeedsReview
+translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors
+translation_of_original: Web/Guide/CSS/Getting_started/Color
+---
+<p>{{ CSSTutorialTOC() }}</p>
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}এটা হচ্ছে  <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">যেভাবে শুরু করবেন CSS  </a> টিউটোরিয়ালের ৮ম বিভাগ; এটা ব্যাখ্যা করবে কিভাবে আপনি CSS এ রং উল্লেখ করবেন. আপনি আপনার নমুনা স্টাইলশিট এ পরিচিত হবেন background রং এর সাথে।</p>
+<h2 class="clearLeft" id="তথ্য_রং_(color)">তথ্য: রং (color)</h2>
+<p>এই টিউটোরিয়ালে এখন পর্যন্ত ,আপনি ব্যবহার করেছেন একটি নির্দিষ্ট সংখ্যক রং এর নাম . CSS 2 সর্বোপরি ১৭ টি রং এর নাম বহন করে। কিছু নাম হয় তো সেগুলো, যেগুলো আপনি আশা করেন না।</p>
+<table style="border: 0px; margin-left: 2em; text-align: right;">
+ <tbody>
+  <tr>
+   <td> </td>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: black;"> </td>
+   <td>gray</td>
+   <td style="width: 2em; height: 2em; background-color: gray;"> </td>
+   <td>silver</td>
+   <td style="width: 2em; height: 2em; background-color: silver;"> </td>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td>
+  </tr>
+  <tr>
+   <td>primaries</td>
+   <td>red</td>
+   <td style="width: 2em; height: 2em; background-color: red;"> </td>
+   <td>lime</td>
+   <td style="width: 2em; height: 2em; background-color: lime;"> </td>
+   <td>blue</td>
+   <td style="width: 2em; height: 2em; background-color: blue;"> </td>
+  </tr>
+  <tr>
+   <td>secondaries</td>
+   <td>yellow</td>
+   <td style="width: 2em; height: 2em; background-color: yellow;"> </td>
+   <td>aqua</td>
+   <td style="width: 2em; height: 2em; background-color: aqua;"> </td>
+   <td>fuchsia</td>
+   <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td>
+  </tr>
+  <tr>
+   <td> </td>
+   <td>maroon</td>
+   <td style="width: 2em; height: 2em; background-color: maroon;"> </td>
+   <td>orange</td>
+   <td style="width: 2em; height: 2em; background-color: orange;"> </td>
+   <td>olive</td>
+   <td style="width: 2em; height: 2em; background-color: olive;"> </td>
+   <td>purple</td>
+   <td style="width: 2em; height: 2em; background-color: purple;"> </td>
+   <td>green</td>
+   <td style="width: 2em; height: 2em; background-color: green;"> </td>
+   <td>navy</td>
+   <td style="width: 2em; height: 2em; background-color: navy;"> </td>
+   <td>teal</td>
+   <td style="width: 2em; height: 2em; background-color: teal;"> </td>
+  </tr>
+ </tbody>
+</table>
+<p> </p>
+<div class="tuto_details">
+ <div class="tuto_type">
+  বিস্তারিত</div>
+ <p>আপনার  browser হয়ত আরও অনেক রং এর নাম বহন করতে পারে, যেমনঃ</p>
+ <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;">
+  <tbody>
+   <tr>
+    <td>dodgerblue</td>
+    <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td>
+    <td>peachpuff</td>
+    <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td>
+    <td>tan</td>
+    <td style="width: 2em; height: 2em; background-color: tan;"> </td>
+    <td>firebrick</td>
+    <td style="width: 2em; height: 2em; background-color: firebrick;"> </td>
+    <td>aquamarine</td>
+    <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td>
+   </tr>
+  </tbody>
+ </table>
+ <p>এই প্রসারিত তালিকার আরও বিস্তারিত জানার জন্য দেখুন: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a>  CSS 3 এর রং এর মডিউল এ। সতর্ক থাকুন ওই সব রং এর নাম ব্যবহারে যেগুলো আপনার পাঠকের browsers এ হয়ত বহন করে না।</p>
+</div>
+<p>একটি বৃহৎ palette এর জন্য, যে রং গুলো আপনি চান সেগুলোর লাল (red), সবুজ(green) এবং নীল( blue) উপাদানগুলো উল্লেখ করুন হ্যাশট্যাগ (#) দিয়ে এবং ৩টি <em>হেক্সাডেসিমাল</em>(<em>hexadecimal)</em> সংখ্যা যাদের শ্রেণী 0 - 9 , a – f.  a – f অক্ষরগুলো দিয়ে 10 – 15 এর মান বুঝায়:</p>
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#f00</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#0f0</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#00f</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#fff</code></td>
+  </tr>
+ </tbody>
+</table>
+<p>সম্পূর্ণ palette এর জন্য, প্রতিটি উপাদানের ক্ষেত্রে উল্লেখ করুন দুইটি হেক্সাডেসিমাল সংখ্য:</p>
+<table style="border: 0px; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td>black</td>
+   <td style="width: 2em; height: 2em; background-color: #000;"> </td>
+   <td><code>#000000</code></td>
+  </tr>
+  <tr>
+   <td>pure red</td>
+   <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+   <td><code>#ff0000</code></td>
+  </tr>
+  <tr>
+   <td>pure green</td>
+   <td style="width: 2em; height: 2em; background-color: #0f0;"> </td>
+   <td><code>#00ff00</code></td>
+  </tr>
+  <tr>
+   <td>pure blue</td>
+   <td style="width: 2em; height: 2em; background-color: #00f;"> </td>
+   <td><code>#0000ff</code></td>
+  </tr>
+  <tr>
+   <td>white</td>
+   <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+   <td><code>#ffffff</code></td>
+  </tr>
+ </tbody>
+</table>
+<p>আপনি সচারচর এই ৬ সংখ্যার হেক্সাডেসিমাল কোড গুলো আপনার গ্রাফিক্স প্রোগ্রাম অথবা অন্য কোন টুলস থেকে পেতে পারেন।</p>
+<div class="tuto_example">
+ <div class="tuto_type">
+  উদাহরণ</div>
+ <div class="tuto_type">
+  <strong>সামান্য প্র্যাকটিস করে, আপনি তিন সংখ্যার রং গুলো আপনার বেশিরভাগ কাজের জন্য সুবিন্যস্ত করতে পারবেনঃ</strong></div>
+ <div class="tuto_type">
+   </div>
+ <table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
+  <tbody>
+   <tr>
+    <td>শুরু লাল এর সাথে:</td>
+    <td style="width: 2em; height: 2em; background-color: #f00;"> </td>
+    <td><code>#f00</code></td>
+   </tr>
+   <tr>
+    <td>একে হাল্কা করার জন্য, কিছু সবুজ এবং নীল যোগ করুনঃ</td>
+    <td style="width: 2em; height: 2em; background-color: #f77;"> </td>
+    <td><code>#f77</code></td>
+   </tr>
+   <tr>
+    <td>একে আরও কমলা করার জন্য, সামান্য একটু এক্সট্রা সবুজ যোগ করুনঃ</td>
+    <td style="width: 2em; height: 2em; background-color: #fa7;"> </td>
+    <td><code>#fa7</code></td>
+   </tr>
+   <tr>
+    <td>আরও ডার্ক করার জন্য, এর সব উপাদান মুছে ফেলুন:</td>
+    <td style="width: 2em; height: 2em; background-color: #c74;"> </td>
+    <td><code>#c74</code></td>
+   </tr>
+   <tr>
+    <td>এর সম্পৃক্তি দূর করার জন্য, এর উপাদান গুলো কে আরও সমান করুনঃ</td>
+    <td style="width: 2em; height: 2em; background-color: #c98;"> </td>
+    <td><code>#c98</code></td>
+   </tr>
+   <tr>
+    <td>আপনি যদি একদম সমান করেন তাহলে আপনি পাবেন ধুুসরঃ</td>
+    <td style="width: 2em; height: 2em; background-color: #ccc;"> </td>
+    <td><code>#ccc</code></td>
+   </tr>
+  </tbody>
+ </table>
+ <p>একটি মোমের মত শেডের জন্য যেমন বর্ণহীন নীলঃ</p>
+ <table style="border: 0px; margin-left: 2em; background-color: #fffff4;">
+  <tbody>
+   <tr>
+    <td>শুরু একদম শুভ্র সাদা থেকে:</td>
+    <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td>
+    <td><code>#fff</code></td>
+   </tr>
+   <tr>
+    <td>অন্যান্য উপাদানগুলো সামান্য কমান:</td>
+    <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td>
+    <td><code>#eef</code></td>
+   </tr>
+  </tbody>
+ </table>
+</div>
+<div class="tuto_details">
+ <div class="tuto_type">
+  আরও বিস্তারিত</div>
+ <p>আপনি আরও উল্লেখ করতে পারেন একতি রং এর ডেসিমাল RGB মানগনগুলো যাদের শ্রেণী 0 – 25 অথবা percentages.</p>
+ <p>উদাহরণস্বরূপ ,মেরুন (dark red):</p>
+ <pre class="brush:css  language-css"><code class="language-css"><span class="token function">rgb</span>(128, 0, 0)</code></pre>
+ <p>কিভাবে রং উল্লেখ করা যায় তার আরও বিস্তারিত জানার জন্য দেখুনঃ <a class="external external-icon" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">রং</a> CSS সুনির্দিষ্টকরণে এ। ম্যাচিং সিস্টেম রং যেমন মেনু এবং ThreeDFace, দেখুন: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> CSS সুনির্দিষ্টকরণে এ।</p>
+</div>
+<p> </p>
+<p>আপনি ইতিমধ্যে {{ cssxref("color") }} প্রপার্টি text এ ব্যবহার করেছেন ।</p>
+<p>আপনি চাইলে আরও ব্যবহার করতে পারেন {{ cssxref("background-color") }} প্রপার্টি টি যাতে করে আপনি উপাদানগুলোর ব্যাকগ্রাউন্ড পরিবর্তন করতে পারেন।</p>
+<p>ব্যাকগ্রাউন্ড টি আপনি সেট করতে পারেন স্বচ্ছ ভাবে যাতে করে আপনি স্পষ্টভাবে যে কোন রং মুছে ফেলতে পারেন, মূল উপাদানের ব্যাকগ্রাউন্ড প্রকাশ করে।</p>
+<div class="tuto_example">
+ <div class="tuto_type">
+  উদাহরণ</div>
+ <p>এই টিউটোরিয়ালে <strong>উদাহরণ</strong> বাক্সগুলোতে বর্ণহীন হলুদ ব্যাকগ্রাউন্ড ব্যবহার করা হয়েছে:</p>
+ <pre class="brush:css">background-color: #fffff4;
+</pre>
+ <p><strong>আরও বিস্তারিত</strong> বাক্সগুলো এই বর্ণহীন ধূসর ব্যবহার করেছেঃ</p>
+ <pre class="brush:css">background-color: #f4f4f4;
+</pre>
+</div>
+<p> </p>
+<h2 id="কাজ_কালার_কোড_এর_ব্যবহার">কাজ: কালার কোড এর ব্যবহার</h2>
+<ol>
+ <li>আপনার CSS ফাইল সম্পাদন করুন।</li>
+ <li>এখানে মোটা করে যেগুলো দেখানো হয়েছে সেগুলো পরিবর্তন করুন, যাতে করে আপনি আদি অক্ষরগুলো কে একটি বর্ণহীন নীল রং দিতে পারেন। ( যে বিন্যাসগুলো এবং মন্তব্যগুলো আপনার ফাইলে দেখানো হয়েছে সেগুলো সম্ভবত দেখানো ফাইলগুলো হতে ভিন্ন।এই বিন্যাস এবং উক্তিগুলো আপনার মত করে সেভ করে রাখুন।)<br>
+  <pre class="brush:css;highlight:[13]">/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+</pre>
+ </li>
+ <li>ফাইলটি সেভ করুন এবং আপনার ব্রাউজার টিকে রিফ্রেশ করুন যাতে করে আপনি ফলাফলটি দেখতে পারেন।</li>
+</ol>
+<table>
+ <tbody>
+  <tr>
+   <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td>
+  </tr>
+  <tr>
+   <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td>
+  </tr>
+ </tbody>
+</table>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td>
+    <p><strong>প্রতিদন্দিতাঃ</strong><br>
+     আপনার CSS ফাইলে ,সব গুলো কালারের নাম পরিবর্তন করে 3 ডিজিট এর কালার কোড এ পরিবর্তন করুন ফলাফলে কোন প্রভাব না ফেলে।</p>
+    <p>(এটা হয়ত একদম সঠিক ভাবে হবে না, কিন্তু আপনি কাছাকাছি যেতে পারবেন। একদম সঠিক ভাবে করার জন্য আপনার প্রয়োজন 6 ডিজিট এর কোডসমূহ, এবং প্রয়োজন CSS সুনির্দিষ্টকরন দেখা অথবা ব্যবহার করুন একটি গ্রাফিক্স টুল যাতে করে কালার গুলো মিল করাতে পারেন।)</p>
+    <p>                                                                                 <a href="https://developer.mozilla.org/bn-BD/docs/Web/CSS/Getting_Started/Color$edit#tutochallenge">প্রতিদ্বন্দ্বিতার জন্য সমাধান দেখুন।</a></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="এরপর_কি"><strong>এরপর কি?</strong></h2>
+<p><br>
+ {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}আপনার নমুনা ডকুমেন্ট এবং আপনার নমুনা stylesheet এর থেকে সম্পূর্ণভাবে আলাদা। এর পরে <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Content">পরবর্তী বিভাগ</a>  ব্যাখ্যা করবে কেমন করে আপনি এই সম্পূর্ণ আলাদা জিনিস থেকে ভিন্ন কিছু তৈরি করবেন।<br>
+  </p>