Pemrograman

Bahasa

Framework

Peralatan

Info

Berkenalan dengan CSS

– 07 July 2015

CSS kepanjangan dari (Cascade Style Sheet), bukan bahasa pemrograman, melainkan bahasa untuk memperindah halaman web. HTML mengatur kerangka data yang akan ditampilkan, sementara CSS menata, merapikan, dan memperindahnya. Coba perhatikan gambar berikut ini, sebelah kiri tampa CSS, sebelah kanan pakai CSS.

Gambar Situs web tampa css dan dengan css

Halaman web tampa CSS, tampak kering dan monoton. Oleh karena itu, kita perlu menggunakan CSS agar web tampak menarik.

Bagaiaman menulis kode CSS di HTML

Penulisan kode CSS di HTML dapat dilakukan di dalam tag <style>. Tag tersebut dapat ditulis di dalam tag <head> atau <body>. Kebanyakan orang menulisnya di dalam tag <head>. Perhatiakn contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Penulisan kode CSS</title>

    <style type="text/css">
    p { color: red }
    </style>
</head>

<body>
    <p>Sebuah contoh paragraf yang sudah dipengaruhi oleh kode CSS</p>
</body>
</html>

Hasilnya, elemen <p> akan berwarna merah:

See the Pen WvzZxm by Ardianta Pargo (@ardianta) on CodePen.

Struktur kode CSS

Kode CSS tidak ditulis sembarangan. Kalau salah menuliskannya, maka kodenya tidak akan bekerja. Aturan-aturan penulisannya harus ditaati, berikut adalah aturan penulisan kode CSS:

selector { property: value }

Bila propertinya banyak, maka pisah dengan tanda titik koma (;)

selector {
    property: value;
    property-lain: nilai;
    property-lagi: nilai;
}

Selector adalah kata kunci untuk menyeleksi elemen HTML yang akan diberikan CSS. Misalkan, saya ingin memberikan CSS pada elemen paragraf (tag <p>). Maka selektornya berupa huruf p. Mudahnya, ingat “Untuk siapa” kode CSS ini akan diterapkan.

Property adalah ciri-ciri yang akan diberikan kepada elemen. Sementara value adalah nilai properti yang akan diberikan. Mudahnya kita analogikan begini, misal Saya memiliki rambut berwarna hitam, panjangnya kira-kira 5cm. Maka kode CSS-nya bisa seperti ini:

saya {
    rambut-warna: hitam;
    rambut-panjang: 5cm;
}

Property dan value suatu elemen harus kita ketahui, tidak dibuat sembarangan seperti contoh yang diatas. Lebih bagus lagi kalau dihapal. Tidak bisa menghapal? Tenang, bisa manfaatkan inspect elemen pada browser.

Baiklah, untuk kali ini sekian dulu. Kalau masih belum jelas silahkan lemparkan pertanyaan ke kotak komentar. Terima kasih sudah membaca sampai bagian ini.