CSS Syntax dan Selectors

CSS Syntax dan Selectors - CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan suatu halaman web. Dengan CSS, kita dapat mengatur warna, ukuran, posisi, dan banyak hal lain dari elemen HTML.

CSS Syntax dan Selectors

Syntax dari CSS sangat sederhana. Sebuah aturan CSS terdiri dari selektor, yang menentukan elemen HTML yang akan diterapkan aturan tersebut, diikuti dengan kurung kurawal { } yang berisi properti dan nilai dari aturan tersebut.

Misalnya:

selector {

properti: nilai;

...

}

Baca juga : CSS position property dan Contohnya

Jenis Selektor

Ada beberapa jenis selektor yang digunakan dalam CSS, seperti:

Selektor elemen: digunakan untuk mengatur tampilan elemen HTML secara umum, seperti p {color: blue;} yang akan mengubah warna tulisan pada semua elemen p menjadi biru.

Selektor class: digunakan untuk mengatur tampilan elemen yang memiliki class tertentu, seperti .warna-merah {color: red;} yang akan mengubah warna tulisan pada semua elemen yang memiliki class "warna-merah" menjadi merah.

Selektor id: digunakan untuk mengatur tampilan elemen yang memiliki id tertentu, seperti #judul {font-size: 36px;} yang akan mengubah ukuran font pada elemen yang memiliki id "judul" menjadi 36px.

Selektor gabungan: digunakan untuk mengatur tampilan elemen yang memenuhi kondisi tertentu, seperti p.warna-merah {color: red;} yang akan mengubah warna tulisan pada semua elemen p yang memiliki class "warna-merah" menjadi merah.

Itu adalah beberapa contoh dari selektor yang digunakan dalam CSS, namun masih ada banyak selektor lain yang bisa digunakan.

Dengan menggabungkan syntax yang sederhana dengan selektor yang fleksibel, CSS memungkinkan kita untuk mengatur tampilan halaman web dengan sangat detail dan efektif.

Selain selektor yang telah disebutkan di atas, ada juga selektor yang cukup populer yaitu selektor descendant dan selektor attribute.

Selektor descendant digunakan untuk mengatur tampilan elemen yang berada di dalam elemen lain.

Misalnya, jika kita ingin mengubah warna tulisan pada semua elemen li yang berada di dalam elemen ul, kita dapat menggunakan selektor descendant seperti ini:

ul li {color: blue;}

Sedangkan selektor attribute digunakan untuk mengatur tampilan elemen berdasarkan atribut tertentu.

Misalnya, jika kita ingin mengubah warna tulisan pada semua elemen a yang memiliki atribut href, kita dapat menggunakan selektor attribute seperti ini:

a[href] {color: red;}

Selain itu, selektor attribute juga dapat digunakan untuk mengatur tampilan elemen berdasarkan nilai dari atribut tertentu.

Misalnya, jika kita ingin mengubah warna tulisan pada semua elemen a yang memiliki atribut href yang bernilai "https://", kita dapat menggunakan selektor attribute seperti ini:

a[href='https://'] {color: green;}

Itulah beberapa contoh dari CSS syntax dan selector yang dapat digunakan untuk mengatur tampilan halaman web.

Dengan menggunakan CSS, kita dapat dengan mudah mengubah warna, ukuran, posisi, dan banyak hal lain dari elemen HTML sesuai dengan kebutuhan kita.

CSS Syntax dan Selectors