Belajar CSS Dasar

Setelah mempelajari cara penulisan HTML langkah selanjutnya dalam mempelajari

pemograman web adalah mempelajari Cascading Style Sheets atau lebih populer
dengan singkatannya, yakni CSS.

HTML dan CSS adalah bagian tak terpisahkan dari website modern saat
ini. HTML digunakan untuk membuat konten atau kerangka logis dari halaman web,
sedangkan CSS digunakan untuk mengatur tampilan dari website,
seperti warna dan font yang digunakan.

CSS Dasar
Bagian pertama belajar CSS ditujukan untuk anda yang baru mengenal CSS, atau
programmer pemula. Kita akan mempelajari dan mengetahui apa itu CSS, bagaimana
cara menggunakan CSS, bagaimana cara memasukkan kode CSS, aturan serta tata
cara penulisan CSS, dan kita juga akan membahas inti dari CSS,
yakni Selector, Property dan Value.

Pengertian CSS
Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalah “kumpulan kode
yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa
markup ini salah satunya adalah HTML.

Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan
untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa
mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua
kode tag HTML.

CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling
melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web.
Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya,
“HTML for content, CSS for Presentation”.

Fungsi dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang
semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf
bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau
membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML
untuk hal itu adalah sebagai berikut:
Saya menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf
tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai
keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste
tag <font color=”red”> pada kata-kata tertentu.

Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan
karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka
akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per
halaman.
Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk
paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:

Dalam contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag
<span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi
menggunakan CSS. Tag span saya tambahkan dengan atribut
atribut class=”warna”. Atribut class berguna untuk memasukkan kode CSS
pada tag <style> di bagian head
Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari
CSS color:red menjadi color:blue dan seluruh tag yang
memiliki class=”warna” akan otomatis berubah menjadi biru.
CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi dari
halaman.

Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu
metode Inline Style, Internal Style Sheets, dan External Style Sheets.

Metode Inline Style

Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag
HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style
CSS adalah sebagai berikut:

Dalam kode diatas, saya menyisipkan atribut style pada tag <h2>, nilai dari
atribut style ini adalah kode CSS yang ingin diterapkan.
Penggunaan tag CSS seperti ini walaupun praktis, namun tidak disarankan, karena
kode CSS langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya
CSS agar desain terpisah dengan konten.
Metode Internal Style Sheets
Metode Internal Style Sheets, atau disebut juga Embedded Style
Sheets digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam
satu halaman HTML. Atribut style yang sebelumnya berada di dalam tag,
dikumpulkan pada pada sebuah tag <style>. Tag style ini harus berada pada
bagian <head> dari halaman HTML.
Contoh penggunaan motode internal style sheets CSS:

Contoh metode internal style sheets diatas sudah jauh lebih baik daripada inline
style, karena kita sudah memisahkan CSS dari HTML. Seluruh kode CSS akan
berada pada tag head dari HTML.

Namun kekurangan menggunakan internal style sheets, jika kita memiliki

beberapa halaman dengan style yang sama, maka kita harus membuat kode CSS
pada masing-masing halaman tersebut. Hal ini dapat diatasi dengan
menggunakan metode external style sheets.

Metode External Style Sheets

Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin
membuat beberapa halaman dengan tampilan yang sama, maka setiap halaman
akan memiliki kode CSS yang sama.
Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut
kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML.
Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS
tersebut.
Masih menggunakan contoh yang sama dengan internal style sheets, tahap
pertama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan
savelah sebagai belajar.css
Isi dari file belajar.css :

Pastikan bahwa akhiran dari file tersebut adalah .css dan untuk keperluan contoh kali
ini, savelah pada folder yang sama dengan halaman HTML kita.
Kembali kehalaman HTML, CSS menyediakan 2 cara untuk menginput Kode CSS
tersebut ke halaman HTML, yang pertama adalah menggunakan @import

Contoh penggunaan @import CSS:

Untuk metode @import external style sheets ini, kita menyisipkan @import
url(belajar.css); pada tag <style>. Alamat pada bagian url bisa berupa
alaman relatif (seperti: folderku/belajar.css)

Cara input kedua external style sheets, adalah menggunakan tag <link>. Berikut
contohnya:

Pada metode link external style sheets ini, kita menggunakan

atribut href pada tag <link>, yang akan berisi alamat dari halaman CSS, dalam hal
ini belajar.css
Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling
direkomendasikan adalah metode external style sheets, baik
menggunakan @import maupun dengan tag <link>. Karena dengan
menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat
menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan
halaman website, kita hanya butuh mengubah 1 file CSS saja.

Pengertian Selector, Property dan Value pada CSS

Setelah mengetahui cara menginput kode CSS ke halaman HTML, saatnya untuk
memahami kode CSS itu sendiri. Kali ini kita akan membahas inti dari CSS,
yakni Pengertian Selector, Property dan Value pada CSS.

Pengertian Selector CSS

Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML,
CSS membutuhkan suatu cara untuk ‘mengaitkan’ atau menghubungkan kode CSS
dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam
CSS.
Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin
dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari
seluruh tag HTML yang memiliki atribut class=”warning”” atau “cari seluruh link yang
ada di dalam tag <p>”.
Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i, h1,
li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya.
Mengenai selector, akan kita bahas secara lebih detail dalam tutorial-turorial CSS
selanjutnya.

Pengertian Property CSS

Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag
HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan
hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai
untuk seluruh selector.
Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“, maka property
adalah “efek apa yang ingin dimanipulasi dari tag p tersebut“, seperti ukuran text,
warna text, jenis fontnya, dll.

Pengertian Value CSS

Value CSS adalah nilai dari property. Misalkan untuk property background-
color yang digunakan untuk mengubah warna latar belakang dari sebuah
selector, value atau nilainya dapat berupa red, blue, black, atau white.
Untuk lebih jelasnya tentang selector, property dan value pada CSS, dapat dilihat
pada gambar dibawah ini:
Selector, Property dan Value ini adalah elemen inti dari CSS, 90% tutorial yang akan
kita pelajari mengenai CSS akan membahas tentang ketiga aspek ini.

Aturan dan Cara Penulisan Kode CSS

Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini
adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih
mendalam:
Kode HTML di atas memiliki kode CSS pada bagian head yang diinput menggunakan
motode Metode Internal Style Sheets. Kita akan fokus pada bagian CSS saja:

Seperti yang dapat dilihat dari contoh diatas, aturan penulisan CSS adalah sebagai
berikut:

▪ Selector di tempatkan pada awal penulisan CSS. Dalam contoh

diatas, body, p, h1 dan h2 adalah selector. Khusus untuk selector yang
lebih dari 1 (seperti pada contoh selector terakhir: h1,h2) untuk
memisahkan kedua selector tersebut, digunakan tanda koma (,)
▪ Setelah penulisan selector, seluruh isi dari property dan valuenya
(nilainya), berada di antara kurung kurawal “{“ dan “}”.
▪ Diantara property satu dengan yang lainnya, dipisahkan dengan
tanda titik koma (;)
▪ Diantara property dengan value (nilai), dipisahkan dengan anda titik
dua (:).
▪ Untuk property yang memiliki 2 kata , spasi diantaranya digantikan
dengan tanda hubung (-), contohnya: background-color dan border-
left.
▪ Untuk properti yang berada pada baris terakhir, kita boleh
mengabaikan tanda ‘;’ sebagai tanda tutup, tetapi disarankan agar
tetap menggunakan tanda ‘;’, karena bisa saja kita lupa menuliskan
tanda titik koma pada saat menambahkan properti lainnya. Contoh
property tanpa tanda ‘;’ dapat di lihat pada contoh “text-decoration:
underline”.