Menulis Aturan CSS

Pendahuluan

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya elemen HTML pada halaman web. Dalam CSS, aturan digunakan untuk mendefinisikan gaya dan penampilan elemen.

Struktur Aturan CSS

Aturan CSS terdiri dari selektor dan blok deklarasi. Selektor memilih elemen HTML yang akan diberi gaya, sedangkan blok deklarasi berisi properti dan nilai yang akan diterapkan pada elemen tersebut.

Contoh:

/* Selektor */
body {
   /* Blok deklarasi */
   font-family: Arial, sans-serif;
   color: #333;
}

Selektor

Selektor adalah elemen HTML yang akan diberi gaya. Beberapa jenis selektor:

  • Elemen: p, h1, div, dll.
  • Kelas: .nama-kelas
  • ID: #nama-id
  • Pseudo-class: :hover, :active
  • Pseudo-element: ::before, ::after

Contoh:

/* Elemen Selector */
h1 {
   font-size: 24px;
}

/* Kelas Selector */
.teks-merah {
   color: red;
}

/* ID Selector */
#judul {
   font-weight: bold;
}

Properti dan Nilai

Properti adalah atribut yang akan diatur, dan nilai adalah nilai yang akan diterapkan pada properti tersebut.

Contoh:

/* Properti dan Nilai */
.teks-besar {
   font-size: 18px;
}

Komentar

Komentar digunakan untuk memberikan penjelasan pada kode CSS dan tidak akan mempengaruhi tampilan halaman web.

Contoh:

/* Ini adalah komentar */

Contoh Lengkap

Gabungkan semua konsep di atas untuk membuat aturan CSS yang lengkap.

/* Selektor */
body {
   /* Blok deklarasi */
   font-family: Arial, sans-serif;
   color: #333;
}

/* Elemen Selector */
h1 {
   font-size: 24px;
}

/* Kelas Selector */
.teks-merah {
   color: red;
}

/* ID Selector */
#judul {
   font-weight: bold;
}

/* Properti dan Nilai */
.teks-besar {
   font-size: 18px;
}

Dengan menggunakan struktur ini, Anda dapat membuat aturan CSS untuk mendesain halaman web dengan lebih terstruktur dan mudah dimengerti.

PREVIOUS
NEXT