Articles
Pengenalan ke CSS
Pewarisan dalam CSS

Pewarisan dalam CSS

Artikel ini menjelaskan pewarisan dalam CSS.

Anda dapat memeriksa properti yang diwariskan dan yang tidak diwariskan.

YouTube Video

HTML untuk Pratinjau

css-inheritance.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 Inheritance</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-inheritance.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Inheritance</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header><h2>CSS Inheritance</h2></header>
19        <article>
20            <h3>Example of Inheritance</h3>
21            <section>
22                <p>
23                    Example of P Element.<br>
24                    <span>Example of Span Element</span>
25                </p>
26            </section>
27            <div>
28                Example of Div Element
29            </div>
30            <ul>
31                <li>List Item 1</li>
32                <li>List Item 2</li>
33                <li>List Item 3</li>
34            </ul>
35        </article>
36        <article>
37            <h3>all</h3>
38            <section>
39                <h4>Initial</h4>
40                <div class="all-initial">This is an initial element</div>
41            </section>
42            <section>
43                <h4>Inherit</h4>
44                <div class="parent-inherit">
45                    <div class="all-inherit">This is an inherited element</div>
46                </div>
47            </section>
48            <section>
49                <h4>Unset All</h4>
50                <div class="parent-unset">
51                    <div class="all-unset">This is an unset element</div>
52                </div>
53            </section>
54            <section>
55                <h4>all and !important</h4>
56                <div class="important-style">
57                    <div class="all-with-important">
58                        This is an initial element with !important
59                    </div>
60                </div>
61            </section>
62        </article>
63    </main>
64</body>
65</html>

Pewarisan dalam CSS

Dalam CSS, beberapa properti otomatis diwarisi dari elemen induk ke elemen anak. Ini adalah mekanisme yang berguna karena begitu Anda mengatur properti tertentu, elemen anak juga akan memiliki gaya yang sama, menghilangkan kebutuhan untuk mengaturnya berulang kali. Namun, tidak semua properti diwarisi; beberapa properti diwarisi sementara yang lain tidak. Contohnya, color dan font-family diwarisi, tetapi properti model kotak seperti margin dan padding tidak.

Properti yang Diwarisi

Properti yang dapat diwarisi terutama yang terkait dengan teks dan font.

Properti yang umumnya diwarisi

  1. color: Warna Teks
1body {
2    color: black;
3}
  • Dalam kasus ini, semua elemen anak dalam body akan memiliki warna teks hitam.
  1. font-family: Jenis Font
1body {
2    font-family: "Times New Roman", cursive;
3}
  • Semua elemen anak menggunakan font Arial.
  1. font-size: Ukuran Teks
1body {
2    font-size: 16px;
3}
  • Semua teks dalam body akan berukuran 16px secara default.
  1. line-height: Spasi Garis
1p {
2    line-height: 1.5;
3}
  • Teks dalam elemen <p> akan ditampilkan dengan tinggi garis 1,5 kali, mempengaruhi elemen anaknya juga.
  1. text-align: Perataan Teks
1div {
2    text-align: center;
3}
  • Teks dan elemen sebaris dalam elemen div ditampilkan di tengah.
  1. visibility: Visibilitas Elemen
1div {
2    visibility: hidden;
3}
  • visibility adalah properti yang mengontrol visibilitas suatu elemen. Ketika disetel ke tersembunyi, elemen menjadi tidak terlihat.
  • Dalam hal ini, elemen anak di dalam div juga akan tersembunyi.
  1. list-style: Gaya Daftar (penanda daftar untuk <ul> dan <ol>)
1ul {
2    list-style: square;
3}
  • Dalam hal ini, item daftar di dalam tag ul akan ditampilkan dengan penanda persegi.

Contoh:

Properti yang Tidak Diwarisi

Properti yang terkait dengan tata letak dan model kotak biasanya tidak diwariskan. Properti ini perlu disetel secara individual untuk setiap elemen.

