cara penggunaan selector CSS

Luthfi blc 9/04/2018
A. Pendahuluan

                                                    Assalammualikum wr.wb 

Oke bertemu lagi dengan saya kali in saya akan mensharing tentang cara penggunaan selector CSS 
simak baik baik ya.



B. Latar belakang

        Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu tag di dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p, atau mencari seluruh tag h1 yang memiliki atribut class=judul.

C. Maksud dan tujuan

     ingin tahu cara penggunaan selector CSS

D. waktu pelaksanaan

             2 jam

E. pembahasan

   

Cara Penggunaan Selector CSS

Pada tutorial CSS sebelumnya, kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tidak hanya berdiri sendiri, namun dapat digabung menjadi sebuah selector yang lebih spesifik.
CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menjadi sebuah selector gabungan, misalnya kita butuh selector untuk mencari seluruh tag <em> yang berapa di dalam tag<h1>, atau seluruh tag <h1> yang didalamnya terdapat tag <a> dengan class “judul”.
Tujuan pertama kita, adalah:
1. Membuat seluruh tag header <h2> berwarna biru
Karena kita menginginkan seluruh tag berwarna biru, maka tinggal menggunakan CSS Tag Selector. Inputkan kode CSS berikut diantara tag <style> dan </style> pada bagian head:
1
2
3
h2 {
   color: blue;
}
Tujuan kedua adalah :
2. Membuat seluruh tag header <h3> juga berwarna biru
Untuk keperluan ini, kita tinggal menambahkan kode CSS seperti contoh <h2> sebelumnya, sebagai berikut:
1
2
3
4
5
6
h2 {
   color: blue;
}
h3 {
   color: blue;
}
Namun CSS memiliki cara yang lebih efisien jika yang kita inginkan adalah style yang sama untuk kedua tag. Kita bisa menggabungkan kode CSS diatas menjadi:
1
2
3
h2 , h3 {
        color: blue;
}
Tanda koma (“,”) sebagai pemisah menginstruksikan kepada browser bahwa kedua tag akan berwarna biru. Tidak ada batasan seberapa banyak selector yang bisa digunakan. Katakan kita ingin seluruh tag header dari <h1> sampai <h6> bewarna biru, maka kode CSSnya adalah:
1
2
3
h1 , h2, h3 , h4, h5 , h6{
    color: blue;
}
Tujuan ketiga :
3. Seluruh tag <strong> yang berada di dalam tag <p> berwarna merah
Jika yang kita maksud adalah seluruh tag <strong> dimanapun tag tersebut berada, maka kode CSSnya cukup sebagai berikut:
1
2
3
strong {
       color:red;
}
Namun kode CSS tersebut akan membuat seluruh tag <strong> dimanapun, termasuk tag <strong> yang berada di dalam tag <h1> akan berwarna merah. Sehingga, jika ditambahkan syarat hanya untuk tag <strong>yang berada di dalam tag <p>, maka kita harus menulis selector CSS menjadi:
1
2
3
p strong {
     color:red;
}
Maksud dari kode “p strong” adalah seluruh tag <strong> yang berada di dalam tag <p>. perhatikan bahwa kedua tag dipisahkan dengan tanda spasi. (Selector: p strong, berbeda pengertiannya dengan selector: p, strong)
Untuk contoh extreme, katakan kita memiliki halaman HTML yang cukup rumit, sehingga kita menginginkan warna merah untuk “seluruh tag <i> yang berada di dalam tag <span>, dimana tag <span> tersebut harus berada di dalam tag <h2>”, maka kode CSSnya adalah:
1
2
3
h2 span i {
      color:red;
}
Yang perlu diingat dalam urutan ini adalah: tag yang dikenai style hanya tag yang paling terakhir, dimana dalam contoh diatas, hanya tag <i> saja yang akan bewarna merah.
Melanjutkan pembahasan selector, untuk ujuan keempat kita:
4. Seluruh tag <h2> yang memiliki class judul, dan seluruh tag yang memiliki class paragraf menjadi italic (huruf miring)
Prinsip dari penggabungan ini sama dengan tujuan 1 sampai 3 sebelumnya, cuma kali ini kita harus menggunakan class selector. Kode CSS untuk keperluan itu adalah:
1
2
3
h2.judul , .paragraf {
      font-style: italic;
}
h2.judul diperlukan untuk mencari seluruh tag h2 dengan class judul, sedangkan .paragrafdigunakan untuk mencari seluruh tag yang memiliki class paragraf, apapun tag tersebut.
Sebagai tujuan terakhir dari tutorial cara penggunaan selector css ini:
5. Ubah ukuran text menjadi 14pt untuk tag yang memiliki id “belajar_html”, tag p dengan id “belajar_css” dan seluruh tag h3 yang memiliki class “subheader”
Tujuan diatas terkesan rumit, namun jika anda telah paham tujuan 1 sampai dengan 4 sebelumnya, maka kode CSS berikut akan menjelaskannya:
1
2
3
#belajar_html, p#belajar_css, h3.subheader {
font-size:14pt;
}
Sebagai penutup, hasil akhir dari halaman HTML belajar_css.html kita adalah sebagai berikut
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
    <head>
    <title>Belajar CSS</title>
  
    <style type="text/css">
        h2 , h3{
          color: blue;
          }
        p strong {
          color:red;
          }
        h2.judul , .paragraf {
          font-style: italic;
          }
        #belajar_html, p#belajar_css, h3.subheader {
          font-size:14pt;
          }
     </style>
</head>
<body>
  <h2 class="judul">Belajar CSS</h2>
    <p> Ini <strong>adalah</strong> sebuah <em>paragraf</em> </p>
  
    <p id="belajar_html" class="paragraf" >Saya sedang belajar HTML dari
    <a href="https://www.duniailkom.com" target="_blank">Duniailkom</a>
    akan terbuka pada tab baru</p>
  
    <p id="belajar_css" class="paragraf">
    Saya sedang belajar CSS, mohon jangan diganggu</p>
  
    <br />
  
    <h3 class="judul subheader">Daftar Belanjaan</h3>
    <ol>
          <li><em>Minyak Goreng</em></li>
          <li>Sabun Mandi</li>
          <li>Deterjen</li>
          <li>Shampoo</li>
          <li>Obat Nyamuk</li>
    </ol>
 </body>
</html>
F.  Alat dan bahan 
     -laptop
     -charger laptop
     -koneksi internet
G. referensi
H. penutup 
  oke sekian dari saya bila ada kesalahan saya mintamaaf , semoga bermanfaat
                                                               Wassalamualaikum wr.wb



    
Tags:

Post a Comment

0 Comments

silahkan berkomentar tentang template ini