Format penulisan CSS
1. Selektor
Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita beri style. Contohnya:
Artinya: Kita memilih semua elemen<h1>, lalu diberikan warna teks red (merah).
Selektor dapat berupa nama tag, class, id, dan atribut,
Contoh:
Code HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Selector CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Selector Nama Tag</h1>
<p class="nama-kelas">Selector Class</p>
<p id="nama-id">Selector ID</p>
<input type="submit" value="Submit" />
</body>
</html>
Code CSS:
/* Selector Nama Tag */
h1 {
color: blue;
}
/* Selector Class */
.nama-kelas {
font-size: 16px;
}
/* Selector ID */
#nama-id {
background-color: yellow;
}
/* Selector Atribut */
[type="submit"] {
border: 2px solid green;
}
2. Blok Deklarasi
Blok deklarasi adalah tempat kita menuliskan atribut atau properti CSS yang akan diberikan ke pada elemen yang telah diseleksi.
Contoh:
Artinya, kita akan mengatur ukuran font dari tag <p> sebesar 18px. Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu ditutup dengan }. Satu blok deklarasi, bisa dipakai oleh lebih dari satu selektor.
3. Properti dan Nilainya
Properti adalah sekumpulan aturan yang akan diberikan kepada elemen yang dipilih. Format penulisan properti seperti ini:
Setiap properti harus diakhiri dengan titik koma (;). Apabila hanya terdapat satu properti, boleh tidak menggunakan titik koma. Properti harus ditulis di dalam blok deklarasi.
