Jenis – Jenis Selector Pada CSS - RESKY NOVALIA ~ BLC TELKOM

Assalamualaikum wr.wb. Sebelum membahas mengenai selector, ada baiknya kita mengetahui lebih dahulu Macam-macam penggunaan CSS. Untuk dapat menggunakan css secara maksimal, tentunya harus tau jenis-jenis selector, berikut cara penggunaanya. Jenis selector seperti ini hanya berlaku untuk External dan Embedded style sheet.

Pengenalan Dasar

Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.
Contoh penulisan kode css :

Body {background-color: white;}

‘Body’ adalah Selektor, ‘{ }’ adalah deklarasi, ‘background-color’ adalah properti dan ‘white’ adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ‘Body’ sebuah halaman web.

Contoh penulisan kode css :

Body {background-color: white;}

Cara-cara penggunaan CSS

Untuk latihan penggunaan CSS, langkah pertama yang harus anda lakukan adalah membuat file dengan menggunakan Software kode editor seperti Notepad, lalu namai file dengan format ‘.html’. Lalu praktekkanlah cara-cara berikut ini. Ada 3 cara untuk menggunakan kode CSS di situs Anda.

Pengertian

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).

Jenis - jenis Selector pada CSS :

* Selector bebas

Cara penggunaan selector bebas mirip seperti penggunaan tag di HTML, hanya saja selector menggunakan nama yang bisa kita atur sendiri sesuai keinginan. Bentuk umunya seperti ini :

<style type=”text/css”>

testing{ text-decoration: underline; color:green; }

</style>

elector dengan classCSS memperbolehkan kita untuk 
memakai class, dimana didalam sebuah class kita dapat mengelompokkan 
elemen-elemen dan menerapkan aturan CSS didalamnya. Bingung dengan 
penjelasan ?. Sama, saya juga. Oke, biar ngga’ sama-sama bingung, 
langung liat contoh berikut :

<style type=”text/css”>

.toplink { text-align : right; }

</style>

Nah, berbeda dengan selector pertama, dalam dokumen penulisannya jadi seperti ini :

<h2 class=”toplink”>Class Heading 2 </h2>

Heading
 2 ( h2 ) di dalam kode di atas bukan suatu harga mati, h2 bisa saja 
diganti dengan tag-tag lain sesuai keinginan. Tergantung tag mana yang 
akan di atur untuk menggunakan style toplink dalam css di atas.

* Selector id

Berikut
 ada namanya selector id. Kalau selector dengan class diawali dengan 
titik, selector id menggunakan tanda pagar. Contoh penulisannya seperti 
ini :

<style type=”text/css”>

#title { font-size: 10px; text-transform:uppercase; color: red; }

</style>

Penulisannya
 dalam dokumen tidak jauh berbeda dengan selector class. Hanya saja 
tulisana “class” kita ganti dengan “id”. Contoh :

<p id=”title”>Tulisan ini berukuran 10, kapital dan berwarna merah</p>