files/bn/web/css/getting_started/why_use_css/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

---
title: কেন CSS ব্যবহার করবেন ?
slug: Web/CSS/Getting_Started/Why_use_CSS
tags:
  - NeedsReview
translation_of: Learn/CSS/First_steps/How_CSS_works
translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS
---
<p>{{ CSSTutorialTOC() }}</p>

<p>{{ previousPage("/bn-BD/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}<span class="seoSummary"><span class="seoSummary">এটি  <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> <span id="result_box" lang="bn"><span class="alt-edited hps">টিউটোরিয়ালের <span id="result_box" lang="bn"><span class="hps">দ্বিতীয়</span> <span class="alt-edited hps">অধ্যায়</span></span></span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">এবং ব্যাখ্যা করে কেন</span></span></span><span id="result_box" lang="bn"><span class="alt-edited hps"> ডকুমেন্ট</span> <span class="alt-edited hps">CSS</span> <span class="alt-edited hps">ব্যবহার করে।</span></span> আপনি CSS ব্যবহার করেন <span id="result_box" lang="bn"><span class="hps">আপনার নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">একটি</span> <span class="hps">স্টাইলশীট</span> <span class="hps">যুক্ত করতে।</span></span></span></p>

<h2 class="clearLeft" id="তথ্য_CSS_কেন_ব্যবহার_করব">তথ্য:  CSS কেন ব্যবহার করব ?</h2>

<p>CSS <span id="result_box" lang="bn"><span class="hps">একটি</span> <span class="alt-edited hps">ডকুমেন্টের</span> <span class="hps">তথ্য</span> <span class="alt-edited hps">সামগ্রী</span></span> সেটি কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শিত হবে তার <span id="result_box" lang="bn"><span class="hps">বিবরণ</span> <span class="hps">থেকে পৃথক রাখতে <span id="result_box" lang="bn"><span class="hps">সাহায্য করে। <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট </span></span></span></span></span></span></span></span>কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শিত হবে তার <span id="result_box" lang="bn"><span class="hps">বিবরণ <span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল</span> <span class="hps">হিসাবে পরিচিত। </span></span></span></span></span></span><span id="result_box" lang="bn"><span class="hps">আপনি</span> <span class="alt-edited hps">কন্টেন্ট</span> <span class="hps">থেকে </span></span><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল </span></span></span></span></span></span>আলাদা রাখুন <span id="result_box" lang="bn"><span>যাতে আপনি পারেন </span></span>:</p>

<ul>
 <li><span class="short_text" id="result_box" lang="bn"><span class="hps">অনুলিপি</span> <span class="alt-edited hps">এড়াতে</span></span></li>
 <li><span class="short_text" id="result_box" lang="bn"><span class="hps">রক্ষণাবেক্ষণ</span> <span class="hps">সহজ</span> <span class="alt-edited hps">করে তুলতে</span></span></li>
 <li><span id="result_box" lang="bn"><span class="alt-edited hps">বিভিন্ন উদ্দেশ্যে</span> <span class="hps">বিভিন্ন </span>স্টাইল এর  <span class="hps">সঙ্গে একই</span> <span class="alt-edited hps">কন্টেন্ট</span> <span class="hps">ব্যবহার করতে</span></span></li>
</ul>

<div class="tuto_example">
<div class="tuto_type">উদাহরণ</div>

<p><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">ওয়েব</span> <span class="hps">সাইটের <span id="result_box" lang="bn"><span class="hps">হাজার হাজার</span> <span id="result_box" lang="bn"><span class="hps">পৃষ্ঠা </span></span><span class="hps">থাকতে পারে</span></span></span></span> যারা <span id="result_box" lang="bn"><span class="alt-edited hps">অনুরূপ। <span id="result_box" lang="bn"><span class="hps">CSS এর</span> <span class="hps">ব্যবহার করে,<span id="result_box" lang="bn"><span class="alt-edited hps">আপনি একটি <span id="result_box" lang="bn"><span class="hps">সাধারণ</span> <span class="hps">ফাইলের মধ্যে</span> <span id="result_box" lang="bn"><span class="hps">তথ্য সংরক্ষণ করুন <span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps"><span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps"><span id="result_box" lang="bn"><span class="alt-edited hps">যা</span> </span></span></span></span></span></span></span></span></span></span>সকল পৃষ্ঠা</span> <span class="alt-edited hps">শেয়ার</span> </span></span></span></span></span></span></span></span></span></span>করে।</p>

<p>যখন একজন ব্যবহারকারী একটি ওয়েব পেইজ <span id="result_box" lang="bn"><span class="alt-edited hps">প্রদর্শন করে,<span id="result_box" lang="bn"><span class="hps">ব্যবহারকারীর</span> <span class="hps">ব্রাউজার</span> <span class="hps">পৃষ্ঠার</span> <span class="hps">কন্টেন্টের</span> <span class="alt-edited hps">পাশাপাশি</span> <span class="alt-edited hps">স্টাইলের</span> <span class="hps">তথ্য</span> <span class="hps">লোড করে।</span></span></span></span></p>

<p><span id="result_box" lang="bn"><span class="hps">যখন একজন ব্যবহারকারী</span> <span class="hps">একটি</span> <span class="hps">ওয়েব পেজ</span> <span class="alt-edited hps">প্রিন্ট করে</span><span>, আপনি</span></span> <span id="result_box" lang="bn"><span class="alt-edited hps">বিভিন্ন</span> <span class="alt-edited hps">স্টাইলের</span> <span class="hps">তথ্য প্রদান করেন যা <span id="result_box" lang="bn"><span class="hps">মুদ্রিত</span> <span class="alt-edited hps">পৃষ্ঠা <span id="result_box" lang="bn"><span class="hps">পড়তে <span id="result_box" lang="bn"><span class="hps">সহজ করে তোলে।</span></span></span></span></span></span></span></span></p>
</div>

<p><span id="result_box" lang="bn">HTML <span class="hps">দিয়ে</span> <span class="hps">সাধারণত </span><span class="hps">আপনি <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্টের</span> <span class="hps">তথ্য</span> <span class="alt-edited hps">সামগ্রী<span id="result_box" lang="bn"><span class="alt-edited hps"> বর্ণনা করেন</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষা</span> <span class="hps">ব্যবহার</span></span></span></span></span></span> করে,<span id="result_box" lang="bn"><span class="hps">তার</span> <span class="alt-edited hps">স্টাইল নয়।</span></span>আপনি CSS ব্যবহার  করেন এর স্টাইল <span id="result_box" lang="bn"><span class="hps">নির্দিষ্ট করতে,<span id="result_box" lang="bn"><span class="hps">এর বিষয়বস্তু নয়</span></span></span></span> ।(<span id="result_box" lang="bn"><span class="hps">পরবর্তীতে</span> <span class="alt-edited hps">এই টিউটোরিয়ালে</span><span>, আপনি এই</span> <span class="hps">ব্যবস্থার</span> <span class="hps">কিছু</span> <span class="hps">ব্যতিক্রম</span> <span class="hps">দেখতে পাবেন।</span></span>)</p>

<div class="tuto_details">
<div class="tuto_type"><span class="short_text" id="result_box" lang="bn"><span class="hps">আরো তথ্য</span></span></div>

<p><span id="result_box" lang="bn"><span class="hps">এছাড়াও <span id="result_box" lang="bn"><span class="alt-edited hps">HTML এর</span> <span class="hps">মত</span> <span class="hps">একটি</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষা <span id="result_box" lang="bn"><span class="alt-edited hps">স্টাইল</span> <span class="hps">নির্দিষ্ট করতে</span> <span class="hps">কিছু উপায়</span> <span class="hps">প্রদান করে।</span></span></span></span></span></span></p>

<p><span id="result_box" lang="bn"><span class="hps">উদাহরণস্বরূপ,</span> <span class="hps">HTML এ</span> <span class="hps">আপনি টেক্সট</span> <span class="hps">গাঢ়</span> <span class="hps">করতে একটি</span> <span class="hps">&lt;b&gt;</span> <span class="hps">ট্যাগ</span> <span class="hps">ব্যবহার করতে পারেন</span><span>, <span id="result_box" lang="bn"><span>এবং আপনি</span> <span class="hps">তার</span> <span class="hps">&lt;body&gt;</span> <span class="hps">ট্যাগ</span>ে <span class="hps">একটি</span> <span class="hps">পৃষ্ঠার</span> <span class="alt-edited hps">ব্যাকগ্রাউন্ড রং</span> <span class="hps">নির্ধারণ করতে পারবেন</span></span></span></span>।</p>

<p>আপনি যখন CSS ব্যবহার করেন,<span id="result_box" lang="bn"><span class="hps">আপনি সাধারণত</span> <span class="hps">মার্কআপ</span> <span class="hps">ভাষার</span> <span class="alt-edited hps">এই বৈশিষ্ট্যগুলি</span> <span class="hps">ব্যবহার</span> <span class="hps">এড়িয়ে যান যাতে করে <span id="result_box" lang="bn"><span class="hps">আপনার সকল</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="alt-edited hps">এর স্টাইল</span> <span class="alt-edited hps">সংক্রান্ত তথ্য</span> <span class="hps">এক জায়গায়</span> <span class="hps">হয়।</span></span></span></span></p>
</div>

<h2 id="অ্যাকশন_একটি_স্টাইলশীট_তৈরি"><span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">অ্যাকশন</span><span>:</span> <span class="hps">একটি</span> <span class="hps">স্টাইলশীট</span> <span class="hps">তৈরি</span></span></h2>

<ol>
 <li><span id="result_box" lang="bn"><span class="alt-edited hps">পূর্বের</span> মত <span class="hps">একই ডিরেক্টরির মধ্যে</span> <span class="hps">আরেকটি</span> <span class="hps">টেক্সট ফাইল</span> <span class="hps">তৈরি করুন।</span> <span class="alt-edited hps">এই</span> <span class="hps">ফাইলটি</span> <span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="hps">হবে.</span> <span class="alt-edited hps">এটির</span> <span class="hps">নাম দিন </span></span>: <code>style1.css</code></li>
 <li><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="alt-edited hps">CSS</span> <span class="hps">ফাইলের</span> <span class="hps">মধ্যে,</span> <span class="hps"><span id="result_box" lang="bn"><span class="hps">এই এক</span> <span class="hps">লাইন </span></span>কপি</span> <span class="hps">এবং </span><span class="hps">পেস্ট করুন</span><span>, তারপর</span> <span class="alt-edited hps">ফাইলটি সংরক্ষণ করুন</span></span>:
  <pre class="brush: css">strong {color: red;}
</pre>
 </li>
</ol>

<h3 id="আপনার_ডকুমেন্টের_সাথে_স্টাইলশীট_যুক্তকরণ"><span class="short_text" id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="alt-edited hps">ডকুমেন্টের সাথে <span class="short_text" id="result_box" lang="bn"><span class="hps">স্টাইলশীট <span class="short_text" id="result_box" lang="bn"><span class="alt-edited hps">যুক্তকরণ</span></span></span></span></span></span></h3>

<ol>
 <li><span id="result_box" lang="bn"><span class="hps">আপনার</span> <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট এর সাথে <span id="result_box" lang="bn"><span class="hps">আপনার </span></span></span></span><span class="hps">স্টাইলশীট</span> <span class="hps">সংযুক্ত করতে,<span id="result_box" lang="bn"><span>আপনার</span> <span class="hps">HTML ফাইল</span> <span class="hps">সম্পাদনা করুন।<span id="result_box" lang="bn"><span class="hps"> এখানে</span> <span class="hps">হাইলাইট করা লাইনটি <span id="result_box" lang="bn"><span class="hps">যোগ করুন</span></span></span></span></span></span></span></span>:

  <pre class="brush: html; highlight:[6];">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Sample document&lt;/title&gt;
  &lt;link rel="stylesheet" href="style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;
      &lt;strong&gt;C&lt;/strong&gt;ascading
      &lt;strong&gt;S&lt;/strong&gt;tyle
      &lt;strong&gt;S&lt;/strong&gt;heets
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
 </li>
 <li><span id="result_box" lang="bn"><span class="hps">ফাইলটি</span> <span class="hps">সংরক্ষণ করুন</span> <span class="hps">এবং আপনার</span> <span class="hps">ব্রাউজারের</span> <span class="alt-edited hps">ডিসপ্লে</span> <span class="hps">রিফ্রেশ করুন। <span id="result_box" lang="bn"><span class="hps">স্টাইলশীটটি <span id="result_box" lang="bn"><span class="alt-edited hps">প্রথম</span> <span class="hps">অক্ষরগুলোকে</span> <span class="hps">লাল</span> <span class="hps">করে তোলে, এভাবে</span></span></span></span></span></span>:
  <table style="border: 2px outset #36b; padding: 1em;">
   <tbody>
    <tr>
     <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td>
    </tr>
   </tbody>
  </table>
 </li>
</ol>

<div class="tuto_example" id="challenge">
<div class="tuto_type"><span class="short_text" id="result_box" lang="bn"><span class="hps">চ্যালেঞ্জ</span></span></div>

<p><span class="short_text" id="result_box" lang="bn"><span class="hps">লাল</span> <span class="hps">ছাড়াও,</span> <span class="alt-edited hps">CSS</span> <span class="hps">কিছু অন্যান্য</span> <span class="hps">রং </span></span>এর নাম প্রদান করে।</p>

<p><span id="result_box" lang="bn"><span class="hps">রেফারেন্স না দেখে, <span id="result_box" lang="bn"><span id="result_box" lang="bn"><span class="hps">আরো </span></span></span><span id="result_box" lang="bn"><span class="hps">পাঁচটি</span>  <span class="alt-edited hps">রঙের</span> <span class="hps">নাম</span> <span class="hps">খুঁজে বের করুন যা <span id="result_box" lang="bn"><span class="hps">আপনার</span> <span class="hps">স্টাইলশীট</span> <span class="alt-edited hps">এ কাজ করে।</span></span></span></span></span></span></p>

<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Possible solution</div>

<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p>
<a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div>

<h2 id="পরবর্তীতে_কি"><span class="short_text" id="result_box" lang="bn"><span class="hps">পরবর্তী</span></span><span class="short_text" id="result_box" lang="bn"><span>তে  কি?</span></span></h2>

<p>{{nextPage("/bn-BD/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}<span id="result_box" lang="bn"><span class="alt-edited hps">এখন আপনার</span> <span class="hps">একটি পৃথক</span> <span class="hps">স্টাইলশীট</span> এর <span class="alt-edited hps">সাথে যুক্ত</span> <span class="hps">একটি নমুনা</span> <span class="alt-edited hps">ডকুমেন্ট</span> <span class="hps">আছে</span><span>,</span></span> আপনি প্রস্তুত জানতে <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">learn more</a> কিভাবে <span id="result_box" lang="bn"><span class="alt-edited hps">আপনার ব্রাউজার</span> <span class="hps">তাদের</span> <span class="alt-edited hps">সমন্বয় করে যখন এটি <span id="result_box" lang="bn"><span class="alt-edited hps">ডকুমেন্ট</span> <span class="alt-edited hps">প্রদর্শন করে।</span></span></span></span></p>