Selektor CSS: Tag, Class, ID, Universal

1. Selektor CSS: Tag, Class, ID, Universal

Selektor CSS adalah bagian dari kode yang digunakan untuk memilih elemen-elemen HTML yang ingin kita beri gaya. Memahami cara kerja selektor sangat penting dalam menulis CSS yang efisien dan efektif. Ada berbagai jenis selektor yang bisa digunakan, mulai dari selektor berdasarkan tag HTML, kelas (class), ID, hingga selector universal yang dapat memilih semua elemen di halaman.

Ada beberapa jenis selektor CSS yang sering digunakan, antara lain:

• Selektor Tag (Element Selector): Memilih elemen HTML berdasarkan nama tag-nya.

• Selektor Kelas (Class Selector): Memilih elemen berdasarkan kelas yang diterapkan.

• Selektor ID (ID Selector): Memilih elemen berdasarkan ID yang unik.

• Selektor Universal: Memilih semua elemen dalam dokumen HTML.

Contoh selektor:

• h1: memilih semua elemen <h1>.

• .class-name: memilih semua elemen dengan kelas "class-name".

• #id-name: memilih elemen dengan ID "id-name".

2. Properti dan Nilai di CSS: Cara Kerjanya

Properti dan nilai di CSS adalah elemen dasar dalam mendesain tampilan halaman web. Properti merujuk pada aspek yang ingin diubah, seperti warna teks atau ukuran font, sementara nilai adalah nilai yang diterapkan pada properti tersebut. Setiap deklarasi di CSS terdiri dari properti dan nilai yang dipisahkan dengan tanda titik dua (:).

Contoh format dasar deklarasi CSS:

selector {
    property: value;
}

Pada contoh di atas, selector memilih elemen yang akan diberikan gaya, property adalah elemen gaya yang ingin diterapkan, dan value adalah nilai yang diterapkan pada properti tersebut.

3. Format Dasar CSS

Format dasar sebuah aturan CSS adalah sebagai berikut:

selector {
    property: value;
}

Dalam aturan CSS, setiap deklarasi dipisahkan dengan tanda titik koma (;), dan seluruh deklarasi diletakkan di dalam tanda kurung kurawal ({}). Properti dan nilai dipisahkan oleh tanda titik dua (:).

Contoh CSS yang lengkap:

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Pada contoh di atas:

• Selector: h1 (semua elemen <h1>).

• Deklarasi: Tiga deklarasi diterapkan pada elemen <h1>:

  • color: blue; - Mengatur warna teks menjadi biru.

  • font-size: 24px; Mengatur ukuran font menjadi 24 piksel.

  • text-align: center; Mengatur teks agar berada di tengah halaman.

4. Mengatur Warna dan Background di CSS

Di CSS, Anda dapat mengatur warna teks, latar belakang, dan elemen lainnya dengan menggunakan properti seperti color dan background-color.

Contoh mengatur warna dan latar belakang:

body {
    color: #333;
    background-color: #f0f0f0;
}

Anda dapat menggunakan berbagai format untuk mendefinisikan warna, seperti nama warna, HEX, RGB, atau HSL, misalnya:

• color: red; - Menggunakan nama warna.

• color: #ff0000; - Menggunakan kode HEX untuk warna merah.

• color: rgb(255, 0, 0); - Menggunakan model warna RGB.

• color: hsl(0, 100%, 50%); - Menggunakan model warna HSL.

Selanjutnya, kita akan membahas tentang cara menulis CSS dengan lebih rapi dan mudah dipelihara. Stay tuned!