Kodealgo

Sintaks CSS

Agar CSS yang kita tulis dapat bekerja dengan baik, kita perlu mengikuti aturan atau sintaks yang telah ditetapkan.

CSS yang ditulis tanpa mengikuti aturan dan sintaks, tidak akan mempengaruhi halaman HTML.

Di sini kita juga akan mempelajari beberapa istilah yang sering muncul di banyak artikel di internet, seperti deklarasi, properti, nilai, selektor dan sebagainya.

Sehingga ketika kita mendengar istilah-istilah tersebut, kita bisa memahami maksudnya.

Mari kita pelajari lebih lanjut.

  1. Sintaks Dasar CSS
  2. Selektor
  3. Blok Deklarasi

Sintaks Dasar CSS

Sintaks CSS

Berikut adalah sintaks dasar CSS:

.headline {
  color: blue;
  font-size: 25px;
}

Kode CSS yang kita tulis di atas terdiri dari:

  • .headline adalah selektor.
  • color: blue; adalah deklarasi CSS, terdiri dari properti (color) dipisahkan dengan titik dua, lalu nilainya (blue), dan diakhiri dengan titik koma (;) sebagai pemisah, begitu pula dengan font-size.
  • Deklarasi CSS ditulis dalam blok deklarasi yaitu di antara kurung kurawal buka dan tutup { ... }.

Mari kita pelajari lebih lanjut setiap bagian dari sintaks tersebut.

Selektor

Selektor (pemilih) adalah bagian yang menentukan mau diterapkan ke elemen HTML yang mana CSS yang kita tulis.

Mari kita gunakan contoh kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
    <style>
      .headline {
        color: green;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h1 class="headline">Belajar CSS</h1>
    <p>Belajar CSS di KodeAlgo</p>
    <p>Saya sedang belajar CSS di Kodealgo</p>
  </body>
</html>

Hasil:

Seleksi Elemen HTML dengan CSS

.headline adalah selektor, ini memberitahu browser bahwa deklarasi CSS yang ada di dalam blok ({ ... }) harus diterapkan ke elemen HTML yang memiliki kelas .headline.

Jadi, elemen HTML yang tidak memiliki kelas .headline tidak akan terpengaruh.

Apakah kita bisa menulis lebih dari satu selektor?

Tentu saja, cukup pisahkan dengan koma.

Contoh:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
    <style>
      .description,
      .paragraph {
        font-size: 20px;
        color: brown;
      }
    </style>
  </head>
  <body>
    <p class="description">Belajar CSS di KodeAlgo</p>
    <p class="paragraph">Saya sedang belajar CSS di Kodealgo</p>
  </body>
</html>

Hasil:

Seleksi Paragraf HTML dengan CSS

Kita bisa menyeleksi elemen berdasarkan kelas, id, dan tag. Ini akan kita pelajari lebih lanjut di artikel terpisah.

Untuk saat ini kita hanya perlu tahu bahwa selektor berfungsi untuk menyeleksi elemen HTML yang ingin diberi gaya CSS.

Blok Deklarasi

Deklarasi CSS dikelompokkan di dalam blok yang diawali dengan kurung kurawal buka ({) dan kurung kurawal tutup (}).

Di dalam blok tersebut kita bisa menulis beberapa deklarasi CSS.

Deklarasi CSS terdiri properti dan nilai, dipisahkan dengan koma, dan diakhiri dengan titik koma.

Mari kita lihat contoh berikut:

.paragraph {
  font-size: 20px;
  color: brown;
}

font-size: 20px; adalah deklarasi CSS yang terdiri dari properti font-size dan nilainya 20px, begitu pula dengan color.

Titik koma yang berada tepat setelah nilai berfungsi untuk mengakhiri atau memisahkan deklarasi CSS dengan deklarasi yang lainnya.

Sebetulnya masih ada sintaks statement seperti @media, @document dan lainnya, tapi ini akan kita pelajari di artikel terpisah.

« Sebelumnya
PersiapanSelanjutnya »
Komentar