Tutorial CSS untuk Pemula: Cara Penggunaan Selector CSS



Halo gan. Di postingan sebelumnya kita sudah membahas jenis-jenis selector yang ada di CSS.

Ada 5 jenis selector yang sudah kita bahas sebelumnya, yakni: universal selector, element type selector, class selector, id selector, dan atribute selector.

Selector nggak cuma berdiri sendiri, kita bisa mengombinasikan jenis-jenis selector di atas agar lebih spesifik lagi elemen HTMLnya yang ingin diubah tampilannya.

Kita akan bagi jadi beberapa kombinasi supaya kita lebih familiar dan lebih paham lagi dengan kode CSS.

tutorial css untuk pemula

Kombinasi beberapa tag HTML dengan style yang sama

Misalnya, kita ingin heading, paragraf, dan link, teksnya berwarna merah dan ada garis dibawahnya (underline).. kode CSSnya seperti ini:
h1 {
  color: red;
  text-decoration: underline;
}

p {
  color: red;
  text-decoration: underline;
}

a {
  color: red;
  text-decoration: underline;
}

Ketiga tag HTML tersebut punya style yang sama. Kode CSS di atas kurang efisien. Kita bisa menuliskannya seperti ini:
h1, p, a {
  color: red;
  text-decoration: underline;
}

Lebih enak kode yang atas atau bawah? enak yang bawah toh?

Hasilnya pun sama saja, tapi lebih efisien dan lebih pendek.

Jika ada beberapa tag HTML yang punya style yang sama, kita bisa memisahkan selectornya dengan tanda koma (,) seperti kode di atas.

Mengubah style tag di dalam tag HTML

Misalnya, ada kode HTML seperti ini.
<p>
  <i>Ini akan berubah menjadi teks miring..</i>
</p>

<p>
 <b>Ini akan berubah menjadi cetak tebal..</b>
</p>

Jika kita jalankan dengan web browser, kedua paragraf di atas, baik yang miring maupun yang bercetak tebal akan memiliki ukuran huruf yang sama.

Lalu, gimana caranya agar teks yang miring punya ukuran huruf yang lebih besar, padahal keduanya ada di dalam tag yang sama (tag <p>)?

Caranya adalah dengan mengikutkan tag pertama dan tag setelahnya di selector CSS. Seperti ini jadinya:
p i {
  font-size: 30px;
}

Maka, paragraf yang bercetak miring akan memiliki ukuran font sebesar 30 pixel.

Kalo yang bercetak tebal kita besarkan juga ukurannya jadi lebih besar dari yang miring? Bisa, caranya sama.
p b {
  font-size: 40px;
}

Nggak ada batasan berapa "kedalaman" tag HTML yang ingin diubah tampilannya. Contoh di atas hanya sampai pada 2 kedalaman tag. 

..kalo 3 dan seterusnya? tinggal tambahkan saja.

Ingat, untuk mengubah tampilan tag di dalam tag HTML, nggak ada tanda koma di antara selectornya, hanya dipisahkan spasi.

Mengubah style dari class

Mengubah style dari atribute class suatu tag HTML adalah dengan menjadikan nama class itu sebagai selectornya, plus tanda titik (.) di depannya, contoh:
<p class="hitam-putih">Teks ini akan memiliki warna teks putih dengan background hitam..</p>

Maka, kode CSSnya adalah:
.hitam-putih {
  color: white;
  background: black;
}

Contoh lagi, ada 2 tag HTML berbeda, yakni tag <h1> dan <h2>, dimana punya class yang sama tapi kita hanya ingin h1 bergaris bawah (underline).
<h1 class="hitam">Ini berubah hitam backgroundnya</h1>
<h2 class="hitam">Ini nggak berubah hitam backgroundnya</h2>

Maka, kode CSSnya adalah:
h1.hitam {
  background: black;
}

Dengan begitu, meskipun h1 dan h2 punya class yang sama, hanya h1 saja yang akan berubah karena selectornya lebih spesifik ke class h1.

Baca juga ya..
Tutorial CSS untuk Pemula: Cara Memasukkan Kode CSS ke dalam File HTML
Tutorial CSS untuk Pemula: Aturan Penulisan Kode atau Syntax CSS
Foto-Foto Aksi Damai Bela Al-Qur'an 411 Jum'at 4 November 2016 Part 3

Mengubah style dari id

Caranya hampir sama dengan class, bedanya.. class dengan tanda titik (.) sedangkan id dengan tanda pagar (#).

Contohnya, kita ingin mengubah teks h3 menjadi berwarna hijau:
<h3 id="hijau">Ini akan berwarna hijau</h3>

Maka kode CSSnya:
#hijau {
  color: green;
}

Kombinasi dari semuanya

Kita pun dapat mengombinasikan semua cara-cara di atas menjadi 1 selector jika memang ingin diberi style yang sama.

Kita akan coba buat beberapa tag HTML yang memiliki ukuran font yang sama yakni 20 pixel.

Langsung kita praktikkan.

Buat file HTML dulu, simpan dengan nama penggunaan-selectors.html, kodenya:
<!DOCTPYE html>
<html>
  <head>
    <title>Cara penggunaan selector CSS</title>
    <style>
    @import url(penggunaan-selectors.css);
    </style>
  </head>

  <body>
    <h1>
      <b>
        <i>Ini akan menjadi teks tebal dan miring.. ukurannya jadi 20px</i>
      </b>
    </h1>

    <h1>
      <b>Ini akan menjadi teks tebal dan nggak miring.. ukurannya nggak berubah jadi 20px</b>
    </h1>

    <p class="teks">Teks ini nggak akan menjadi 20px</p>
    <p class="teks"><b>Teks ini akan menjadi 20px</b></p>

    <a href="#" id="uhuy">Teks ini akan menjadi 20px</a>
  <body>
</html>

Kode CSSnya kita simpan dengan nama penggunaan-selectors.css.
h1 b i, p.teks b, #uhuy {
  font-size: 20px;
}

Hasilnya seperti ini:

tutorial css untuk pemula

Itulah pembahasan kita kali ini tentang cara penggunaan selector CSS. Gimana? Sudah paham kan?

..jadi sudah lebih familiar kan dengan kode CSS?

Saat mendesain tampilan web, disinilah kita akan banyak menghabiskan waktu. dengan berbagai kombinasi selector kita akan dapat mendesain tampilan web yang bagus.




Tag : Tutorial CSS
0 Komentar untuk "Tutorial CSS untuk Pemula: Cara Penggunaan Selector CSS"