Senin, 10 April 2017

Belajar CSS Dasar Bagian 7 – Selector Basic

     Assalamualaikum Wr. Wb. Selamat datang kembali sahabat lupacode semua di blog Lupa Code. Masih bersama saya selaku admin dari blog lupacode. Pada hari kemarin kita telah membahas mengenai Belajar CSS DasarBagian 6 – Background Bagi sahabat lupacode yang baru saja gabung disini atau baru masuk ke artikel ini, saya sarankan untuk mempelajari pembahasan materi dari yang pertama agar sahabat paham maksud dari kelanjutan pembahasan yang selanjutnya. Atau sahabat bisa langsung mengunjungi halaman Daftar isi pada blog ini.

Belajar CSS Dasar Bagian 7 – Selector Basic

       Pada malam hari yang sedang hujan ini, saya akan melanjutkan pembahasan tutorial css dasar selanjutnya yaitu kita akan belajar mengenai selector. Pada pembahasan sebelumnya sebetulnya kita telah mencoba selector pada css, namun pada pembahsan materi kali ini kita aka coba lihat lebih dalam lagi tentang bagaimana penggunaan selector dasarnya.
      Kita lihat dulu dari teori nya, selector itu “ digunakan pada css untuk mengenali sebuah elemen HTML yang akan diberi style “  
     Pada materi sebelumnya kita sudah menggunakan h1, lalu body. Jadi kalau saya tuliskan body { color: blue; } itu artinya saya akan mengubah semua warna  tulisan dari tag-tag yang ada di dalam tag body. Seperti itu kira-kira yah membacanya. Sekarang kita lihat, kita bisa menggunakan apa saja di dalam selector itu.

Selector


Elemen Html
Id
Class
Complex selector

       Ada beberapa hal, yang pertama kita bisa menggunakan elemen html, dan ini yang sudah kita coba pada materi sebelumnya. Lalu nanti juga kita bisa punya selector sendiri buatan kita sendiri dengan menggunakan tag id atau class. Lalu nanti ada lagi yang disebut complex selector dimana disitu selector sudah mulai panjang dan kompleks. Yang akan kita bahas pada materi kali ini adalah yang tiga pertama saja dulu.
      Kita akan langsung saja menggunakannya, dan disini saya sudah membuatkan sebuah file html sederhana yang didalamya ada h1, h2, lalu ada dua buah list, kemudian ada dua buah paragraf. Seperti ini contoh syntax file html nya :

<!DOCTYPE html>
<html>
<head>
            <title>Selector CSS</title>
            <link rel="stylesheet" type="text/css" href="style.css">
            </style>
</head>
<body>
<h1>Hello World</h1>
            <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                        <li><a href="#">Link 5</a></li>
            </ul>

            <ol>
                        <li><a href="#">Link 6</a></li>
                        <li><a href="#">Link 7</a></li>
                        <li><a href="#">Link 8</a></li>
                        <li><a href="#">Link 9</a></li>
                        <li><a href="#">Link 10</a></li>
            </ol>

<h2>Judul Artikel</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

       Sekarang kita akan coba menggunakan selector – selector yang saya sebutkan di atas, ada elemen html, id, dan class. Contohnya saya menuliskan seperti ini

Body {
            Font-family: arial;
          }

      Maka ini artinya seluruh tulisan yang ada di dalam body tipe tulisannya akan berubah menjadi arial. Ini adalah salah satu penggunaan selector tipe tag html. Oke selanjutnya jika kita ingin memberikan warna pada h1, masih  ingat kan caranya ? kita hanya perlu menuliskan seperti ini

h1 {
            color: green;
      }

     Jadi warnanya akan berubah menjadi hijau. Misalkan saya ingin memberi warna pada h2 juga dengan warna yang sama contohnya seprti ini

h2 {
            color: green;
      }

       Tapi di css jika kalian punya dua buah elemen dan ingin diberikan style yang sama, misalkan h1 hijau, h2 hijau atau paragraf juga hijau, kalian tidak perlu menuliskan satu persatu selector dan property nya seperti di atas, jadi kalian cukup menuliskan satu property atau kita gunakan grouping dengan menggunakan separator koma seperti ini

