Articles
Pengenalan ke CSS
Dasar-dasar CSS

Dasar-dasar CSS

Artikel ini menjelaskan dasar-dasar CSS.

Anda dapat mempelajari tentang selektor CSS, kombinator, dan spesifisitas.

YouTube Video

HTML/CSS untuk Pratinjau

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>

Sintaks Dasar 

1selector {
2    property: value;
3}

Struktur dasar CSS terdiri dari selector, property, dan value. Setiap pasangan properti dan nilai diikuti oleh tanda titik koma.

  • selector menentukan elemen HTML mana yang akan diterapkan gaya. Dalam contoh ini, gaya diterapkan pada semua elemen <header>.
  • property menentukan properti gaya yang akan diubah, seperti warna atau ukuran font. Padding dan color adalah properti dalam contoh ini.
  • value adalah nilai yang diberikan kepada properti. Misalnya, untuk warna, bisa berupa white atau #9cf, dan untuk ukuran margin, bisa berupa 20px.

Selector

Selector CSS adalah pola untuk memilih elemen HTML. Dengan menggunakan selector, Anda bisa menerapkan gaya pada elemen tertentu atau kelompok elemen.

Selector Universal 

1/* Universal Selector : "*" */
2* {
3    font-family:'Courier New', Courier, monospace;
4}
  • * adalah selector universal yang diterapkan untuk semua elemen.
  • Dalam contoh ini, font untuk semua elemen diubah.

Selector Elemen 

1/* Element Selector */
2strong {
3    color: red;
4}
  • Selektor elemen adalah selektor yang diterapkan pada tag HTML tertentu dengan menuliskan nama tag HTML.
  • Dalam contoh ini, warna teks elemen <strong> diubah menjadi merah.

Selector ID 

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}
  • # adalah selector ID yang digunakan untuk memilih elemen berdasarkan ID.
  • ID bersifat unik, sehingga hanya dapat ada satu elemen dengan ID yang sama di satu halaman.

Selector Kelas 

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}
  • . adalah selector kelas yang digunakan untuk memilih elemen berdasarkan kelas.
  • Tambahkan atribut kelas pada elemen HTML untuk menerapkan gaya ke elemen yang termasuk dalam kelas tersebut.

Selector Atribut 

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}
  • [href="index.html"] adalah selektor atribut yang memilih elemen dengan atribut tertentu.
  • Dalam contoh ini, teks dari elemen <a> dengan nilai atribut href index.html diatur menjadi tebal.

Kombinator

Kombinator digunakan untuk menggabungkan beberapa selektor untuk memilih elemen yang memiliki hubungan tertentu. Sementara selektor memilih elemen secara individual, kombinator berperan dalam mendefinisikan hubungan struktural antar elemen.

Kombinator keturunan 

1/* Descendant Combinator : " " */
2span strong {
3    text-decoration: underline;
4}
  • Kombinator keturunan menerapkan gaya ke semua elemen yang ditentukan di dalam elemen tertentu.
  • Dalam contoh ini, garis bawah diterapkan pada elemen <strong> di dalam elemen <span>.

Kombinator anak 

1/* Child Combinator : ">" */
2span > em {
3    color: blue;
4}
  • Tanda > antara span dan em digunakan sebagai kombinator anak. Dalam contoh ini, gaya hanya diterapkan pada elemen <em> yang merupakan anak langsung dari elemen <span>. Dalam contoh baris ketiga, karena ada tag <s> antara tag <span> dan <em>, gaya tidak diterapkan.

Kombinator saudara seadjacent 

1/* Next Sibling combinator */
2br + b {
3    color: green;
4}
  • Pengombinasi saudara kandung yang berdekatan menggunakan tanda + menerapkan gaya pada elemen saudara kandung yang muncul segera setelah elemen tertentu.
  • Dalam contoh ini, warna teks menjadi hijau hanya jika tag <b> muncul segera setelah tag <br>.

Kombinator saudara umum 

1/* Subsequent Sibling Combinator */
2br ~ b {
3    color: steelblue;
4}
  • Pengombinasi saudara kandung umum menggunakan tanda ~ memilih semua elemen saudara kandung yang muncul setelah elemen tertentu.
  • Dalam contoh ini, warna teks dari semua tag <b> yang muncul setelah tag <br> akan berwarna biru muda.

Pseudokelas 

