Cara menggunakan div id in css

Setelah membahas jenis-jenis selector di dalam CSS, dalam tutorial kali ini kita akan membahas Cara penggunaan selector CSS.


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 yang berapa di dalam tag

, atau seluruh tag

yang didalamnya terdapat tag dengan class “judul”.

Agar mudah memahami cara penggabungan selector CSS ini kita akan mempersiapkan sebuah halaman HTML dummy untuk bahan pembelajaran. Silahkan ketik kode HTML berikut, dan save sebagai belajar_css.html



    
    Belajar CSS

    



  

Belajar CSS

Ini adalah sebuah paragraf

Saya sedang belajar HTML dari Duniailkom akan terbuka pada tab baru

Saya sedang belajar CSS, mohon jangan diganggu


Daftar Belanjaan

  1. Minyak Goreng
  2. Sabun Mandi
  3. Deterjen
  4. Shampoo
  5. Obat Nyamuk

Halaman HTML diatas merupakan halaman HTML sederhana yang terdiri dari tag header (

), paragraf(

), dan list (

    ). Jika anda belum memahami tag-tag HTML diatas, keseluruhan tag ini telah kita bahas pada Tutorial Belajar HTML.

    Perhatikan juga pada bagian dari belajar_css.html tersebut saya juga menyediakan tag pada bagian head:

    h2 {
       color: blue;
       }

    Tujuan kedua adalah :

    2. Membuat seluruh tag header

    juga berwarna biru

    Untuk keperluan ini, kita tinggal menambahkan kode CSS seperti contoh

    sebelumnya, sebagai berikut:

    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:

    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

    sampai
    bewarna biru, maka kode CSSnya adalah:

    h2 , h2, h3 , h4, h5 , h6{
        color: blue;
        }

    Tujuan ketiga :

    3. Seluruh tag yang berada di dalam tag

    berwarna merah

    Jika yang kita maksud adalah seluruh tag dimanapun tag tersebut berada, maka kode CSSnya cukup sebagai berikut:

    strong {
           color:red;
           }

    Namun kode CSS tersebut akan membuat seluruh tag <strong> dimanapun, termasuk tag <strong> yang berada di dalam tag <h2> akan berwarna merah. Sehingga, jika ditambahkan syarat hanya untuk tag <strong>yang berada di dalam tag

    , maka kita harus menulis selector CSS menjadi:

    p strong {
         color:red;
         }

    Maksud dari kode “p strong” adalah seluruh tag yang berada di dalam tag

    . 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 yang berada di dalam tag , dimana tag tersebut harus berada di dalam tag

    ”, maka kode CSSnya adalah:

    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 saja yang akan bewarna merah.

    Melanjutkan pembahasan selector, untuk ujuan keempat kita:

    4. Seluruh tag

    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:

    h2.judul , .paragraf {
          font-style: italic;
          }

    h2.judul diperlukan untuk mencari seluruh tag h2 dengan class judul, sedangkan .paragraf digunakan 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:

    #belajar_html, p#belajar_css, h3.subheader {
           font-size:14pt;
           }

    Sebagai penutup, hasil akhir dari halaman HTML belajar_css.html kita adalah sebagai berikut

    
    
        
        Belajar CSS
     
        
    
    
      

    Belajar CSS

       

    Ini adalah sebuah paragraf

         

    Saya sedang belajar HTML dari     Duniailkom     akan terbuka pada tab baru

         

        Saya sedang belajar CSS, mohon jangan diganggu

         
         

    Daftar Belanjaan

       
               
    1. Minyak Goreng
    2.          
    3. Sabun Mandi
    4.          
    5. Deterjen
    6.          
    7. Shampoo
    8.          
    9. Obat Nyamuk
    10.    
     

    Cara menggunakan div id in css

    Sampai disini setidaknya anda sudah bisa membaca maksud dari sebagian besar selector dalam CSS. Sebagai contoh, anda tentunya tidak bingung membaca kode CSS berikut:

    table#daftar_hadir, table#daftar_kuliah {
        font-size:14pt;
        }
    
    div.header, div.footer, div#main_menu {
        width:960px;
        }

    Terlepas dari maksud property CSS seperti font-size:14pt; dan width:960px; (yang akan kita pelajari nantinya), contoh selector CSS yang kedua merupakan selector yang sering digunakan untuk manipulasi tag div dalam merancang layout desain web, nantikan pembahasannya pada tutorial CSS lanjutan di duniailkom.

    Melanjutkan pembahasan mengenai tutorial CSS, dalam tutorial belajar CSS berikutnya, kita akan mempelajari Urutan Prioritas Selector pada CSS atau dikenal dengan istilah Cascading.


    eBook CSS Uncover Duniailkom

    Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

    Div id untuk apa?

    Fungsi div pada HTML biasanya untuk mengelompokkan elemen atau tag-tag agar menjadi suatu grup. Tag div ini juga sering digunakan untuk mendefinisikan id atau class dari css. Fungsi div pada HTML lainnya yang sering digunakan oleh para programmer adalah untuk membatasi bagian satu dengan bagian yang lain.

    Apa bedanya class dan ID?

    Perbedaan dari class dan id adalah class di panggil pada css atau javascript dengan menggunakan tanda titik “.”, dan id di panggil pada css atau javascript dengan tanda pagar “#”, ada kelebihan di sini untuk class, yaitu class dapat di berikan pada banyak element html dan dapat di panggil sekaligus, sedangkan id hanya ...

    Apa fungsi dari ID Selector CSS?

    ID Selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. Dalam penggunaannya, ID selector diawali dengan tanda pagar (#) atau hash. Contoh di dalam css: #intro {color: blue} .

    Apa fungsi class pada CSS?

    Class adalah style dari CSS yang bisa digunakan untuk beberapa elemen, dengan adanya class ini memungkinkan anda untuk merubah beberapa objek pada html dengan settingan yang sama, dengan menuliskan satu perintah saja, class diawali dengan tanda titik (.).