Tempat belajar blogspot

Apa itu CSS Syntax dan Selector


Apa itu CSS SYNTAX SELECTOR

CSS (Cascading Style Sheet) sudah dijelaskan mengenai pengertian CSS pada artikel sebelumnya Apa itu CSS, namun pada artikel yang sekarang dengan judul CSS Syntax dan Selector akan dibahas mengenai cara dan aturan penulisan kode CSS tersebut agar bisa berjalan bersama kode HTML. Sebelum kita membaca lebih lanjut mengenai cara dan aturan penulisan kode CSS, saya ingin memberitahu bahwa proses pemahaman web design setiap individu berbeda - beda dan pastinya hanya ada satu kunci yaitu tetap berusaha mencoba mempraktekkan apa yang ingin kita pahami. Saya sebagai penulis artikel ini tidak menyarankan untuk harus menjadikan artikel ini sebagai refrensi satu - satunya, karena pasti ada banyak refrensi seputar pemahaman CSS dari website atau blog lainnya dan cara yang bijak untuk mempelajari seputar CSS ini tentunya dengan mencari tahu dari sumber refrensi lainnya juga.

Susunan penulisan CSS

Penulisan kode CSS tidak terlalu sulit untuk dimengerti dengan catatan kita ada kemauan untuk menulis secara manual, karena proses penulisan kode secara manual atau dengan kata lain bukan copy paste tentunya secara tidak langsung membuat kita lebih mudah untuk mengingat susunan penulisan kode - kode CSS tersebut. Berikut ada sedikit tips untuk mempermudah belajar mengenai penulisan CSS, perhatikan hal yang penting dan pasti terdapat di dalam penulisan kode CSS adalah selektor dan deklarasi. Pengertian selektor disini adalah sebuah kode yang digunakan untuk menjelaskan tag HTML yang akan diberi deklarasi CSS, sedangkan pengertian deklarasi adalah sekumpulan kode css yang terdiri dari property dan value dari property itu sendiri.
Lebih jelasnya bisa dilihat pada contoh gambar dibawah ini.

Contoh Susunan Penulisan CSS


Penjelasan gambar diatas

Kode pada contoh gambar di atas berguna untuk mengubah warna text dan ukuran text pada tag h1, bisa dilihat pada deklarasi terdapat property color yang berguna untuk menentukan warna text dengan kode warna hex dan property font-size untuk menentukan ukuran text dengan satuan pixel.

Selektor CSS

Pada bagian selektor CSS ini ada hal yang sangat penting juga untuk menuliskan selektor, sebelumnya kita harus mengetahui selektor yang digunakan
untuk menyeleksi elemen HTML, HTML ID, dan HTML Class tidaklah sama.
  • Selektor elemen HTML bisa dituliskan sesuai dengan nama elemen tersebut.
    Sebagai contoh untuk selektor h1, h2, dan a
    <style>
    h1 {color: #000000; font-family: verdana; text-decoration: underline;}
    h2 {color: #000000; font-family: arial; font-style: italic;}
    a {color: #4286f4; text-decoration: none; font-weight: bold;}
    </style>
  • Selektor ID bisa dituliskan sesuai dengan nama ID yang bersangkutan dan disertai dengan tanda "#".
    Sebagai contoh untuk selektor <div id="kotak-1"></div>, <div id="kotak-2"></div>, <div id="kotak-3"></div>
    <style>
    #kotak-1 {background-color: #6c6c6d; border: solid #7d42f4; width: 100px; height: 100px; display: inline-block;}
    #kotak-2 {background-color: #7d42f4; border: solid #4286f4; width: 100px; height: 100px; display: inline-block;}
    #kotak-3 {background-color: #4286f4; border: solid #6c6c6d; width: 100px; height: 100px; display: inline-block;}
    </style>
  • Selektor Class bisa dituliskan sesuai dengan nama class yang bersangkutan dan disertai dengan tanda ". atau titik".
    Sebagai contoh untuk selektor <div class="kumpulan-kotak"></div>
    <style>
    .kumpulan-kotak {width: 100%; height: 300px; background-color: #000000}
    </style>

Contoh sederhana

Setelah kita membaca mengenai selektor di atas berikut saya buatkan sebuah contoh penggunaan CSS untuk kode HTML.
coba copy kode dibawah ini atau tulis secara manual di situs Real-time HTML Editor

<!DOCTYPE html>
<html>
<head>
<style>
.kumpulan-kotak {width: 100%; height: 300px; background-color: #000000}
#kotak-1 {background-color: #6c6c6d; border: solid #7d42f4; width: 100px; height: 100px; display: inline-block; text-align: center;}
#kotak-2 {background-color: #7d42f4; border: solid #4286f4; width: 100px; height: 100px; display: inline-block; text-align: center;}
#kotak-3 {background-color: #4286f4; border: solid #6c6c6d; width: 100px; height: 100px; display: inline-block; text-align: center;}
</style>
</head>
<body>
<div class="kumpulan-kotak">
<div id="kotak-1">Kotak 1</div>
<div id="kotak-2">Kotak 2</div>
<div id="kotak-3">Kotak 3</div>
</div>
</body>
</html>

Setelah selesai copy paste atau menulis secara manual, coba perhatikan sesuai dengan kode CSS yang dituliskan maka kotak 1 akan memiliki warna background grey atau abu - abu dengan border atau garis luar berwarna ungu, kotak 2 akan memiliki warna background ungu dengan border atau garis luar berwarna biru, dan kotak 3 akan memiliki warna background biru dengan border atau garis luar berwarna grey atau abu - abu.

Contoh hasil penulisan kode



Pengaruh space atau spasi pada selektor CSS

Penulisan selektor dengan spasi atau tanpa spasi wajib diperhatikan karena akan memiliki efek yang berbeda pada tampilan HTML tersebut. Coba perhatikan contoh gambar dibawah ini mengenai perbedaan spasi pada selektor CSS.

Contoh Selector CSS

Penjelasan gambar

Kita bisa melihat perbedaan selektor yang menggunakan spasi dan tanpa menggunakan spasi pada HTML yang di beri background warna pink, tentunya bisa dibayangkan efek CSS tersebut akan berbeda hanya dikarenakan penggunaan spasi.

Contoh hasil penulisan kode



Sampai disini dulu artikel mengenai CSS Syntax dan Selector, semoga artikel ini dapat membantu kita yang ingin belajar mempercantik tampilan halaman blogspot.
Terima kasih.

Artikel ini ditulis oleh :
Perbloggeran

17 comments:

  1. wahhh bisa nambah ilmu ni gan.. nice post gan

    ReplyDelete
    Replies
    1. Iya gan terima kasih ya dah berkunjung dan membaca artikel saya seputar CSS Syntax dan Selector gan..

      Delete
  2. makasih gan artikelnya bagus banget buat Belajar CSS nih

    ReplyDelete
    Replies
    1. Hehehe iya gan terima kasih, jgn sungkan - sungkan bertanya apabila ada yang ingin ditanyakan gan..

      Delete
  3. Masih belum ngerti sama css 😩,nice info gan ane bookmark

    ReplyDelete
    Replies
    1. Ok gan dengan senang hati bisa di bookmark gan, hehehe saya berusaha bikin tulisan - tulisan seputar blogging yang mudah dimengerti koq ntar nya..

      Delete
  4. cara paling ampuh agar cepat menguasai gy mna gan.??

    ReplyDelete
    Replies
    1. Menurut saya cara paling ampuh adalah dengan mencoba menulis secara manual gan, mungkin klo agan ingin bisa mengetahui efek penulisan CSS bisa menggunakan inspect halaman dengan catatan menggunakan desktop browser gan... Pasti perlu waktu juga untuk mendalami CSS tapi akan lebih cepat apabila kita mencoba secara manual gan..

      Delete
  5. Wah nambah ilmu nih, kebetulan ane juga lagi belajar CSS nih... Membantu banget gan

    ReplyDelete
  6. sebenarnya mudah kalau kita mau belajar dengan sungguh-sungguh.

    ReplyDelete
  7. Thanks infonya gan, nambah ilmu saya tntang CSS

    ReplyDelete
  8. Agak ribet sih.. Tapi tak coba dlu. Trims gan

    ReplyDelete
  9. makasih gan infonya :D lumayan nambah ilmu :D

    ReplyDelete
  10. Setelah membaca dan memahami dengan seksama, saya jadi tertarik untuk membuat design tampilan blog sendiri. di blog ini saya bisa mudah memahami pengarahan yang penulis sampaikan. (y)

    ReplyDelete

1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link.

Featured Post

Apa itu CSS Syntax dan Selector

CSS ( Cascading Style Sheet ) sudah dijelaskan mengenai pengertian CSS pada artikel sebelumnya Apa itu CSS , namun pada artikel yang sekara...

Popular Posts