Substansi:
- Apa itu css, siapa penemunya dan bagaimana cara menggunakannya?
- Selektor CSS
CSS Fundamentals
1. Apa itu css, siapa penemunya dan bagaimana cara menggunakannya?
CSS (Cascading Style Sheets) adalah standar bahasa pemrograman untuk style atau gaya, bertujuan untuk mengatur layout web maupun memperindah halaman web.
CSS ditemukan dan dikembangkan oleh Håkon Wium Lie, Bert Bos dan World Wide Web Consortium.
Ada 2 cara dasar untuk menambahkan css ke halaman html Anda:
- External (linked)
- Internal
External
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
Metode external sering diterapkan pada pemrograman web dinamis, dokumen css diletakan secara terpisah, cara ini bertujuan untuk menjaga kerapian dokumentasi program, juga mempermudah untuk kepentingan development.
Internal (embedded)
<head>
<style> p {color: red} </style>
</head>
Penambahan style langsung (internal) ini hanya berlaku untuk dokumen html. Penambahan style internal semacam ini paling sering ditemui pada web statis sperti blogger.
Internal (inline)
<p style="color: red">Red Text</tag>
Penambahan style internal semacam ini disebut sebagai metode inline, dimana penambahan atribut style dimulai dari tag pembuka (<>) setiap elemen-elemen html Anda, bukan tag penutup (</>). Style semacam ini hanya dilakukan untuk keperluan spesifik.
2. Selektor CSS
Selektor CSS adalah set aturan css untuk memilih model gaya yang diinginkan. Mari kita lihat beberapa jenis selektor dan penjelasan singkatnya!
p = Type (element)# = ID. = Class
Selektor Type (element)
body {declaration}
p {declaration}
h1 {declaration}
ul {declaration}
Selektor paling sederhana adalah type (element), dimana cara menargetkan ke elemen html adalah dengan mendeklarasikan nama elemen kedalam format css.
Macam-macam selektor penting type (element)
The essential selector types (elements)
Elemen Div
Elemen div memungkinkan Anda untuk mengelompokan satu set elemen bersama-sama dalam satu blok.
<div id="head">
<a bunch of elements></a>
</div>
Elemen Span
Elemen span memiliki kesamaan dengan elemen div, hanya saja untuk span cederung digunakan untuk mengelompokan karakter dalam satu blok, dalam banyak kasus sering diterapkan pada paragraph content, sedangkan div (divis) digunakan untuk mengelompokan beberapa elemen kedalam satu blok (divisi).
<p>Here is some text <span class="red-text">
with a span</span> added.</p>
Perbedaan selektor Elemen dengan ID atau Class
Selektor "elemen" dibuat berdasarkan elemen html, sehingga penamaannya tidak bisa bebas, karena mengacu pada nama-nama elemen yang ada di markup html. Berbeda dengan selektor "id" maupun "class" untuk penamaan keduanya bebas, sama halnya dengan kita memberikan nama variabel dalam bahasa pemrograman lainnya.
Selektor ID
Sebelum kita menambahkan selektor id kedalam elemen html, maka kita perlu mendeklarasikannya terlebih dahulu, aturannya adalah dengan menggunakan tanda (#) sebagaimana contoh dibawah ini:
#logo {declaration}
Kemudian, barulah kita bisa menambahkannya ke setiap elemen di dalam html yang kita kehendaki,
<img id="logo" src="" alt="">
Selektor Class
Konsepnya sama seperti ID, hanya saja memiliki aturan yang berbeda, yaitu pendeklarasian class menggunakan tanda (.), sebagaimana contoh dibawah ini:
.coba {declaration}
Kemudian, barulah kita bisa menambahkannya ke setiap elemen di dalam html yang kita kehendaki,
<ul class="coba">
Perbedaan antara selektor ID dengan Class
Perbedaan paling mendasar antara ID dengan CLASS adalah bahwa hanya ada satu ID pada halaman, tapi memiliki beberapa CLASS. ID lebih spesifik daripada CLASS. Setiap elemen dapat memiliki keduanya (ID dan CLASS).
Ilustrasi Selektor ID vs CLASS
Descendant Selectors (Selektor Turunan)
Selektor di dalam selektor, artinya saat kita bisa menggunakan selektor induk termasuk keturunannya atau hanya selektor keturunannya saja, sebagaimana dicontohkan di bawah ini:
#sidebar .author {declaration}
Maka, saat kita implementasikan pada elemen html menjadi seperti ini:
<div id="sidebar">
<p class="author"></p>
</div>
Contoh diatas adalah implementasi selektor author (class) yang merupakan keturunan dari sidebar (id).
Multiple Classes
Elemen dapat memiliki beberapa class, sehingga memungkinkan Anda memiliki kontrol lebih, cara mendeklarasikannya tanpa spasi, contoh:
.contoh.time {declaration}
Lalu, implementasi pada elemen html-nya adalah seperti berikut:
<div class="contoh time">
<h1></h1>
</div>
Kombinasi ID dan beberapa Class
Suatu elemen dapat memiliki keduanya (ID dan Class), namun setiap elemen hanya boleh memiliki satu ID saja, sementara itu untuk Class boleh lebih dari satu. Contoh:
#wrapper.coba.time {declaration}
Implementasi pada elemen html:
<div id="wrapper" class="coba time">
<h1></h1>
</div>
Semoga bermanfaat & selamat belajar!
