CSS মৌলিক বিষয়গুলো

Articles

CSS মৌলিক বিষয়গুলো

এই নিবন্ধটি CSS-এর মৌলিক বিষয়গুলি ব্যাখ্যা করে।

আপনি CSS সিলেক্টর, কম্বিনেটর এবং নির্দিষ্টতার বিষয়ে শিখতে পারেন।

YouTube Video

প্রিভিউ জন্য HTML/CSS

css-base.css

  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 600px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29    padding-left: 10px;
 30    border-left: 2px solid #ccc;
 31}
 32
 33h4 {
 34    margin: 0;
 35    margin-left: 10px;
 36    font-size: 14px;
 37}
 38
 39article section p {
 40    margin-left:  40px;
 41}
 42
 43p, pre {
 44    margin: 10px 0;
 45    padding: 0;
 46}
 47
 48ul, ol, dl, menu {
 49    margin: 0;
 50}
 51
 52pre {
 53    background-color: #f0f0f0;
 54    border-left: 4px solid #ccc;
 55    padding: 10px;
 56    overflow-x: auto;
 57}
 58
 59.sample-view {
 60    border: 1px solid #eee;
 61    border-left: 4px solid #eee;
 62    padding: 10px;
 63    overflow-x: auto;
 64}
 65
 66p.sample, .sample {
 67    background-color: #e7f4e9;
 68    padding: 10px;
 69    border-left: 4px solid #7bbd82;
 70    color: #333;
 71}
 72
 73p.sample-error, .sample-error {
 74    background-color: #f4e7e7;
 75    padding: 10px;
 76    border-left: 4px solid lightcoral;
 77    color: #333;
 78}
 79
 80.example {
 81    background-color: #e0f0ff;
 82    padding: 10px;
 83    border-left: 4px solid #4a90e2;
 84    color: #333;
 85}
 86
 87p.sample-warn, .sample-warn {
 88    background-color: #f4f1e7;
 89    padding: 10px;
 90    border-left: 4px solid #bda97b;
 91    color: #333;
 92}
 93
 94code {
 95    background-color: #f4f4f4;
 96    padding: 2px 4px;
 97    border-radius: 4px;
 98    font-family: monospace;
 99}
100
101span {
102    font-weight: bold;
103}
104
105article {
106    background-color: white;
107    padding: 20px;
108    margin-bottom: 10px;
109    border-radius: 8px;
110    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114    margin-bottom: 20px;
115}
116
117section div {
118    width: 400px;
119    height: 50px;
120    margin: 20px auto;
121    color: white;
122    display: flex;
123    align-items: center;
124    justify-content: center;
125    font-size: 1.2rem;
126    background-color: lightgray;
127    border: 1px solid #ccc;
128}
129
130header h4 {
131    text-align: right;
132    color: #666;
133    font-size: 0.8em;
134    text-decoration: none;
135}
136
137header + pre {
138    margin: 0;
139    margin-top: -20px;
140    padding-top: 14px;
141    font-size: 0.9em;
142}
143
144header + .sample-view {
145    margin: 0;
146    margin-top: -16px;
147}
148
149.sample-view p {
150    margin: 0;
151    padding: 0;
152}

css-basics.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Basics</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-basics.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Basics</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Selectors</h2></header>
 19        <article>
 20            <h3>Universal Selector : *</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24* {
 25    font-family:'Courier New', Courier, monospace;
 26}
 27</pre>
 28            </section>
 29        </article>
 30        <article>
 31            <h3>Element Selector</h3>
 32            <section>
 33                <header><h4>CSS</h4></header>
 34<pre class="sample">
 35strong {
 36    color: red;
 37}
 38</pre>
 39                <header><h4>HTML</h4></header>
 40                <pre>This is &lt;strong&gt;sample&lt;/strong&gt; text.</pre>
 41                <header><h4>HTML+CSS</h4></header>
 42                <section class="sample-view">
 43                    This is <strong>sample</strong> text.
 44                </section>
 45            </section>
 46        </article>
 47        <article>
 48            <h3>ID Selector : #</h3>
 49            <section>
 50                <header><h4>CSS</h4></header>
 51<pre class="sample">
 52#example1 {
 53    color: steelblue;
 54}
 55</pre>
 56                <header><h4>HTML</h4></header>
 57                <pre>&lt;span id="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 58                <header><h4>HTML+CSS</h4></header>
 59                <section class="sample-view">
 60                    <span id="example1">This is sample text.</span>
 61                </section>
 62            </section>
 63        </article>
 64        <article>
 65            <h3>Class Selector : .</h3>
 66            <section>
 67                <header><h4>CSS</h4></header>
 68<pre class="sample">
 69.example1 {
 70    background-color: yellow;
 71    font-weight: bold;
 72}
 73</pre>
 74                <header><h4>HTML</h4></header>
 75                <pre>&lt;span class="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 76                <header><h4>HTML+CSS</h4></header>
 77                <section class="sample-view">
 78                <section>
 79                    <span class="example1">This is sample text.</span>
 80                </section>
 81            </section>
 82        </article>
 83        <article>
 84            <h3>Attribute Selector : [property=value]</h3>
 85            <section>
 86                <header><h4>CSS</h4></header>
 87<pre class="sample">
 88a[href="index.html"] {
 89    font-weight: bold;
 90}
 91</pre>
 92                <header><h4>HTML</h4></header>
 93<pre>
 94&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;br&gt;
 95&lt;a href="about.html"&gt;About&lt;/a&gt;
 96</pre>
 97                <header><h4>HTML+CSS</h4></header>
 98                <section class="sample-view">
 99                    <a href="index.html">Home</a><br>
