CSS #1: Dasar

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan dan format halaman web. Dalam bagian ini, kita akan membahas dasar-dasar CSS, termasuk selektor dan properti CSS serta sintaks CSS.

Selektor dan Properti CSS

Selektor dan properti adalah elemen dasar dalam CSS. Selektor digunakan untuk memilih elemen HTML yang ingin kita gaya, sedangkan properti menentukan gaya yang diterapkan pada elemen tersebut.

Jenis-Jenis Selektor

Tag Selektor

Tag selektor memilih elemen berdasarkan nama tag HTML. Misalnya, untuk memilih semua paragraf, kita menggunakan selektor p:

p {
  color: blue;
}

Ini akan mengubah warna teks semua elemen <p> menjadi biru.

Class Selektor

Class selektor memilih elemen berdasarkan atribut class. Class dapat digunakan pada beberapa elemen. Misalnya, untuk memilih elemen dengan class highlight, kita menggunakan selektor .highlight:

.highlight {
  background-color: yellow;
}

Ini akan memberikan latar belakang kuning pada semua elemen dengan class highlight.

ID Selektor

ID selektor memilih elemen berdasarkan atribut id. ID harus unik dalam satu halaman. Misalnya, untuk memilih elemen dengan ID header, kita menggunakan selektor #header:

#header {
  font-size: 24px;
}

Ini akan mengubah ukuran font elemen dengan ID header menjadi 24px.

Properti dan Nilai

CSS terdiri dari properti dan nilai yang diterapkan pada selektor. Properti adalah aspek yang ingin kita ubah (seperti warna, ukuran font, margin, dll.), dan nilai adalah spesifikasi dari properti tersebut.

Contoh penggunaan properti dan nilai:

p {
 color: red;  /* Warna teks merah */
 font-size: 16px;  /* Ukuran font 16 piksel */
 margin: 10px;  /* Margin sebesar 10 piksel */
}

Pada contoh di atas, properti color, font-size, dan margin diterapkan pada elemen <p> dengan nilai yang sesuai.

Sintaks CSS

Sintaks CSS menentukan cara penulisan aturan CSS. Setiap aturan CSS terdiri dari selektor dan blok deklarasi. Blok deklarasi berada di dalam kurung kurawal {} dan berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma ;.

Struktur Dasar CSS

Struktur dasar aturan CSS:

selector {
 property: value;
 property: value;
}

Contoh aturan CSS sederhana:

h1 {
 color: green;
 text-align: center;
}

Aturan di atas mengatur elemen <h1> dengan warna teks hijau dan teks yang di tengah.

Penempatan CSS

CSS dapat ditempatkan di dalam halaman HTML dengan beberapa cara:

Inline CSS

Inline CSS ditulis langsung di dalam atribut style pada elemen HTML. Contoh:

<p style="color: blue;">Teks ini berwarna biru</p>

Kelemahan dari inline CSS adalah sulit dikelola dan tidak disarankan untuk digunakan dalam proyek besar.

Internal CSS

Internal CSS ditulis di dalam elemen <style> di bagian <head> dari dokumen HTML. Contoh:

<head>
  <style>
p {
      color: red;
    }
  </style>
</head>

Internal CSS cocok untuk gaya halaman tunggal, tetapi tidak efektif untuk banyak halaman.

External CSS

External CSS ditulis dalam file terpisah dengan ekstensi .css, kemudian dihubungkan ke dokumen HTML menggunakan elemen <link> di bagian <head>. Contoh:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

File styles.css berisi aturan CSS:

body {
  font-family: Arial, sans-serif;
}

External CSS adalah cara yang paling direkomendasikan karena memisahkan konten dan gaya, memudahkan pengelolaan dan penggunaan ulang.

Dengan memahami dasar-dasar CSS ini, Kalian akan dapat mulai merancang dan mengatur tampilan halaman web Anda dengan lebih efektif.

Sumber: