Belajar CSS #1 : Pengenalan Syntaks Dasar CSS

Belajar CSS Dasar akan dimulai dengan pengenalan CSS dari penggunaan syntaks dasar CSS. Sebelum memulai belajar CSS untuk mempercantik tampilan web, harus mengenal terlebih dahulu mengenai struktur HTML dengan mempelajari HTML Dasar.

Pada artikel ini akan membahas tentang

Syntaks Dasar CSS

Sebelum menggunakan CSS pada HTML untuk mempercantik tampilan ataupun desain web maka harus berkenalan dahulu dengan beberapa sintaks dasar CSS.

Ada aturan yang berlaku untuk menulis kode CSS, yaitu:

  • Selector

    Selector merupakan tag HTML/elemen yang akan diberikan style CSS

  • Property

    Property merupakan atribut dari tag HTML

  • Value

    Value merupakan nilai yang diberikan kepada property

Untuk contoh penulisan coding CSS bisa dilihat seperti dibawah ini:

h2 {
    color : red;
}

Penjelasan:

  • h2 adalah selector
  • color adalah property
  • red adalah value

Hasil dari kode CSS diatas akan menghasilkan warna merah pada tag h2 di HTML.

Selain memberikan style CSS pada tag HTML, pemberian style CSS juga bisa dilakukan pada id dan class HTML.

Selector CSS ID

Untuk membuat syle CSS pada atribut ID yang diberikan oleh tag HTML, maka bisa menggunakan kode berikut ini:

Coding pada HTML

<div id="kotak"></div>

Coding pada CSS

#kotak {
    color: blue;
}

Penjelasan:

  • pada coding di HTML, sudah dibuat nama id="kotak" pada tag <div> HTML.
  • cara penulisan CSS selector ID adalah dengan diawali tanda # diikuti dengan nama atribut ID.
  • #kotak adalah selector ID
  • color adalah property
  • blue adalah value

Selector CSS Class

Untuk membuat syle CSS pada atribut Class yang diberikan oleh tag HTML, maka bisa menggunakan kode berikut ini:

Coding pada HTML

<div class="box"></div>

Coding pada CSS

.box {
    color: red;
}

Penjelasan:

  • pada coding di HTML, sudah dibuat nama class="box" pada tag <div> HTML.
  • cara penulisan CSS selector Class adalah dengan diawali tanda . (titik) diikuti dengan nama selector.
  • .box adalah selector Class
  • color adalah property
  • red adalah value

Selector CSS Universal

Untuk penggunaan selector CSS universal cukup menggunakan tanda bintang (*) yang akan memberikan efek style pada seluruh elemen HTML.

Coding pada CSS

* {
    color: red;
}

Penjelasan:

  • * adalah selector
  • color adalah property
  • red adalah value

Kode diatas akan membuat seluruh text pada HTML berwana merah.

Group Selector

Penulisan CSS tidak perlu dilakukan untuk masing-masing tag, id, atau class. Tetapi bisa juga dilakukan langsung ketika ada 2 atau lebih tag, id atau class yang akan diberikan style yang sama maka cukup ditulis satu kali saja.

Contoh Coding CSS

h1, h2, h4 {
    color: red;
}

Penjelasan:

  • selector h1, h2, dan h4 akan diberikan warna merah tanpa harus menulis kode disetiap tag.

Selector Turunan

Selector ini akan memberikan efek style pada elemen turunannya.

Contoh Coding HTML

<div class="footer">
    <h4>Ini text footer</h4>
</div>

Contoh Coding CSS

.footer h4 {
    color: red;
}

Penjelasan:

  • .footer h4 adalah selector
  • style yang dibuat adalah memberi warna merah pada text dengan tag h4 yang ada pada class footer.

Penutup

Demikianlah belajar coding dasar CSS mengenai penggunaan selector CSS untuk memperindah tampilan web yang dibuat dengan HTML.

Selamat Mencoba.