100                    <a href="about.html">About</a>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>Descendant Combinator</h3>
106            <section>
107                <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110    text-decoration: underline;
111}
112</pre>
113                <header><h4>HTML</h4></header>
114                <pre>&lt;span&gt;This is &lt;strong&gt;sample&lt;/strong&gt; text.&lt;/span&gt;</pre>
115                <header><h4>HTML+CSS</h4></header>
116                <section class="sample-view">
117                    <span>This is <strong>sample</strong> text.</span>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>Child Combinator : &gt;</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127    color: blue;
128}
129</pre>
130                <header><h4>HTML</h4></header>
131<pre>
132This is &lt;em&gt;sample&lt;/em&gt; text.&lt;br&gt;
133&lt;span&gt;This is &lt;em&gt;another&lt;/em&gt; text.&lt;/span&gt;&lt;br&gt;
134&lt;span&gt;This text is not &lt;s&gt;&lt;em&gt;blue&lt;/em&gt;&lt;/s&gt; in color.&lt;/span&gt;
135</pre>
136                <header><h4>HTML+CSS</h4></header>
137                <section class="sample-view">
138                    This is <em>sample</em> text.<br>
139                    <span>This is <em>another</em> text.</span><br>
140                    <span>This text is not <s><em>blue</em></s> in color.</span>
141                </section>
142            </section>
143        </article>
144        <article>
145            <h3> Next Sibling combinator : +</h3>
146            <section>
147                <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150    color: green;
151}
152</pre>
153                <header><h4>HTML</h4></header>
154<pre>
155&lt;span&gt;
156    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
157    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
158    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
159&lt;/span&gt;
160</pre>
161                <header><h4>HTML+CSS</h4></header>
162                <section class="sample-view">
163                    <span>
164                        This is <b>first text</b>.<br>
165                        This is <b>second text</b>.<br>
166                        <i>This</i> is <b>third text</b>.<br>
167                    </span>
168                </section>
169            </section>
170        </article>
171                <article>
172            <h3>Subsequent Sibling Combinator : ~</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177    color: steelblue;
178}
179</pre>
180                <header><h4>HTML</h4></header>
181<pre>
182&lt;span&gt;
183    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
184    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
185    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
186&lt;/span&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <span>
191                        This is <b>first text</b>.<br>
192                        This is <b>second text</b>.<br>
193                        <i>This</i> is <b>third text</b>.<br>
194                    </span>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>Pseudo Class ":" </h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204    background-color: lightskyblue;
205}
206</pre>
207                <header><h4>HTML</h4></header>
208<pre>
209    &lt;a href="#"&gt;Click here&lt;/a&gt;&lt;br&gt;
210</pre>
211                <header><h4>HTML+CSS</h4></header>
212                <section class="sample-view">
213                    <a href="#">Click here</a><br>
214                </section>
215            </section>
216        </article>
217        <article>
218            <h3>Pseudo Element "::" </h3>
219            <section>
220                <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223    content: " ** ";
224    color: red;
225    font-weight: bold;
226}
227</pre>
228                <header><h4>HTML</h4></header>
229<pre>
230    &lt;u&gt;Sample Text&lt;/u&gt;
231</pre>
232                <header><h4>HTML+CSS</h4></header>
233                <section class="sample-view">
234                    <u>Sample Text</u>
235                </section>
236            </section>
237        </article>
238    </main>
239
240    <main>
241        <header><h2>Inheritance &amp; Priority of CSS</h2></header>
242        <article>
243            <h3>CSS Specificity Rule</h3>
244            <section>
245                <header><h4>CSS Specificity</h4></header>
246                <section class="example">
247                <ol>
248                    <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249                    <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251                    <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252                    <li><b>Universal Selector</b>: <code>*</code></li>
253                </ol>
254                </section>
255
256                <header><h4>How Specificity is Calculated</h4></header>
257                <section class="example">
258                <ol>
259                    <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260                    <li><b>ID Selectors</b>: Worth 100 points each.</li>
261                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262                    <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263                </ol>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>Example of CSS Specificity Rule</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274    color: blue;
275}
276
277/* Class Selector */
278.header {
279    color: red;
280}
281
282/* Element Selector */
283h1 {
284    color: green;
285}
286</pre>
287            <header><h4>HTML</h4></header>
288            <pre>&lt;h1 id="header" class="header"&gt;Example of CSS Specificity Rule&lt;/h1&gt;</pre>
289            <header><h4>HTML+CSS</h4></header>
290            <section class="sample-view">
291                <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292            </section>
293        </section>
294    </article>
295    <article>
296        <h3>Using <code>!important</code> in CSS</h3>
297        <section>
298            <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301    color: blue;
302}
303
304.important-header {
305    color: red !important;
306}
307</pre>
308            <header><h4>HTML</h4></header>
309            <pre>&lt;h1 id="important-header" class="important-header"&gt;Example of &lt;code&gt;!important&lt;/code&gt;&lt;/h1&gt;</pre>
310            <header><h4>HTML+CSS</h4></header>
311            <section class="sample-view">
312                <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313            </section>
314        </section>
315    </article>
316    <article>
317        <h3>CSS Inheritance</h3>
318        <section>
319            <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322    color: gray;
323}
324
325p {
326    color: black;
327}
328</pre>
329            <header><h4>HTML</h4></header>
330<pre>
331&lt;footer&gt;
332    &lt;p&gt;This paragraph's text will be black.&lt;/p&gt;
333    &lt;span&gt;This text will be gray.&lt;/span&gt;
334&lt;/footer&gt;
335</pre>
336            <header><h4>HTML+CSS</h4></header>
337            <section class="sample-view">
338                <footer>
339                    <p>This paragraph's text will be black.</p>
340                    <span>This text will be gray.</span>
341                </footer>
342            </section>
343        </section>
344    </article>
345    <article>
346        <h3>Cascading Styles</h3>
347        <section>
348            <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351    color: red;
352}
353
354.text {
355    color: blue;
356}
357</pre>
358            <header><h4>HTML</h4></header>
359            <pre>&lt;p class="text"&gt;This text will be blue.&lt;/p&gt;</pre>
360            <header><h4>HTML+CSS</h4></header>
361            <section class="sample-view">
362                <p class="text">This text will be blue.</p>
363            </section>
364        </section>
365    </article>
366
367</body>
368</html>

মূল সিনট্যাক্স

1selector {
2    property: value;
3}

CSS-এর মৌলিক কাঠামো গঠিত হয়েছে selector, property, এবং value দ্বারা। প্রত্যেকটি গুণাবলী এবং মানের জোড়ার পরে সেমিকোলন থাকে।

selector নির্ধারণ করে কোন HTML উপাদানে স্টাইল প্রয়োগ হবে। এই উদাহরণে, সমস্ত <header> উপাদানে স্টাইল প্রয়োগ করা হয়েছে।
property নির্ধারণ করে কোন স্টাইল প্রপার্টি পরিবর্তন করা হবে, যেমন রঙ বা ফন্টের সাইজ। এই উদাহরণে, padding এবং color হল গুণাবলী।
value হল সেই মান যা প্রপার্টিকে বরাদ্দ করা হয়। উদাহরণস্বরূপ, রঙের জন্য এটি হতে পারে white বা #9cf, এবং মার্জিন আকারের জন্য এটি হতে পারে 20px।

সিলেক্টরগুলো

CSS সিলেক্টরগুলি HTML উপাদান বাছাই করার জন্য ধরণ হয়। সিলেক্টর ব্যবহার করে আপনি নির্দিষ্ট উপাদান বা উপাদানের গোষ্ঠীতে স্টাইল প্রয়োগ করতে পারেন।

ইউনিভার্সাল সিলেক্টর

1/* Universal Selector : "*" */
2* {
3    font-family:'Courier New', Courier, monospace;
4}

* একটি সার্বজনীন সিলেক্টর যা সকল উপাদানের উপর প্রয়োগ হয়।
এই উদাহরণে, সমস্ত উপাদানের ফন্ট পরিবর্তন করা হয়েছে।

এলেমেন্ট সিলেক্টর

1/* Element Selector */
2strong {
3    color: red;
4}

একটি উপাদান সিলেক্টর এমন একটি সিলেক্টর যা নির্দিষ্ট HTML ট্যাগে প্রয়োগ করা হয় HTML ট্যাগের নাম লিখে।
এই উদাহরণে,  উপাদানের লেখার রঙ লাল করে দেওয়া হয়েছে।

আইডি সিলেক্টর

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}

# একটি ID সিলেক্টর যা ID দ্বারা উপাদান নির্বাচন করতে ব্যবহৃত হয়।
আইডিগুলি অনন্য, তাই একটি পৃষ্ঠায় একই আইডিযুক্ত একটি মাত্র উপাদান থাকতে পারে।

ক্লাস সিলেক্টর

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}

. একটি ক্লাস সিলেক্টর যা ক্লাস দ্বারা উপাদান নির্বাচন করতে ব্যবহৃত হয়।
যে ক্লাসটির অন্তর্ভুক্ত, তার উপাদানগুলিতে স্টাইল প্রয়োগ করতে HTML উপাদানগুলিতে একটি ক্লাস অ্যাট্রিবিউট যোগ করুন।

অ্যাট্রিবিউট সিলেক্টর

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}

[href="index.html"] হল একটি অ্যাট্রিবিউট সিলেক্টর যা নির্দিষ্ট অ্যাট্রিবিউট সহ উপাদানগুলি নির্বাচন করে।
এই উদাহরণে, href অ্যাট্রিবিউটের মান index.html সহ <a> উপাদানের টেক্সটকে বোর্ড করা হয়েছে।

কম্বিনেটর

কম্বিনেটর ব্যবহার করা হয় একাধিক সিলেক্টর একত্রিত করতে, নির্দিষ্ট সম্পর্কযুক্ত উপাদানগুলিকে নির্বাচন করার জন্য। সিলেক্টর একটি উপাদানকে আলাদাভাবে নির্বাচন করে, যেখানে কম্বিনেটর উপাদানের মধ্যে কাঠামোগত সম্পর্ক নির্ধারণের ভূমিকা পালন করে।

অবনত কম্বিনেটর

1/* Descendant Combinator : " " */
2span strong {
3    text-decoration: underline;
4}

একটি বংশধর কম্বিনেটর নির্দিষ্ট উপাদানগুলির মধ্যে সমস্ত উপাদানে স্টাইল প্রয়োগ করে।
এই উদাহরণে,  উপাদানের মধ্যে থাকা  উপাদানে আন্ডারলাইন প্রয়োগ করা হয়েছে।

শিশু কম্বিনেটর

1/* Child Combinator : ">" */
2span > em {
3    color: blue;
4}

span এবং em এর মধ্যে থাকা > চিহ্নটি একটি শিশু কম্বিনেটর হিসাবে ব্যবহৃত হয়। এই উদাহরণে, স্টাইল শুধুমাত্র তাদের  উপাদানের সরাসরি শিশু  উপাদানগুলিতে প্রয়োগ হয়। তৃতীয় লাইনের উদাহরণে,  এবং  ট্যাগগুলির মধ্যে একটি <s> ট্যাগ থাকার কারণে স্টাইল প্রয়োগ হয় না।

আসন্ন সহোদর কম্বিনেটর

1/* Next Sibling combinator */
2br + b {
3    color: green;
4}

+ চিহ্ন ব্যবহার করে এডজেসেন্ট ভাই-বোন কম্বিনেটর একটি নির্দিষ্ট উপাদানের অবিলম্বে পরে উপস্থিত একটি ভাই-বোন উপাদানে স্টাইল প্রয়োগ করে।
এই উদাহরণে, লেখার রঙ সবুজ হয়ে যায় শুধুমাত্র যখন একটি   ট্যাগের ঠিক পরে একটি  ট্যাগ উপস্থিত হয়।

সাধারণ সহোদর কম্বিনেটর

1/* Subsequent Sibling Combinator */
2br ~ b {
3    color: steelblue;
4}

~ চিহ্ন ব্যবহার করে সাধারণ ভাই-বোন কম্বিনেটর একটি নির্দিষ্ট উপাদানের পরে উপস্থিত সকল ভাই-বোন উপাদানগুলিকে নির্বাচন করে।
এই উদাহরণে,   ট্যাগের পরে প্রদর্শিত সমস্ত  ট্যাগের টেক্সট রঙ নীলের একটি ছায়ায় হবে।

ছদ্ম-ক্লাস

1/* Pseudo Class : ":" */
2a:hover {
3    background-color: lightskyblue;
4}

: ছদ্ম-ক্লাস নির্বাচন করতে ব্যবহার করা হয়।
পসুডো-শ্রেণিসমূহের বিবরণ অন্য একটি নিবন্ধে ব্যাখ্যা করা হবে।

ছদ্ম-মৌলিক উপাদান

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}

:: ছদ্ম-উপাদান নির্বাচন করতে ব্যবহার করা হয়।
পসুডো-উপাদানের বিবরণও অন্য একটি নিবন্ধে ব্যাখ্যা করা হবে।

CSS নির্দিষ্টতা

CSS-এ অগ্রাধিকার বোঝা গুরুত্বপূর্ণ যাতে CSS কীভাবে কাজ করে এবং অপ্রত্যাশিত শৈলীগুলির প্রয়োগ প্রতিরোধ করা যায়। CSS অগ্রাধিকারের মাধ্যমে নির্ধারণ করা হয় যে, একই উপাদানে একাধিক CSS নিয়ম প্রয়োগ হলে কোনটি সবচেয়ে শক্তিশালী হবে। CSS-এর অগ্রাধিকার মূলত নিম্নলিখিত বিষয়গুলির দ্বারা নির্ধারিত হয়।

