Articles
Panimula sa CSS
Mga Batayan ng CSS

Mga Batayan ng CSS

Ipinaliliwanag ng artikulong ito ang mga batayan ng CSS.

Maaari mong matutunan ang tungkol sa mga CSS selector, combinator, at specificity.

YouTube Video

HTML/CSS para sa Pag-preview

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>

Pangunahing Syntax 

1selector {
2    property: value;
3}

Ang pangunahing istraktura ng CSS ay binubuo ng selector, property, at value. Ang bawat pares ng mga property at value ay sinusundan ng semicolon.

  • Ang selector ay nagsasaad kung saang HTML element ilalapat ang estilo. Sa halimbawa na ito, ang mga estilo ay inilalapat sa lahat ng <header> na elemento.
  • Ang property ay nagtutukoy ng estilo ng ari-arian na dapat baguhin, tulad ng kulay o sukat ng font. Ang Padding at color ang mga property sa halimbawang ito.
  • Ang value ay ang halaga na itinakda sa ari-arian. Halimbawa, para sa kulay, maaari itong white o #9cf, at para sa sukat ng margin, maaari itong 20px.

Mga Selektor

Ang mga CSS selector ay mga pattern para sa pagpili ng mga HTML na elemento. Sa pamamagitan ng paggamit ng mga selector, maaari kang maglapat ng mga estilo sa mga tiyak na elemento o mga grupo ng mga elemento.

Universal Selector 

1/* Universal Selector : "*" */
2* {
3    font-family:'Courier New', Courier, monospace;
4}
  • Ang * ay isang pandaigdigang selector na nalalapat sa lahat ng mga elemento.
  • Sa halimbawang ito, ang font para sa lahat ng mga elemento ay binago.

Element Selector 

1/* Element Selector */
2strong {
3    color: red;
4}
  • Ang element selector ay isang selector na inilalapat sa tiyak na mga HTML tag sa pamamagitan ng pagsusulat ng pangalan ng HTML tag.
  • Sa halimbawang ito, ang kulay ng teksto ng <strong> na elemento ay binago sa pula.

ID Tagapili 

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}
  • Ang # ay isang ID selector na ginagamit para pumili ng mga elemento ayon sa ID.
  • Ang mga ID ay natatangi, kaya maaaring magkaroon lamang ng isang elemento na may parehong ID sa isang pahina.

Klase Tagapili 

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}
  • Ang . ay isang class selector na ginagamit para pumili ng mga elemento ayon sa klase.
  • Magdagdag ng class attribute sa mga HTML element para maglapat ng istilo sa mga elementong kabilang sa klaseng iyon.

Katangian Tagapili 

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}
  • Ang [href="index.html"] ay isang attribute selector na pumipili ng mga elemento na may tiyak na attribute.
  • Sa halimbawang ito, ang teksto ng <a> na elemento na may href na katangian na halaga na index.html ay nakatakda sa makapal.

Combinator

Ginagamit ang mga combinator upang pagsamahin ang maramihang selector upang pumili ng mga elementong may tiyak na relasyon. Habang ang isang selector ay pumipili ng mga elemento nang isa-isa, ang isang combinator ay gumaganap ng papel sa pagtukoy ng mga istruktural na relasyon sa pagitan ng mga elemento.

Descendant combinator 

1/* Descendant Combinator : " " */
2span strong {
3    text-decoration: underline;
4}
  • Ang descendant combinator ay nag-aaplay ng estilo sa lahat ng tiyak na elemento sa loob ng isang partikular na elemento.
  • Sa halimbawang ito, isang salungguhit ang inilalapat sa <strong> na mga elemento sa loob ng <span> na mga elemento.

Child combinator 

1/* Child Combinator : ">" */
2span > em {
3    color: blue;
4}
  • Ang tanda na > sa pagitan ng span at em ay ginagamit bilang child combinator. Sa halimbawang ito, ang mga estilo ay inilalapat lamang sa <em> na mga elemento na direktang anak ng <span> na mga elemento. Sa ikatlong linya ng halimbawa, dahil mayroong <s> na tag sa pagitan ng <span> at <em> na mga tag, ang estilo ay hindi inilalapat.

Adjacent sibling combinator 

1/* Next Sibling combinator */
2br + b {
3    color: green;
4}
  • Ang adjacent sibling combinator na gumagamit ng + na tanda ay nag-aaplay ng mga estilo sa isang sibling na elemento na lumilitaw kaagad pagkatapos ng isang tiyak na elemento.
  • Sa halimbawang ito, ang kulay ng teksto ay nagiging berde lamang kung ang isang <b> na tag ay lumitaw kaagad pagkatapos ng isang <br> na tag.

General sibling combinator 

1/* Subsequent Sibling Combinator */
2br ~ b {
3    color: steelblue;
4}
  • Ang general sibling combinator na gumagamit ng ~ na tanda ay pumipili ng lahat ng mga sibling na elemento na lumilitaw pagkatapos ng isang tiyak na elemento.
  • Sa halimbawa na ito, ang kulay ng teksto ng lahat ng <b> na mga tag na lumalabas pagkatapos ng isang <br> na tag ay magiging asul.

Mga Pseudo-class 

1/* Pseudo Class : ":" */
2a:hover {
3    background-color: lightskyblue;
4}
  • Ang : ay ginagamit upang pumili ng mga pseudo-class.
  • Ang mga detalye tungkol sa mga pseudo-class ay ipapaliwanag sa ibang artikulo.

Mga Pseudo-elemento 

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}
  • Ang :: ay ginagamit upang pumili ng mga pseudo-element.
  • Ang mga detalye tungkol sa mga pseudo-element ay ipapaliwanag din sa ibang artikulo.

CSS Specificity

Ang preperensya sa CSS ay mahalaga para maunawaan kung paano gumagana ang CSS at maiwasan ang mga hindi inaasahang aplikasyon ng estilo. Ang CSS priority ang tumutukoy kung alin sa mga tuntunin ang pinakamakapangyarihan kapag maraming CSS rule ang inilapat sa parehong elemento. Ang prioridad ng CSS ay pangunahing natutukoy ng mga sumusunod na salik.

  1. Inline styles: Mga estilo na isinusulat nang direkta sa loob ng HTML
  2. ID Selectors ：#id
  3. Classes, Attribute Selectors, Pseudo-classes ：.class, [attribute=value], :hover, etc
  4. Element Selectors ：div, h1, p, etc
  5. Universal Selector ：*

Ang mas mataas sa listahan, mas mataas ang prioridad, at ang mas mababa, mas mababa ang prioridad.

Paano Kalkulahin ang Specificity

Ang prioridad ng CSS ay kinakalkula sa pamamagitan ng pagkilala sa 'bigat' ng bawat selektor. Ang bigat ng bawat selektor ay kinakatawan sa mga sumusunod.

  1. Inline styles: Ang inline styles ang pinaka-makapangyarihan at palaging may prioridad.
  2. ID selectors: Isang ID selector ay katumbas ng '100 puntos'.
  3. Class, attribute selectors, pseudo-classes: Ang mga ito ay katumbas ng '10 puntos'.
  4. Element selectors, pseudo-elements: Ang mga ito ay katumbas ng '1 punto'.

Ang tuntunin na may pinakamataas na iskor ang ikinakapit.

Halimbawa: 

 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>

Narito, ang <h1> tag ay may tatlong iba't ibang estilo na inilapat:

  • h1 na elemento na selektor (1 punto)
  • .header na klase na selektor (10 puntos)
  • #header ID na selektor (100 puntos)

Sa kasong ito, dahil ang ID selector ang may pinakamataas na prioridad, ang color: blue ang ikinakapit.

Pagbabago ng prioridad gamit ang !important

Gamitin ang !important kung nais mong pilitin ang isang estilo at balewalain ang karaniwang mga prioridad. Ang !important ang may pinakamakapangyarihang impluwensya sa lahat ng tuntunin, nilalampasan ang iba pa.

Halimbawa: 

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>
  • Dito, ang color: red !important; ay itinakda, kaya ang color: red ang mananaig.

Pamana at Priyoridad

Ang CSS ay may kakayahang manahin ang mga estilo mula sa mga parent na elemento patungo sa mga child na elemento. Halimbawa, ang mga katangiang tulad ng color at font-family ay natural na minamana. Gayunpaman, kung ang isang partikular na child na elemento ay direktang napestihan, ang direktang ipinatupad na estilo ang nangingibabaw sa mga namamanang estilo.

Halimbawa: 

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>
  • Dito, ang color: gray; ay inilalapat sa footer na tag, ngunit dahil ang color: black; ay hayagang tinukoy para sa p na elemento, ang teksto ng p na elemento ay ipinapakita sa itim. Samantala, ang span na elemento ay nagmamana ng color na property mula sa footer at lumilitaw sa kulay abong kulay.

Pagkakasunud-sunod at Priyoridad sa CSS

Tulad ng ipina-pahiwatig ng pangalang 'Cascading Style Sheets (CSS)', ang mga estilo ay 'nagtutuloy-tuloy'. Ibig sabihin nito, kung mayroong maraming stylesheet o mga patakaran, ang huling nailarawang patakaran ang may pangunahing tungkulin. Kung magkatulad ang mga prayoridad, ang estilo na isinulat nang mas bago ang ilalapat.

Halimbawa: 

1.text {
2    color: red;
3}
4
5.text {
6    color: blue;
7}
1<p class="text">This text will be blue.</p>
  • Dito, color: blue; ay nailarawan nang mas huli, kaya't ang teksto ay ipinapakita sa asul.

Buod

Ang prayoridad ng CSS ay tinutukoy gamit ang mga algorithm tulad ng specificity, ngunit dito ay isinasaalang-alang lamang natin ang mga pangunahing bahagi.

Ang mga pangunahing tuntunin ay ang mga sumusunod:

  • Ang mga Inline style ay laging may pinakamataas na prayoridad.
  • Ang mga ID selector ay makapangyarihan at may pangunahing tungkulin sa mga klase at tag.
  • Ang mga Class selector at mga pseudo-class ay may katamtamang antas ng prayoridad.
  • Ang mga Tag selector at mga pseudo-element ay may pinakamababang antas ng prayoridad.
  • Ang !important ay humahadlang sa normal na prayoridad at sapilitang inilalapat ang estilo.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Pamana sa CSS