CARA PENULISAN CSS

CSS (Cascading Style Sheets) merupakan bahasa yang digunakan untuk mengatur tampilan dan desain pada website. Penulisan CSS yang benar dan efektif sangat penting agar website terlihat menarik dan profesional. Berikut ini beberapa cara penulisan CSS.

Penentuan Selector

Pada saat menulis CSS, kamu perlu menentukan selector terlebih dahulu. Selector ini berfungsi untuk memilih elemen HTML yang akan diberi gaya. Terdapat beberapa jenis selector dalam CSS, yaitu element selector, class selector, dan id selector.

Element Selector

Element selector digunakan untuk memilih semua elemen dengan jenis tertentu. Misalnya, jika kamu ingin mewarnai semua teks paragraph (p) menjadi merah, kamu bisa menulis seperti berikut:

p{
    color: red;
}

Class Selector

Class selector digunakan untuk memilih elemen dengan class tertentu. Misalnya, jika kamu ingin mengubah latar belakang semua elemen dengan class “konten” menjadi biru, kamu bisa menulis:

.konten{
    background-color: blue;
}

ID Selector

ID selector digunakan untuk memilih satu elemen dengan ID tertentu. Misalnya, jika kamu ingin merubah ukuran teks elemen dengan ID “judul” menjadi 24px, kamu bisa menulis:

#judul{
    font-size: 24px;
}

Penggunaan Deklarasi Properti

Setelah menentukan selector, kamu perlu menulis deklarasi properti. Deklarasi properti terdiri dari nama properti dan nilai properti. Properti ditulis di dalam kurung kurawal {} dan diakhiri dengan titik koma. Contoh:

p{
    font-size: 20px;
    color: red;
}

Penggunaan Penulisan Nilai Warna

Dalam CSS, nilai warna bisa ditulis dengan beberapa cara, yaitu menggunakan nama warna, kode hexadecimal, rgb, dan rgba. Contoh:

p{
    color: red; /*menggunakan nama warna*/
    background-color: #ffffff; /*menggunakan kode hexadecimal*/
    border-color: rgb(255,0,0); /*menggunakan rgb*/
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /*menggunakan rgba*/
}

Penulisan CSS di HTML

Terdapat tiga cara penulisan CSS di HTML, yaitu inline style, internal style, dan external style. Inline style ditulis langsung di tag HTML, internal style ditulis di dalam tag <style> pada bagian “head” HTML, dan external style ditulis di file CSS terpisah yang nantinya di-link-kan ke file HTML menggunakan tag <link>.

Penulisan CSS yang baik dan benar sangat berpengaruh pada tampilan website. Semoga panduan ini membantu kamu dalam menulis CSS. Selamat mencoba!