Selektor dan Properti : Pemrograman CSS Dasar

CSS atau Cascading Style Sheets adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan desain visual dari halaman web. Dalam pemrograman CSS, ada dua hal yang perlu dikuasai, yaitu selektor dan properti. Selektor digunakan untuk menentukan elemen HTML mana yang akan diubah tampilannya, sedangkan properti digunakan untuk mengatur tampilan dan desain visual dari elemen HTML tersebut.

Dalam artikel ini, kita akan membahas pemrograman CSS dasar, khususnya tentang selektor dan properti. Mari kita mulai belajar!

Selektor CSS

Salah satu konsep dasar dalam pemrograman CSS adalah selektor. Selektor digunakan untuk menentukan elemen HTML mana yang akan diubah tampilannya. Ada beberapa jenis selektor CSS, antara lain:

Selektor Elemen

Selektor elemen adalah jenis selektor CSS yang paling sederhana dan paling sering digunakan. Selektor ini berdasarkan pada nama tag elemen HTML. Berikut ini adalah contoh penggunaan selektor elemen:

p {
color: blue;
}

Contoh di atas akan mengubah warna teks pada semua elemen <p> menjadi biru.

Selektor Kelas

Selektor kelas digunakan untuk memilih elemen HTML berdasarkan nama kelas yang telah ditentukan. Berikut ini adalah contoh penggunaan selektor kelas:

judul {
font-weight: bold;
}

Contoh di atas akan membuat teks pada elemen yang memiliki kelas "judul" menjadi tebal (bold).

Selektor ID

Selektor ID digunakan untuk memilih elemen HTML berdasarkan ID yang telah ditentukan. Berikut ini adalah contoh penggunaan selektor ID:

#header {
background-color: grey;
}

Contoh di atas akan mengubah warna latar belakang dari elemen yang memiliki ID "header" menjadi abu-abu.

Selektor Kombinasi

Selektor kombinasi digunakan untuk memilih elemen HTML dengan kombinasi selektor. Berikut ini adalah contoh penggunaan selektor kombinasi:

div p {
font-size: 16px;
}

Contoh di atas akan mengubah ukuran font pada semua elemen <p> yang berada di dalam elemen <div>.

Properti CSS

Properti CSS digunakan untuk mengatur tampilan dan desain visual dari elemen HTML. Ada banyak properti CSS yang dapat digunakan, antara lain:

Background-color: digunakan untuk mengatur warna latar belakang elemen HTML.
Color: digunakan untuk mengatur warna teks dari elemen HTML.
Font-size: digunakan untuk mengatur ukuran font dari teks pada elemen HTML.
Padding: digunakan untuk mengatur jarak antara batas elemen HTML dan konten di dalamnya.
Margin: digunakan untuk mengatur jarak antara batas elemen HTML dengan elemen lain di sekitarnya.

Contoh Implementasi

Berikut ini adalah contoh implementasi pemrograman CSS dasar untuk mengubah tampilan dari sebuah halaman web:

HTML:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Implementasi Pemrograman CSS Dasar</title>

</head>

<body>

<h1 class="judul">Belajar Pemrograman CSS Dasar</h1>

<p>Mari belajar tentang selektor dan properti dalam pemrograman CSS!</p>

<p>Ini adalah contoh box dengan pemrograman CSS dasar.</p>

</div>

</body>

</html>

CSS:

.judul {

color: blue;

}

.box {

background-color: grey;

padding: 20px;

margin: 10px;

}

Dalam contoh di atas, kita menggunakan selektor kelas (.judul) untuk mengubah warna teks pada elemen h1 menjadi biru. Selain itu, kita juga menggunakan selektor kelas (.box) untuk mengatur warna latar belakang, jarak antara batas dan konten, serta jarak antara elemen tersebut dengan elemen lain di sekitarnya.