ইনলাইন শৈলী: HTML এর মধ্যে সরাসরি লেখা শৈলী
ID নির্বাচক ：#id
শ্রেণীর, বৈশিষ্ট্য নির্বাচক, ছদ্ম-শ্রেণী ：.class, [attribute=value], :hover, etc
এলিমেন্ট সিলেক্টরসমূহ ：div, h1, p, etc
ইউনিভার্সাল সিলেক্টর ：*

তালিকায় যত উপরে, অগ্রাধিকার তত বেশি, এবং যত নিচে, অগ্রাধিকার তত কম।

নির্দিষ্টত্ব কীভাবে গণনা করবেন

প্রত্যেক সিলেক্টরের 'ওজন' পরিমাপ করে CSS অগ্রাধিকার গণনা করা হয়। প্রত্যেক সিলেক্টরের ওজন নিম্নরূপ উপস্থাপন করা হয়।

ইনলাইন শৈলী: ইনলাইন শৈলী সবচেয়ে শক্তিশালী এবং সর্বদা অগ্রাধিকার পায়।
ID সিলেক্টর: এক ID সিলেক্টর '100 পয়েন্ট' এর সমান।
ক্লাস, অ্যাট্রিবিউট সিলেক্টরস, ছদ্ম-ক্লাস: এইগুলি '10 পয়েন্ট' এর সমান।
উপাদান সিলেক্টরস, ছদ্ম-উপাদান: এইগুলি '1 পয়েন্ট' এর সমান।

যে নিয়মটির স্কোর সবচেয়ে বেশি, সেটিই প্রয়োগিত হয়।

উদাহরণ:

 1/* ID Selector */
 2#header {
 3    color: blue;
 4}
 5
 6/* Class Selector */
 7.header {
 8    color: red;
 9}
10
11/* Element Selector */
12h1 {
13    color: green;
14}

1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>

এখানে, <h1> ট্যাগে তিনটি ভিন্ন ধরণের শৈলী প্রয়োগ করা হয়েছে:

h1 এলিমেন্ট সিলেক্টর (১ পয়েন্ট)
.header ক্লাস সিলেক্টর (১০ পয়েন্ট)
#header ID সিলেক্টর (১০০ পয়েন্ট)

এই ক্ষেত্রে, যেহেতু ID সিলেক্টরের অগ্রাধিকার সবচেয়ে বেশি, color: blue প্রয়োগিত হয়।

`!important` দিয়ে অগ্রাধিকার ওভাররাইড করা

আপনি যদি একটি শৈলী প্রয়োগ করতে এবং সাধারণ অগ্রাধিকার উপেক্ষা করতে চান তবে !important ব্যবহার করুন। !important এর সবচেয়ে বিপুল প্রভাব আছে সমস্ত নিয়মের উপর, এবং এটি অন্য সবকিছু অমান্য করে।

উদাহরণ:

1#important-header {
2    color: blue;
3}
4
5.important-header {
6    color: red !important;
7}

1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>

এখানে, color: red !important; উল্লেখ করা হয়েছে, তাই color: red অগ্রাধিকার পায়।

ঋণাধিকার এবং অগ্রাধিকার

CSS-এর ক্ষমতা আছে মূল উপাদান থেকে সন্তান উপাদানে শৈলী উত্তরাধিকার করার। উদাহরণস্বরূপ, যেমন color এবং font-family এর মতো বৈশিষ্ট্যগুলি ডিফল্টরূপে উত্তরাধিকার করা হয়। তবে, যদি একটি নির্দিষ্ট সন্তান উপাদানকে সরাসরি স্টাইল করা হয়, তবে সরাসরি প্রয়োগিত শৈলী উত্তরাধিকারকৃত শৈলীর উপর অগ্রাধিকার পায়।

উদাহরণ:

1footer {
2    color: gray;
3}
4
5p {
6    color: black;
7}

