Perjalanan Menjadi Frontend Developer Bagi Pemula - Seri 2 - Mengenal CSS

Mengenal CSS - Setelah seri 1 membahas HTML, pada seri kedua kali ini saya akan membahas mengenai CSS dasar.

Sekali lagi saya mengingatkan bahwa tulisan ini adalah rangkaian untuk memberikan pengetahuan dasar bagi mereka yang pemula yang ingin belajar dan mengetahui dasar untuk menjadi Frontend Developer.

Berikut bahasan mengenai CSS, silahkan disimak.

Apa itu CSS ?

CSS merupakan kependekan dari Cascading Style Sheet. Beberapa orang menyebut CSS merupakan kosmetik dari sebuah halaman web namun pada penerapannya CSS seringkali mempunyai peran yang lebih vital dari hanya sebuah kosmetik. CSS memberikan layout, posisi, eksistensi dan variasi pada sebuah elemen HTML, CSS juga menentukan bagaimana satu elemen HTML ditampilkan disebuah website. CSS menghapuskan penggunaan HTML attribute sebagai style formatting dan memindahkan ke dalam CSS.

Bagaimana memulai CSS ?

CSS datang bersamaan dengan HTML tag

<style>
    body{something}
</style> 

di dalam head block dari sebuah HTML, saya biasa menyebut CSS seperti ini sebagai internal CSS.

CSS juga bisa datang bersamaan dengan HTML elemen dengan langsung menambahkan attribut

<div style="..." ></div>

pada elemen tersebut, saya sendiri menyebut CSS seperti ini sebagai inline CSS.

Selain itu CSS juga bisa di definikan di file tersendiri yang artinya terpisah dari file HTML nya yakni menggunakan file dengan ekstensi .css. Untuk memanggilnya sendiri menggunakan tag link didalam head block juga, namun dengan pendefinisian url path dari file tersebut, misal

<link rel="stylesheet" type="text/css" href="pathFileCSS" /> 

CSS seperti ini saya sebut sebagai eksternal CSS.

CSS memiliki urutan prioritas tersendiri bila ada hal yang sama didefinisikan namun dengan tipe CSS yang berbeda-beda, berikut adalah urutan prioritas tersebut :

1. Inline CSS langsung pada attribute HTML.
2. Internal CSS dan kemudian Eksternal CSS yang terdefinikan di head.
3. User Agent CSS atau CSS standard bawaan dari masing-masing browser.

CSS Syntax

Syntax css ditulis menggunakan key-value dengan colon atau titik dua (:) sebagai pembatas antara key dan value ini, sementara untuk pembatas antara rule menggunakan semicolon atau titik koma (;).

Misal :

font-size: 14px;
color: red;

Jika menggunakan internal maupun eksternal CSS maka masing-masing rule dibuka dan tutup menggunakab curly bracket ({}), misal :

.font-red{
    font-size: 14px;
    color: red;
}
.font-blue{
    font-size: 14px;
    color: blue;
}

CSS Selector Dasar

CSS Selector digunakan untuk mencari element HTML yang akan diberikan style. CSS akan memberikan style kepada elemen HTML yang didefinisikan di dalam selector seperti berdasarkan attribut id, class atau yang lainnya. Selector ID digunakan untuk mencari elemen yang unik yang memiliki attribute ID seperti yang dituliskan dan hanya satu di suatu halaman web. Selector ID ditulis menggunakan awalan tagar (#) kemudian nama ID dari elemen tersebut, contoh :

#font-red{
    font-size: 14px;
    color: red;
}

Selector class akan memberikan style kepada semua elemen HTML yang memiliki attribute class dengan nilai seperti yang tersebut. Class ini tidak unik seperti ID dan tujuannya memang agar bisa digunakan berulang-ulang. Selector class ini ditulis dengan awalan titik (.), contoh :

.font-red{
    font-size: 14px;
    color: red;
}

Kita bisa juga menggunakan selector langsung berupa element HTML nya yang mana akan berefek ke semua elemen yang di definisikan, contoh :

input{
    font-size: 14px;
    color: red;
}
a{
    color: blue;
}

CSS Selector Kombinasi

Selector bisa juga dikombinasikan lebih dari satu, tujuannya biasanya untuk lebih mendetailkan pencarian suatu elemen. Selector kombinasi ini bisa dibagi menjadi dua berdasarkan funsinya.

1. Bersarang (Nested)

Digunakan untuk mencari anak dari suatu elemen HTML berdasarkan parent nya, contoh :

.class1 p{
    color: red;
}
.class1 > p{
    color: blue;
}

Kita bisa menggunakan spasi maupun tanda panah kekanan (>), dimana spasi akan mengambil semua anak dari parent nya sedangkan tanda > hanya akan mengambil anak yang tepat berada dibawah parentnya.

2. Bersebelahan (Sibling)

Untuk mencari sibling dari suatu elemen kita bisa menggunakan tanda (+) maupun tanda (), dimana tanda (+) akan mencari yang tepat dan terdekat berada di sebelah (bukan sebagai anaknya) suatu elemen sedangkan tanda () akan mencari semua yang ada disebelah elemen tersebut, contoh :

.class1 + p{
    color: red;
}
.class1 ~ p{
    color: blue;
}

CSS Selector Lanjutan

Kita bisa juga memilih suatu elemen yang mengandung suatu kata, misal :

[class*="bli-"]{
    color: red;
}

Yang artinya kita ingin mendapatkan semua elemen yang mempunyai class dengan awalan bli-.

Lebih lanjut soal selector CSS bisa dibaca disini

**

**

Pseudo Class

Digunakan untuk mendefinisikan beberapa spesial state dari suatu elemen HTML seperti ketika di hover, ketika aktif, ketika di disable dan state lainnya. Syntaxnya menggunakan titik dua (:) setelah selectornya, misal :

.link:hover{
    color: red;
}
.link:focus{
    color: red;
}
.link:active{
    color: red;
}

**

**

Pseudo Element

Digunakan untuk memberikan style pada suatu bagian tertentu di dalam element HTML. Syntaxnya menggunakan dua kali titik dua (::) setelah selectornya, misal :

.link::before{
    color: red;
}
.link::after{
    color: red;
}
ul li::last-child{
    color: red;
}

**

**

Menggabungkan Rule

Kita bisa menggabungkan beberapa rule yang memiliki spesifikasi sama kedalam satu inisialisasi. Syntaxnya menggunakan koma (,), misal :

.link, a, .ref{
    color: red;
}

**

**

Catatan tambahan

Materi ini juga pernah saya bawakan di beberapa forum, berikut sumber materi nya :

Slide presentasi : disini

Contoh kode : disini

Halaman demo : disini

Download Ebook Programming disini