CSS Basic - Sintaks

CSS Basic – Sintaks

      Tak ada komentar pada CSS Basic – Sintaks

CSS ( Cascading Style Sheet ) salah satu bagian terpenting pada website yang terdapat juga sintaks. Jadi, bisa dibilang CSS juga memiliki bahasa pemrogramannya mereka. CSS terdiri dari aturan gaya yang ditafsirkan oleh browser dan kemudian diterapkan pada elemen yang sesuai dalam dokumen. – CSS Basic

Aturan gaya pada CSS terdiri dari:

  1. Selector – yaitu tag HTML tempat style yang akan diterapkan. Hal ini sering kita temukan, seperti: <h1>, <body> atau <table> dan masih banyak lagi.
  2. Property – yaitu jenis atribut tag HTML. Sederhananya, semua atribut HTML diubah menjadi properti CSS. Seperti: warna, border, dll.
  3. Value – Nilai yang ditugaskan ke properti. Misalnya, properti warna bisa menjadi merah atau berupa sintaks #F1F1F1.

Kamu dapat melakukan hal sederhana dalam mebuat sintaks CSS.

CSS Style Rule Sintaks - Bier Pinter

Gambar 1.1 – CSS Style Rule Sintaks – Bier Pinter

Contoh: Kamu dapat menentukan batas tabel dengan mengikuti sintaks dibawah ini.

Disini tabel adalah selector dan border adalah property dan telah diberi value 1px (ukuran dari border / tepi garis) dan solid #C00 (Solid jenis warna yang akan ditampilkan dan Sintaksnya menentukan warna) ini adalah nilai properti tersebut. – CSS Basic

Kamu bisa menentukan penyeleksi dengan berbagai cara sederhana dan mudah untuk dilakukan sesuai keinginan kamu. Kamu bisa menempatkan selector satu per satu guna memudahkan kamu dalam membuat sintaks tersebut.

Pelajari juga: Cara Membuat Logo di Coreldraw X8

Daftar Atribut CSS Yang Dapat Kamu Pelajari

The Type Selectors ( Pemilihan Jenis )

Ini adalah pemilihan yang sama seperti yang kamu lihat diatas. Aku akan memberikan satu lagi contoh untuk memberikan warna pada semua judul level 1 <h1>.

The Universal Selectors

Daripada kamu memilih elemen tipe tertentu dan belum tentu cocok dalam semua kondisi. Pemilihan universal cukup cocok dengan nama tipe elemen seperti dibawah ini.

Aturan ini membuat setiap isi elemen dalam dokumen kamu menjadi warna hitam.

The Descendant Selectors ( Pemilihan Keturunan )

Hal ini berfungsi jika kamu ingin menerapkan aturan gaya ke elemen tertentu hanya jika berada didalam elemen tersebut. Seperti contoh dibawah ini, elemen ini hanya memberikan aturan gaya yang hanya akan berlaku untuk elemen <em> saat berada didalam tag <ul>.  Tanpa kedua tag ini, sintaks tidak dapat berjalan.

The Class Selectors ( Pemilihan Kelas )

Kamu dapat menentukan aturan gaya berdasarkan atribut kelas dari elemen. Semua elemen yang memiliki kelas tersebut akan diformat sesuai dengan aturan yang diterapkan.

Tambahan dalam membuat pemilihan kelas bisa dilakukan seperti cara dibawah. Setiap dokumen yang menggunakan <h1> akan berwarna hitam.

Aturan diatas membuat konten dalam warna hitam hanya elemen <h1> dengan atribut kelas yang disetel menjadi hitam.

Kamu dapat menerapkan lebih dari satu penyeleksi kelas ke elemen yang diberikan. Perhatikan contoh dibawah ini.

The ID Selectors ( ID Pemilih )

Kamu bisa menentukan aturan gaya berdasarkan atribut id dari elemen. Semua elemen yang memiliki id tersebut akan diformat sesuai aturan yang ditentukan.

Aturan ini membuat konten berwarna hitam untuk setiap elemen dengan atribut id diatur menjadi warna hitam. Kamu bisa membuatnya lebih khusus lagi. Misalnya:

Dalam contoh ini, semua judul level 2 <h2> akan ditampilkan menjadi warna hitam saat judul berada pada tag yang memiliki atribut id.

The Child Selectors ( Pemilihan Anak )

Kamu telah melihat seleksi keturunan. Ada satu lagi jenis pemilih, yang sangat mirip dengan keturunan namun memiliki fungsi yang berbeda. Perhatikan contoh dibawah ini.

Aturan ini akan membuat semua paragraf menjadi warna hitam jika mereka menjadi anak langsung dari elemen <body>. Paragraf lain yang dimasukkan kedalam elemen lain seperti <div> atau <td> tidak akan memiliki efek yang sama pada fungsi yang ini.

The Atribute Selectors ( Pemilih Atribut )

Kamu juga dapat menerapkan gaya ke elemen HTML dengan atribut tertentu. Aturan gaya dibawah ini akan sama dengan semua elemen masukkan yang memiliki atribut tipe dengan nilai teks.

Keuntungan dari metode ini adalah elemen <input type =”Submit” /> tidak terpengaruh, dan warnanya hanya diterapkan pada bidang teks yang diinginkan.

Ada pula aturan berikut yang diterapkan dalam pemilihan atribut.

  • p [Lang] – Memilih semua elemen paragraf dengan atribut lang.
  • p [lang = “bp”] – memilih semua elemen paragraf yang atribut lang memiliki nilai persis “bp”.
  • p [lang ~ =”bp”] – Memilih semua elemen pargraf yang atribut lang berisi kata “bp”.
  • p [lang | =”en”] – Memilih semua elemen paragraf yang atribut lang berisi nilai yang persis “en”, atau dimulai dengan “en-“.

Multiple Style Rules ( Aturan Gaya Berganda )

Kamu perlu mendefenisikan beberapa aturan gaya untuk satu elemen. Kamu dapat menentukan aturan ini untuk menggabungkan beberapa properti dan nilai yang sesuai kedalam satu blok seperti yang didefenisikan pada contoh dibawah ini.

Pada sintaks diatas menggambarkan semua pasangan properti dan nilai dipisahkan dengan tanda titik dua ( ; ). Kamu bisa menyimpannya dalam satu baris atau beberapa baris. Tidak ada dampak yang mempengaruhi jika membuat garis, hanya saja membuat susunan sintaks menjadi lebih rapi dan bagus dilihat. Aku akan memberikan reference lainnya, seperti sintaks “letter-spacing” pada artikel baru nanti.

The Atribute Selectors ( Pengelompokkan Pemilih )

Kamu bisa menerapkan gaya pada banyak penyeleksi jika kamu menginginkannya. Pisahkan saja dengan tanda koma, seperti contoh yang telah aku berikan dibawah ini.

Ini mendefenisikan aturan gaya akan berlaku untuk elemen h1, h2, dan h3. Urutan daftar tidaklah relevan. Semua elemen dalam pemilih akan memiliki deklarasi yang sesuai diterapkan padanya.

Kamu juga dapat menggabungkan berbagai penyeleksi id bersama seperti yang ditunjukkan dibwah ini.

Demikianlah materi CSS Basic – Sintaks yang sudah dijelaskan. Pada dasarnya, semua tampilan web yang menarik kamu lihat itu semua terbentuk dari semua sintaks CSS.

Watch on Youtube: Cara Membuat Tic Tac Toe di Visual Studio 2017

Tinggalkan Balasan