CSS Selector

by

Sintaks CSS erat dengan penggunaan CSS Selector. Berikut beberapa CSS selector yang umum digunakan.

Element Selector

Pada modul sebelumnya sudah digunakan untuk element <section>. Element selector adalah cara kita mengakses element-element HTML seperti <div>, <h1> dan seterusnya. Contoh:

h1{
  color: red;
}

<h1>Ini akan berwarna merah</h1>
<p>lorem ipsum</p>

Class Selector

Kita bisa membuat class tertentu dalam html element, yang kemudian bisa di select melalui CSS selector. Contoh class blog-post. CSS selector menggunakan tanda titik (.).

.blog-post{
  color: red;
}

<h1 class=blog-post>Ini akan berwarna merah</h1>
<p class=blog-post>Lorem ipsum berwarna merah juga</p>

ID Selector

Untuk mengakses element html dengan id tertentu misalnya h1 dengan id main-title. CSS selector menggunakan #.

#blog-title{
  color: red;
}

<h1 id=blog-title>Ini akan berwarna merah</h1>
<p>Lorem ipsum</p>

Attributes Selector

Untuk mengakses element dengan attribute tertentu, misalnya disabled.

[disabled]{
  color: red;
}

<button disabled>Merah</button>

Setelah kita pelajari contoh diatas, mari implementasikan pada file latihan dari modul sebelumnya.

index.html akan menampilkan kurang lebih seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar CSS Dasar</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 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>
#product-title{
    background-color: red;
}

.section-title{
    color: teal;
}

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

Leave a Comment