1/* Pseudo Class : ":" */
2a:hover {
3    background-color: lightskyblue;
4}
  • : digunakan untuk memilih pseudo-classes.
  • Detail tentang pseudo-class akan dijelaskan dalam artikel lain.

Pseudo-elemen 

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}
  • :: digunakan untuk memilih pseudo-elements.
  • Detail tentang pseudo-element juga akan dijelaskan dalam artikel lain.

Spesifisitas CSS

Prioritas dalam CSS sangat penting untuk memahami cara kerja CSS dan mencegah penerapan gaya yang tidak terduga. Prioritas CSS menentukan aturan mana yang paling kuat ketika beberapa aturan CSS diterapkan pada elemen yang sama. Prioritas CSS terutama ditentukan oleh faktor-faktor berikut.

  1. Gaya inline: Gaya yang ditulis langsung di dalam HTML
  2. Selektor ID ：#id
  3. Kelas, Selektor Atribut, Pseudo-kelas ：.class, [attribute=value], :hover, etc
  4. Selektor Elemen ：div, h1, p, etc
  5. Selektor Universal ：*

Semakin tinggi dalam daftar, semakin tinggi prioritasnya, dan semakin rendah, semakin rendah prioritasnya.

Cara Menghitung Spesifisitas

Prioritas CSS dihitung dengan memperhitungkan 'bobot' dari setiap selektor. Bobot dari setiap selektor diwakili sebagai berikut.

  1. Gaya inline: Gaya inline adalah yang paling kuat dan selalu diprioritaskan.
  2. Selektor ID: Satu selektor ID setara dengan '100 poin'.
  3. Kelas, selektor atribut, pseudo-classes: Ini setara dengan '10 poin'.
  4. Selektor elemen, pseudo-elements: Ini setara dengan '1 poin'.

Aturan dengan skor tertinggi diterapkan.

Contoh: 

 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>

Di sini, tag <h1> memiliki tiga gaya berbeda yang diterapkan:

  • selektor elemen h1 (1 poin)
  • selektor kelas .header (10 poin)
  • selektor ID #header (100 poin)

Dalam kasus ini, karena selektor ID memiliki prioritas tertinggi, color: blue diterapkan.

Mengesampingkan prioritas dengan !important

Gunakan !important jika Anda ingin memaksa gaya dan mengabaikan prioritas biasa. !important memiliki pengaruh terkuat atas semua aturan, mengesampingkan segala sesuatu yang lain.

Contoh: 

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>
  • Di sini, color: red !important; ditentukan, sehingga color: red menjadi prioritas utama.

Pewarisan dan Prioritas

CSS memiliki kemampuan untuk mewarisi gaya dari elemen induk ke elemen anak. Misalnya, properti seperti color dan font-family diwarisi secara default. Namun, jika elemen anak tertentu diberi gaya secara langsung, gaya yang diterapkan langsung lebih diutamakan daripada gaya yang diwarisi.

Contoh: 

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>
  • Di sini, color: gray; diterapkan pada tag footer, tetapi karena color: black; secara eksplisit ditentukan untuk elemen p, teks elemen p ditampilkan dalam warna hitam. Sementara itu, elemen span mewarisi properti color dari footer dan tampil berwarna abu-abu.

Pencascadaan dan Prioritas CSS

Seperti yang terlihat dari namanya 'Cascading Style Sheets (CSS)', gaya 'berjenjang'. Ini berarti bahwa jika ada beberapa stylesheet atau aturan, aturan terakhir yang didefinisikan memiliki prioritas. Jika prioritasnya sama, gaya yang ditulis belakangan yang diterapkan.

Contoh: 

1.text {
2    color: red;
3}
4
5.text {
6    color: blue;
7}
1<p class="text">This text will be blue.</p>
  • Di sini, color: blue; didefinisikan belakangan, sehingga teks ditampilkan dalam warna biru.

Ringkasan

Prioritas CSS ditentukan dengan menggunakan algoritma seperti spesifisitas, tetapi di sini kita hanya mempertimbangkan bagian dasarnya.

Aturan dasar adalah sebagai berikut:

  • Gaya inline selalu memiliki prioritas tertinggi.
  • Selector ID memiliki kekuatan dan memiliki prioritas dibandingkan kelas dan tag.
  • Selector kelas dan pseudo-class memiliki tingkat prioritas menengah.
  • Selector tag dan pseudo-elemen memiliki tingkat prioritas terendah.
  • !important mengesampingkan prioritas normal dan memaksakan penerapan gaya.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Pewarisan dalam CSS