CSS selector

Andhika Ramaditya November 15, 2022

 🎓Selector CSS


    Hai para sobat koding, bagaimana kabarnya? Saya doakan semoga kalian baik-baik saja. Pada kesempatan ini saya akan memberikan sedikit penjelasan tentang materi  CSS yang sudah dipelajari di Pembelajaran Sekolah saya. Oke mari kita mulai pembahasannya

📃Penjelasan CSS

    CSS atau Cascading Style Sheet adalah bahasa yang digunakan untuk menentukan tampilan pada website yang anda buat. Jika dengan HTML anda membuat sebuah struktur atau isi, di CSS inilah kalian akan menghias struktur yang telah kalian berikan. Dengan CSS kita dapat mengatur berbagai jenis font, warna tulisan, dan latar belakang halaman. Dengan adanya CSS dapat memudahkan kita dan membantu kita dalam membuat sebuah website yang bagus dan rapi.
    Selain mempercantik halaman CSS juga memiliki fungsi lain, seperti:
  • Mempercepay Loading halaman web
  • Memudahkan Pengelolaan kode
  • Menawarkan lebih banyak variasi tampilan
  • Membuat website tampil rapi di semua ukuran layar

📃Type Selector Pada CSS

    Type Selector adalah sebuah fungsi untuk memilih tag elemen HTML dalam dokumen yang telah kita buat. Type Selector sendiri memiliki beberapa macam diantaranya ialah

    ✔️Syntaks

    memberi style pada dokumen html berdasarkan tag / element tertentu, contoh: p {color: green} yang artinya, element <p>...</p> akan memiliki teks berwarna hijau.
Berikut contoh cara mendeklarasikan Type selector menggunakan syntax
Cont {

Element {
Property: Value; /* Deklarasi CSS */
}

Contoh penggunaan

h1 {
font-family: Georgia, serif;
}
section {
font-family: Helvetica, Arial, sans-serif;
}
p {
color: red;
}


Contoh penggunaan lengkap

<html lang="id">
<head>
  <meta charset="UTF-8" />
  <title>Tutorial Type Selector Bahasa Indonesia</title>
  <style>
    h2 {color: tomato}
    p {color: #555}
  </style>
</head>
<body>
  <h2>Tutorial Type Selector</h2>
  <p>
      Type Selector disebut juga <em>tag selector</em> atau <strong>Element Selector</strong> adalah selector paling sederhana untuk memberi style berdasarkan Element/tag tertentu.
  </p>
</body>
</html>

    ✔️ID selector

    Tipe selector ini menggunakan sebuah atribut yang bernama id. Atribut ini memilih elemen tertentu dari sebuah tag pada HTML
Catatan: Atribut id adalah atribut unik pada halaman untuk penggunaannya
berikut contoh penggunaan Selector id
#div-container{
    color:blue;
    Background-color: grey;
}

    ✔️Selector Class

    Tipe ini sama dengan id yaitu menambahkan atribut pada elemen HTML tertentu. namu pada class tidak memiliki sifat unik yang artinya 1 class bisa diterapkan di lebih dari 1 elemen.
Contoh penggunaan Selector class

.paragraph-class {
    color: white;
    font-family: monospace;
    background color: purple;
}

    ✔️Universal Selector

    Universal Selector di CSS digunakan untuk memilih semua elemen dalam dokumen HTML. Ini juga termaksud elemen lain yang bersifat child
contoh
* {
  color: white;
  background-color: black;
}

    ✔️CSS Attribute Selector

    CSS Atribute Selector adalah selector yang memungkinkan pengguna untuk memilih sebuah elemen yang memiliki atribut atau nilai tertentu. pemilihan [attribute] digunakan untuk memilih HTML element dengan menggunakan atribut tertentu
Contoh penggunaannya:

a[target] {
  background-col
}

    📃Descendant dan Child Selector

   📖Child Selector adalah selector yang digunakan untuk mencocokkan semua elemen yang merupakan anak dari elemen tertentu. Ini memberikan hubungan antara dua elemen. Elemen> pemilih elemen memilih elemen-elemen yang merupakan anak-anak dari induk tertentu. Operan di sebelah kiri > adalah induk dan operan di sebelah kanan adalah elemen anak-anak.     
    Syntax

element > element {
    // CSS Property
}


    📖Descendant Selector adalah selector yang sigunakan untuk memilih semua elemen yang merupakan anak dari elemen (bukan elemen tertentu). selector ini memilih elemen di dalam elemen yaitu menggabungkan dua pemilih sedemikian rupa sehingga elemen yang cocok dengan pemilih kedua dipilih jika mereka memiliki elemen leluhur yang cocok dengan pemilih pertama 
`Syntax

Element {
Property: Value;  /* Deklarasi CSS */
}


    Contoh Pemggunaan

        🎈Child Selector
    


        🎈Descendant Selector
    


Andhika Ramaditya

Diposting oleh Andhika Ramaditya

Posting Komentar

0 Komentar