Mengenal CSS Syntax: Gaya-Gayaan di Dunia Web (Tutorial CSS Part 2)

Gambar 2.0 : Logo CSS

Kalau kamu baru mulai belajar ngoding dan nyemplung ke dunia web, pasti udah sering dengar istilah "CSS". CSS alias Cascading Style Sheets ini ibarat make-up-nya sebuah website. HTML itu struktur dasarnya, dan CSS yang bikin tampilannya kece.

Nah, biar bisa dandanin website, kamu perlu ngerti dulu nih sintaks CSS. Tenang, gampang kok! Yuk kita bahas pelan-pelan.

Apa Itu CSS Syntax?

CSS syntax adalah cara nulis aturan styling di CSS. Satu aturan disebut rule atau rule-set, dan biasanya bentuknya begini:

selector {
  property: value;
}

Santai, kita bahas satu-satu:

1. Selector

Selector itu bagian yang nunjuk elemen mana di HTML yang mau kamu ubah tampilannya. Misalnya kamu mau ngubah warna tulisan paragraf, kamu pake selector p.

Contoh:

p {
  color: blue;
}

Artinya: semua tag <p> di HTML bakal berubah warna jadi biru.

Contoh selengkapnya:

<!DOCTYPE html>
<html>
  <head>
    <style>
    p {
      color: blue;
    }
    </style>
  </head>
  <body>
    <p>Teks ini berwarna biru</p>
  </body>
</html>

Hasilnya:

Gambar 2.1 : selector CSS

2. Property

Property itu atribut atau properti yang mau kamu ubah. Contohnya color, font-size, background-color, dan masih banyak lagi.

3. Value

Value itu nilainya. Misalnya kamu pakai color: red;, berarti kamu pengen warna tulisannya merah.

Jadi, satu baris styling bisa dibaca kayak gini:

"Untuk elemen p, ubah properti color jadi blue."

Gampang kan?

Contoh CSS Syntax Lainnya

h1 {
  font-size: 36px;
  text-align: center;
  color: #ff5733;
}

Penjelasannya:

font-size: 36px; → ukuran huruf 36 piksel
text-align: center; → teksnya rata tengah
color: #ff5733; → warna teks pakai kode hex

Contoh lebih lengkapnya:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        font-size: 36px;
        text-align: center;
        color: #ff5733;
      }
    </style>
  </head>
  <body>
    <h1>Tulisan ini berwarna oren, ditengah dan berukuran 36 piksel</h1>
  </body>
</html>

Hasilnya:

Gambar 2.2 : Contoh Syntax CSS

Beberapa Catatan Penting

Setelah property, harus ada titik dua :
Setelah value, tutup dengan titik koma ;
Semua rule dibungkus dengan {} setelah selector
Jangan lupa spasi biar enak dibaca (meskipun komputer nggak peduli)

Penutup

CSS syntax itu sebenarnya simpel banget. Yang penting kamu ngerti strukturnya: selector { property: value; }. Sisanya tinggal latihan dan ngulik-ngulik properti CSS yang ada.

Selamat ngoding dan semoga websitemu makin kece tampilannya!

filesop.com