1<footer>
2    <p>This paragraph's text will be black.</p>
3    <span>This text will be gray.</span>
4</footer>

এখানে, footer ট্যাগে color: gray; প্রয়োগ করা হয়েছে, তবে p উপাদানের জন্য স্পষ্টভাবে color: black; নির্ধারণ করা হয়েছে, ফলে p উপাদানের লেখাটি কালো রঙে প্রদর্শিত হয়। ইতিমধ্যে, footer থেকে span উপাদান color গুণাবলী উত্তরাধিকারসূত্রে পায় এবং ধূসর রঙে প্রদর্শিত হয়।

CSS ক্যাসকেড এবং অগ্রাধিকার

নাম 'ক্যাসকেডিং স্টাইল শীট (CSS)' নির্দেশ করে যে, স্টাইলগুলো 'ক্যাসকেড' হয়। এর মানে হলো যদি একাধিক স্টাইলশীট বা নিয়ম থাকে, তবে সর্বশেষ নির্ধারিত নিয়মটিই অগ্রাধিকার পাবে। যদি অগ্রাধিকারগুলো একই হয়, তবে পরবর্তীতে লেখা স্টাইল প্রয়োগ করা হয়।

উদাহরণ:

1.text {
2    color: red;
3}
4
5.text {
6    color: blue;
7}

1<p class="text">This text will be blue.</p>

এখানে, color: blue; পরে নির্ধারিত হয়েছে, তাই লেখাটি নীল রঙে প্রদর্শিত হয়।

সারসংক্ষেপ

CSS এর অগ্রাধিকার নির্ধারণ করা হয় নির্দিষ্টতা এবং অন্যান্য অ্যালগরিদমের মাধ্যমে, কিন্তু এখানে আমরা শুধুমাত্র মৌলিক অংশগুলো বিবেচনা করেছি।

মূল নিয়মাবলী নিম্নরূপ:

সবসময় ইনলাইন স্টাইলগুলোর সর্বোচ্চ অগ্রাধিকার থাকে।
ID সিলেক্টরগুলো শক্তিশালী এবং ক্লাস ও ট্যাগের ওপর অগ্রাধিকার পায়।
ক্লাস সিলেক্টর এবং সুডো-ক্লাসগুলো মধ্যম পর্যায়ের অগ্রাধিকার পায়।
ট্যাগ সিলেক্টর এবং সুডো-এলিমেন্টগুলো সর্বনিম্ন পর্যায়ের অগ্রাধিকার পায়।
!important সাধারণ অগ্রাধিকারকে অতিক্রম করে এবং জোরপূর্বক স্টাইল প্রয়োগ করে।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

CSS-এ উত্তরাধিকার

CSS মৌলিক বিষয়গুলো

YouTube Video

প্রিভিউ জন্য HTML/CSS

মূল সিনট্যাক্স

সিলেক্টরগুলো

ইউনিভার্সাল সিলেক্টর

এলেমেন্ট সিলেক্টর

আইডি সিলেক্টর

ক্লাস সিলেক্টর

অ্যাট্রিবিউট সিলেক্টর

কম্বিনেটর

অবনত কম্বিনেটর

শিশু কম্বিনেটর

আসন্ন সহোদর কম্বিনেটর

সাধারণ সহোদর কম্বিনেটর

ছদ্ম-ক্লাস

ছদ্ম-মৌলিক উপাদান

CSS নির্দিষ্টতা

নির্দিষ্টত্ব কীভাবে গণনা করবেন

উদাহরণ:

!important দিয়ে অগ্রাধিকার ওভাররাইড করা

উদাহরণ:

ঋণাধিকার এবং অগ্রাধিকার

উদাহরণ:

CSS ক্যাসকেড এবং অগ্রাধিকার

উদাহরণ:

সারসংক্ষেপ

YouTube Video

`!important` দিয়ে অগ্রাধিকার ওভাররাইড করা