CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak elemen-elemen pada halaman web. Dengan CSS, kita bisa mengontrol warna, ukuran, jarak antar elemen, posisi, dan banyak aspek visual lainnya dari sebuah dokumen HTML.
Pada dasarnya, struktur penulisan CSS terdiri dari tiga bagian utama, yaitu selector, property, dan value. Ketiga bagian ini membentuk sebuah CSS rule set, yang merupakan dasar dari seluruh kode CSS.
Daftar isi
Baca juga: Cara Menghubungkan CSS ke HTML (Inline, Internal, dan External CSS)
Struktur Dasar CSS
Sebelum mempelajari lebih dalam, mari pahami terlebih dahulu struktur dasar penulisan CSS berikut:
selector {
property: value;
}Code language: CSS (css)- Selector: Menentukan elemen HTML mana yang akan diberi gaya.
- Property: Menunjukkan atribut atau aspek dari elemen yang ingin diubah (seperti warna, ukuran, font, dll).
- Value: Menentukan nilai dari properti tersebut.
Contoh sederhana:
p {
color: blue;
font-size: 16px;
}Code language: CSS (css)Kode di atas berarti setiap elemen <p> (paragraf) akan memiliki teks berwarna biru dan ukuran font sebesar 16 piksel.
Apa Itu Selector CSS?
Selector CSS berfungsi untuk memilih elemen HTML yang akan diberi gaya. Terdapat berbagai jenis selector yang dapat digunakan, antara lain:
a. Element Selector
Selector ini memilih elemen berdasarkan nama tag HTML.
h1 {
color: red;
}Code language: CSS (css)Artinya, semua elemen <h1> akan memiliki teks berwarna merah.
b. Class Selector
Class selector digunakan untuk memilih elemen dengan atribut class tertentu. Diawali dengan tanda titik (.).
.button {
background-color: green;
color: white;
}Code language: CSS (css)HTML:
<button class="button">Klik Saya</button>
Code language: HTML, XML (xml)c. ID Selector
Selector ini memilih elemen berdasarkan atribut id. Diawali dengan tanda pagar (#).
#header {
background-color: #f4f4f4;
padding: 20px;
}Code language: CSS (css)HTML:
<div id="header">Judul Halaman</div>
Code language: HTML, XML (xml)d. Group Selector
Kamu bisa mengelompokkan beberapa selector yang memiliki gaya sama menggunakan koma (,).
h1, h2, h3 {
font-family: Arial, sans-serif;
}Code language: CSS (css)e. Universal Selector
Selector ini digunakan untuk memilih semua elemen HTML pada halaman.
* {
margin: 0;
padding: 0;
}Code language: CSS (css)Property dan Value CSS
Setelah selector ditentukan, langkah berikutnya adalah menulis property dan value.
Property CSS adalah atribut yang mengatur gaya visual elemen, sedangkan value adalah nilai yang diberikan pada properti tersebut.
Contoh penggunaan property dan value:
p {
color: black;
text-align: justify;
line-height: 1.5;
}Code language: CSS (css)Penjelasan:
color: menentukan warna teks.text-align: mengatur perataan teks.line-height: menentukan jarak antar baris.
Beberapa contoh property CSS populer lainnya: | Property | Deskripsi | Contoh Value | |———–|————|————–| | color | Mengatur warna teks | red, #333, rgb(0,0,0) | | font-size | Mengatur ukuran font | 14px, 1.5em | | background-color | Warna latar belakang | blue, #f2f2f2 | | margin | Mengatur jarak luar elemen | 10px, auto | | padding | Mengatur jarak dalam elemen | 5px, 20px | | border | Mengatur garis tepi elemen | 1px solid black |
Format Penulisan CSS yang Benar
Agar kode CSS mudah dibaca dan dikelola, penting untuk memperhatikan format penulisan. Gunakan indentasi 4 spasi dan pastikan setiap properti diakhiri dengan titik koma (;).
Contoh:
.container {
width: 80%;
margin: 0 auto;
background-color: #fff;
}Code language: CSS (css)Selain itu, kamu juga bisa menggunakan CSS dengan tiga cara berbeda:
- Inline CSS — langsung di dalam tag HTML menggunakan atribut
style. - Internal CSS — di dalam tag
<style>pada bagian<head>HTML. - External CSS — melalui file
.cssterpisah yang dihubungkan menggunakan tag<link>.
Contoh Lengkap Struktur CSS
Berikut contoh penerapan struktur kode CSS lengkap:
HTML:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Struktur CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="header">Belajar CSS untuk Pemula</header>
<p class="deskripsi">CSS membantu membuat tampilan website menjadi lebih menarik dan profesional.</p>
</body>
</html>Code language: HTML, XML (xml)CSS (style.css):
#header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 15px;
}
.deskripsi {
font-size: 18px;
color: #333;
line-height: 1.6;
}Code language: CSS (css)Kesimpulan
Memahami struktur dasar penulisan CSS merupakan langkah awal dalam menguasai pengembangan web. Dengan memahami peran selector, property, dan value, kamu dapat mengontrol tampilan elemen HTML secara fleksibel.
Gunakan format penulisan yang rapi dan konsisten agar kode mudah dibaca dan dipelihara. Setelah memahami dasar ini, kamu bisa melangkah ke topik CSS yang lebih lanjut seperti layout, animasi, dan responsive design.