Properti Umum yang Tidak Diwariskan

  1. margin, padding: Marjin luar dan dalam dari sebuah elemen
1div {
2    margin: 10px;
3    padding: 20px;
4}
  • Bahkan jika Anda menetapkan margin luar atau dalam untuk elemen div, hal itu tidak memengaruhi elemen anaknya.
  1. border: Batas elemen
1div {
2    border: 1px solid black;
3}
  • Bahkan jika batas ditetapkan pada elemen induk, hal itu tidak memengaruhi elemen anak.
  1. width, height: Lebar dan tinggi elemen
1div {
2    width: 100px;
3    height: 50px;
4}
  • Lebar dan tinggi elemen induk tidak secara otomatis memengaruhi elemen anak.
  1. background: Gaya latar belakang
1body {
2    background-color: lightblue;
3}
  • Warna latar belakang yang diatur pada body tidak langsung memengaruhi elemen anak. Namun, jika elemen anak memiliki latar belakang transparan, warna latar belakang elemen induk mungkin terlihat melaluinya.

Contoh:

Kontrol pewarisan

Pewarisan dapat dikendalikan menggunakan kata kunci inherit, initial, atau unset.

  • Jika Anda ingin mengaktifkan pewarisan: Anda dapat secara eksplisit memaksa pewarisan dengan menggunakan kata kunci inherit.
1div {
2    color: inherit;  /* Inherit the color from its parent element */
3}
  • Jika Anda tidak ingin mengaktifkan pewarisan: Anda dapat mengatur ulang properti ke nilai awalnya menggunakan kata kunci initial atau unset.
1p {
2    color: initial;  /* Reset the color to its initial/default value */
3}

Contoh:

Properti all

Properti all adalah properti yang dapat mengatur ulang hampir semua properti CSS, termasuk yang dapat diwariskan, pada sebuah elemen tertentu sekaligus. Secara khusus, Anda dapat menggunakan tiga kata kunci berikut untuk mengatur properti dari suatu elemen:.

  • initial: Mengatur ulang semua properti ke nilai awalnya.
  • inherit: Mewarisi semua properti dari elemen induk.
  • unset: Jika properti dapat diwariskan maka akan diwariskan, jika tidak maka diatur ulang ke nilai awalnya.

all sangat berguna ketika Anda ingin mengatur ulang atau mengatur banyak properti sekaligus, daripada mengatur setiap properti secara individual.

Contoh pengaturan ulang ke nilai awal 

1.all-initial {
2    all: initial;
3    background-color: lightskyblue;
4}

  • Ketika Anda ingin mengatur ulang semua gaya yang sebelumnya telah ditetapkan untuk sebuah elemen tertentu dan mengembalikannya ke keadaan awalnya, gunakan all: initial seperti ini.

  • Dalam contoh ini, semua properti elemen <div> dengan kelas .all-initial diatur ulang ke nilai awal default browser.

Contoh Pewarisan 

 1.parent-inherit {
 2    color: blue;
 3    font-size: 20px;
 4    border: 1px solid blue;
 5}
 6
 7.all-inherit {
 8    all: inherit;
 9    background-color: lightskyblue;
10}
  • Menggunakan all: inherit membuat semua properti diwarisi dari elemen induk.
  • Dalam contoh ini, elemen-elemen dengan kelas .all-inherit mewarisi semua properti, seperti color dan font-size, dari elemen induk.

Contoh Menentukan Nilai Awal atau Pewarisan Berdasarkan Kondisi 

 1.parent-unset {
 2    color: blue;
 3}
 4
 5.all-unset {
 6    font-weight: bold;
 7}
 8
 9.all-unset {
10    all: unset;
11}
  • Menggunakan all: unset menyebabkan properti diwariskan jika memungkinkan; jika tidak, properti akan diatur ulang ke nilai awalnya.
  • Dalam kasus ini, color diwariskan, sedangkan font-weight diatur ulang ke nilai awalnya, biasanya normal.

Hubungan dengan Spesifisitas (Prioritas) 

1.all-with-important {
2    color: red !important;
3    background-color: lightskyblue;
4}
5
6.all-with-important {
7    all: initial;
8}

  • Properti all adalah mekanisme reset yang kuat, tetapi dipengaruhi oleh spesifisitas CSS. Jika sebuah elemen tertentu memiliki spesifikasi gaya yang kuat, properti all mungkin tidak dapat menggantikan gaya tersebut. Sebagai contoh, properti yang ditentukan dengan !important tidak dapat terpengaruh.

  • Dalam contoh ini, meskipun Anda mencoba mengatur ulang gaya dengan all: initial, properti color tidak akan diatur ulang karena spesifikasi color: red !important.

Elemen tingkat blok dan elemen sebaris

Elemen tingkat blok

  • Contoh: <div>, <p>, <h1> 〜 <h6>, <ul>, <li>, <section>
  • Karakteristik:
    • Mereka selalu muncul pada baris baru dan meluas untuk mengisi lebar penuh elemen induknya.
    • Lebar (width) dan tinggi (height) dapat diatur secara bebas.
    • Margin (margin) dan padding (padding) dapat diatur ke semua arah dan akan memengaruhi semua sisi.
1div {
2    width: 80%;  /* Set the width to 80% of its parent element's width */
3    padding: 20px;  /* Add a padding of 20 pixels on all sides */
4    margin: 10px 0; /* Add a margin of 10 pixels top and bottom, 0 pixels left and right */
5}

Elemen sebaris

  • Contoh: <span>, <a>, <strong>, <em>, <img>, <label>
  • Karakteristik:
    • Elemen-elemen ini muncul di samping elemen sebaris (inline) lainnya pada baris yang sama.
    • Lebar (width) dan tinggi (height) tidak dapat diatur secara langsung (kecuali jika display: block diterapkan).
    • Mengatur margin (margin) atau padding (padding) secara vertikal memiliki efek terbatas (margin dan padding horizontal efektif).
1a {
2    padding: 5px;  /* Padding for inline elements */
3    margin-right: 10px;  /* Set margin to the right */
4    color: blue;
5}

Perbedaan antara elemen tingkat blok dan elemen sebaris

  • Pengaturan lebar dan tinggi:

    • Elemen tingkat blok: Lebar dan tinggi dapat diatur.
    • Elemen sebaris (inline): Lebar dan tinggi umumnya tidak dapat diatur.

  • Margin dan Padding:

    • Elemen tingkat blok: Margin dan padding diterapkan ke semua sisi.
    • Elemen sebaris (inline): Margin dan padding di bagian atas dan bawah tidak efektif atau memiliki efek terbatas.

  • Metode Tata Letak:

    • Elemen tingkat blok: Secara otomatis ditempatkan pada baris baru.
    • Elemen sebaris (inline): Disejajarkan pada baris yang sama dengan elemen sebaris lainnya.

Seperti yang dapat Anda lihat, ada perbedaan dalam cara penerapan gaya CSS pada elemen blok-level dan elemen inline. Pada elemen blok-level, properti CSS terkait tata letak seperti lebar, tinggi, margin, dan padding diterapkan sesuai yang ditentukan. Di sisi lain, untuk elemen sebaris (inline), pengaturan properti CSS yang terkait dengan tata letak seperti lebar, tinggi, margin, atau padding mungkin tidak diterapkan atau diterapkan secara terbatas.

Penanganan CSS untuk elemen tingkat blok dan elemen sebaris 

1span {
2    display: block;  /* Display the span element as a block-level element */
3    width: 100px;
4    height: 50px;
5}

Namun, dengan mengatur properti display menjadi block atau inline-block, Anda dapat menyesuaikan gaya seperti lebar dan tinggi untuk elemen sebaris seolah-olah mereka adalah elemen blok.

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

YouTube Video

Dasar-dasar CSSRincian Selektor Atribut dalam CSS