Memahami CSS Inheritance

by

Inheritance adalah sebuah element dapat menggunakan styling yang digunakan oleh parent element.

Sebagai contoh kasus, <h1> pada section kedua akan menggunakan font yang diinherit dari parent, dalam hal ini font yang diset di <body>

Tambahkan font baru dengan menggunakan Google font (dibahas di modul https://skillplus.web.id/menambahkan-style-dan-google-font/).

Pada tutorial akan digunakan font Nunito.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SkillPlus - Tutorial Tekno</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <section id="product-title">
            <h1 id="plans">Tutorial Teknologi Informatika di SkillPlus</h1>
        </section>
        <section>
            <h1 class="section-title">Pilih paket langganan</h1>
        </section>        
    </main>
</body>
</html>

Untuk memperoleh hasil agar <h1> pada section kedua menggunakan font yang diatur pada <body> ada dua pendekatan:

Pendekatan pertama, dengan menambahkan rule inheritance pada class yang digunakan <h1> section kedua yaitu class .section-title.

Pendekatan ini kurang efisien, karena bila ada <h1> lainnya yang ingin menggunakan font sesuai <body> harus di deklarasikan inherit.

body{
    font-family: 'Nunito', sans-serif;
}

#product-title{
    background-color: red;
}

.section-title{
    color: teal;
    font-family: inherit;
}

h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}

Pendekatan kedua, menggunakan combinator agar css selector lebih spesifik menunjukan ke <h1> section pertama.

Note: topik combinator akan dibahasi lebih dalam di modul selanjutnya. https://skillplus.web.id/css-combinator/

Jadi hanya <h1> yang berada dibawah class #product-title yang akan menggunakan font-family Roboto, element lainya akan menggunakan font yang diinherit dari <body>

body{
    font-family: 'Nunito', sans-serif;
}

#product-title{
    background-color: red;
}

.section-title{
    color: teal;
}

#product-title h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}
Sharing is caring:

Leave a Comment