h1, h2 {
            color: green;
            }

     Jadi koma ini bisa diartikan dengan dan, jadi seperti ini membacanya, h1 dan h2 tolong berikan warna green. Kalu misalkan untuk h2 saya ingin berikan style font yang berbeda saya tuliskan lagi seperti ini

h2 {
            font-style: italic;
      }

      Jadi kalau untuk style yang sama kita bisa lakukan grouping dengan cara memberikan tanda koma. Jadi ini masih dalam type elemen html. Jika saya ingin memberikan warna tulisan yang berbeda untuk <ul> dan <ol> misalnya, yang ul saya ingin warna orange sedangkan untuk yang ol saya ingin berikan warna merah. Kita gunakan separator spasi dalam hal ini, kalau tadi kita berikan separator koma, sekarang kita berikan separator spasi kalau untuk yang ini. Contoh nya penulisan nya adalah seperti ini

Ul li a {
            Color: orange;
           }


     Jadi kalian bacanya gini, dari kanan ke kiri. css tolong pilihkan saya tag a yang ada didalam <li> dan ada di dalam <ul> “ begitu bacanya J. Jadi spasi itu artinya di dalam. Dan kalau ol sekarang kita tinggal tuliskan


Ol li a {
            Color: red;


           }

    Kita lihat dulu dan hasilnya akan menjadi seperti ini

Belajar CSS Dasar Bagian 7 – Selector Basic 1

     Oke jadi sekarang a yang di dalam ul menjadi orange dan a yang di dalam ol menjadi red atau merah. Jadi itu cara lain di dalam menggunakan selector, jadi kita bisa tulisakan elemen html nya, kalau memiliki property yang sama kalian bisa menggunakan koma, dan jika lebih spesifik kalian gunakan spasi. Selanjutnya saya ingin memberikan kedua warna yang berbeda pada parag nya. Sama saja seperti <ul> <ol> paragraf pertama saya ingin warnanya orange dan paragraf kedua saya ingin warnanya merah. Gimana kira – kira ?
Jika saya tuliskan seperti ini
P { color: orange;}
    Maka dua-duanya akan berubah warna tulisan nya menjadi orange

Belajar CSS Dasar Bagian 7 – Selector Basic 2
Kemudian jika saya tambahkan lagi seperti ini
P { color: red; }
Maka dua-duanya akan berubah menjadi warna merah

Belajar CSS Dasar Bagian 7 – Selector Basic 3

     Nah gimana caranya agar kedua paragraf tersebut bisa menjadi dua warna seperti yang saya inginkan ? Kita tidak bisa menggunakan spasi tadi, karna kedua paragraf ini tidak berada di dalam sesuatu yang berbeda seperti <ul> dan <ol> jadi mau ga mau kita harus berikan dia selector khusus. Jadi kita harus bikin sendiri selector nya. Jadi selector khusus itu ada dua, ada id dan ada class.  Jadi misalkan didalam paragrafnya saya akan berikan id seperti ini
<p id=”p1”>
Lalu paragraf yang kedua saya akan kasih class seperti ini
<p class=”p2”>

Jadi nama class dan id nya boleh apa saja bebas, tinggal nanti kalian di dalam css nya kalian tulis seperti ini. Untuk id kalian tulis dengan crass atau tanda pagar # kemudian nama id nya
#p1 { color: orange; }
Jadi membacanya seperti ini “ css tolong carikan saya elemen yang mempunyai id p1 lalu ganti warnanya dengan orange ” seperti itu kira-kira membacanya.

Kemudian yang kedua atau paragraf yang ke dua yaitu class. Kalau class gunakan titik.
.p2 { color: red; }
Sehingga paragraf keduanya akan berubah menjadi merah

Belajar CSS Dasar Bagian 7 – Selector Basic 4

      Oke baik jadi itu tadi pembahasan singkat tentang selector dasar dan kalian bisa coba – coba kombinasikan mau menggunakan yang mana, mau yang elemen html, id ataupun class. Sekali lagi sebisa mungkin gunaka element html kalau ga bisa gunakan class dan jangan gunakan id,.
      Baiklah sampai sini untuk pembasahan materi kali ini yaitu mengenai Belajar CSS Dasar Bagian 7 – Selector Basic kemudian selanjutnya kita akan teruskan kedalam materi berikutnya yaitu BelajarCSS Dasar Bagian 8  – Pseudo Class

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon