Kali ini saya akan menambahkan materi baru yaitu tentang bahasa CSS atau bahasanya para desainer website. Bahasa CSS ini nantinya akan berkaitan dengan tutorial tentang pembuatan website yang akan saya tulis kedepannya.
A. Apa itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. CSS digunakan untuk mempercantik halaman website, termasuk desain, tata letak, dan variasi tampilan untuk berbagai perangkat dan layar. Dengan CSS kita bisa memanipulasi tampilan website, seperti mengubah desain dari sebuah text, warna, gambar dan latar belakang / background dari semua tag HTML, sehingga website yang kita buat akan terlihat lebih hidup.
B. Sintaks Dasar CSS
Kode CSS memiliki 2 bagian utama, yaitu Selector (pemilih) dan satu atau lebih Declaration (Deklarasi).
Format Penulisan :
selector {Keterangan :
properti_1:nilai_1; /* Deklarasi Pertama */
properti_2:nilai_2; /* Deklarasi Ke-dua */
...
properti_n:nilai_n; /* Deklarasi Ke-n */
}
1. Selector mengarah ke elemen HTML yang akan dimanipulasi.
2. Sebuah Blok Deklarasi harus berada di dalam tanda kurung kurawal.
3. Blok deklarasi berisi satu deklarasi atau lebih yang dipisahkan oleh titik koma.
4. Deklarasi CSS selalu diakhiri dengan titik koma, dan setiap deklarasi berisi nama properti (property) dan nilai (value).
Contoh Penulisan CSS:
h1 {Keterangan :
color: blue; /* warna text */
text-align: center; /* posisi text */
background: black; /* warna latar belakang (background) */
}
Semua text pada elemen <h1> akan diberi warna biru, dengan latar belakang berwarna hitam dan posisi text rata tengah.
Contoh Penulisan pada halaman HTML :
<!DOCTYPE HTML>
<html>
<head>
<title>Mengenal CSS</title>
<style>
h1 {
color: blue; /*warna text*/
text-align: center; /*posisi text*/
background: black; /*warna latar belakang (background)*/
}
</style>
</head>
<body>
<h1>Ini adalah sebuah text</h1>
</body>
</html>
C. Selector CSS
Selector CSS digunakan untuk "menemukan" (atau memilih) elemen HTML berdasarkan nama elemen, id atau kelas.
1. Selector Elemen
Selector Elemen memilih elemen berdasarkan nama elemen / nama tag, contoh <h1>, <p>, <span>, dll.
Format Penulisan :
nama_elemen { nama_properti:nilai; }Contoh Penulisan CSS:
p { color: blue; }Keterangan :
Semua text pada tag <p> akan diberi warna biru.
Contoh Penulisan pada halaman HTML :
<!DOCTYPE HTML>
<html>
<head>
<title>Selector Elemen</title>
<style>
p { color: blue; }
</style>
</head>
<body>
<p>Ini adalah text pertama</p>
<p>Ini adalah text kedua</p>
<p>Ini adalah text ketiga</p>
</body>
</html>
2. Selector Id
Selector Id memilih elemen berdasarkan atribut id pada tag HTML. Untuk penulisan baris kode pada Selector Id harus diawali dengan tanda pagar (#) kemudian diikuti oleh nama id yang sudah ditentukan.
Format Penulisan :
#nama_id { nama_properti:nilai; }Contoh Penulisan CSS:
#judul_artikel { color: blue; font-size: 14px; }Keterangan :
Semua text pada tag HTML yang memiliki atribut id dengan nilai / nama id "judul_artikel" akan diberi warna biru, dengan ukuran huruf sebesar 14 pixel.
Contoh Penulisan pada halaman HTML :
<!DOCTYPE HTML>
<html>
<head>
<title>Selector Id</title>
<style>
#judul_artikel { color: blue; font-size: 14px; }
#isi_artikel { color: black; font-size: 12px; }
</style>
</head>
<body>
<h1 id="judul_artikel">Judul Artikel</h1>
<p id="isi_artikel">Ini adalah contoh isi artikel dengan huruf berwarna hitam dan ukuran huruf sebesar 12 pixel.</p>
</body>
</html>
3. Selector Kelas
Selector Kelas memilih elemen berdasarkan atribut class pada tag HTML. Untuk penulisan baris kode pada Selector Kelas harus diawali dengan tanda titik (.) kemudian diikuti oleh nama kelas yang sudah ditentukan.
Format Penulisan :
.nama_kelas { nama_properti:nilai; }Contoh Penulisan CSS:
.judul_artikel { color: blue; font-size: 12px; font-weight: bold; }Keterangan :
Semua text pada tag HTML yang memiliki atribut class dengan nilai / nama kelas "judul_artikel" akan diberi warna biru, berhuruf tebal dan ukuran huruf sebesar 12 pixel.
Contoh Penulisan pada halaman HTML :
<!DOCTYPE HTML>
<html>
<head>
<title>Selector Kelas</title>
<style>
.judul_artikel { color: blue; font-size: 14px; font-weight: bold; }
.isi_artikel { color: black; font-size: 12px; }
</style>
</head>
<body>
<h1 class="judul_artikel">Judul Artikel Pertama</h1>
<p class="isi_artikel">Ini adalah contoh isi artikel pertama dengan huruf berwarna hitam dan ukuran huruf sebesar 12 pixel.</p>
<br>
<h1 class="judul_artikel">Judul Artikel Kedua</h1>
<p class="isi_artikel">Ini adalah contoh isi artikel kedua dengan huruf berwarna hitam dan ukuran huruf sebesar 12 pixel.</p>
</body>
</html>
D. Pengelompokan Selector
Pengelompokan Selector atau Grouping Selectors digunakan untuk meminimalkan kode dengan cara mengelompokkan selector yang memiliki deklarasi yang sama. Untuk mengelompokkan selector, pisahkan setiap selector dengan tanda koma (,).
Format Penulisan :
selector_1, selector_2, ..., selector_n { nama_properti:nilai; }Contoh Penulisan CSS:
h1, h2, p { color: red; font-weight: bold; }Keterangan :
Semua text pada tag <h1>, <h2> dan <p> akan diberi warna biru dengan huruf tebal.
Contoh Penulisan pada halaman HTML :
<!DOCTYPE HTML>
<html>
<head>
<title>Pengelompokan Selector</title>
<style>
h1, h2, p { color: red; font-weight: bold; }
</style>
</head>
<body>
<h1>Judul Artikel</h1>
<h2>Author : Denis Julianto</h2>
<p>Ini adalah contoh isi artikel dengan huruf berwarna merah dan huruf tebal.</p>
</body>
</html>
E. Komentar Pada CSS
Komentar digunakan untuk menjelaskan kode, dan dapat membantu ketika kita mengedit kode css dikemudian hari. Komentar pada CSS diawali dengan /* dan diakhiri dengan */.
Format Penulisan :
selector {Contoh Penulisan CSS:
deklarasi; /* komentar */
}
h1 {Keterangan :
color: red; /* teks berwarna merah */
font-size: 14px; /* ukuran huruf 14 pixel */
}
Semua text pada tag <h1>, <h2> dan <p> akan diberi warna biru dengan huruf tebal.
Contoh Penulisan pada halaman HTML :
<!DOCTYPE HTML>
<html>
<head>
<title>Komentar Pada CSS</title>
<style>
h1 {
color: red; /* teks berwarna merah */
font-size: 14px; /* ukuran huruf 14 pixel */
}
</style>
</head>
<body>
<h1>Ini adalah sebuah text</h1>
</body>
</html>
Semoga materi pertama yang saya sampaikan tentang CSS dapat dipahami poinreaders. Silahkan tulis pertanyaan seputar materi yang telah dibahas pada kolom komentar. jangan lupa follow akun sosial kami agar poinreaders bisa mendapatkan materi terbaru tentang pemrograman.