Pengenalan CSS

Ini merupakan post pertama aku mengenai pemrograman web, ngak tau kenapa minggu-minggu ini lagi suka pemrograman sama matematika? Walaupun pusing dan sempet ngak bisa tidur karena buat program ngak jadi-jadi, tapi secara keseluruhan programming itu asyik lho.

Sebenarnya aku masih punya banyak banget hutang buat SEO tutorial. Tapi karena akhir-akhir ini aku lagi belajar programming jadi share mengenai CSS dulu deh.

Sebelum memulai, pastikan kamu sudah paham betul HTML agar proses belajar lebih mudah nantinya. Belajar HTML [disini].

Siapkan camilan dan secangkir kopi bila diperlukan.

MENGENAL CSS

Cascading Style Sheet (CSS) merupakan salah satu teknologi bahasa pemrograman berbasis web yang dikembangkan untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah website sehingga akan lebih terstruktur dan seragam.

CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kamu untuk menampilkan halaman yang sama dengan format yang berbeda. Hal tersebut membuat HTML menjadi lebih efisien karena melihat perkembangan HTML yang kurang praktis karena terlalu banyak dibebani hal-hal yang berkaitan dengan layout seperti font dan lain-lain.

Penggunaan CSS terbukti tidak hanya menutupi kekurangan HTML tapi juga menyempurnakannya dalam berbagai aspek. Banyak website dengan design interaktif & responsif tidak lepas dari peran CSS dalam mengatur elemen website. Walaupun banyak digunakan dalam pengembangan web, tutorial pengenalan CSS ini dibuat pada dasarnya memiliki destinasi tujuan lebih ke SEO karena pengetahuan CSS yang baik akan sangat membantu dalam proses optimasi mesin pencari nantinya.

Aplikasi CSS pada SEO dengan dilakukannya minifying atau proses compressing halaman website agar loading page menjadi lebih ringan.

Q: Apakah membutuhkan compiler untuk menjalankan CSS?
A: Tidak perlu, kamu cukup menjalankan CSS menggunakan browser. Semua browser mempunyai engine yang bisa menginterpretasikan script CSS yang kamu buat.

Q: Dimana aku bisa menulis script CSS?
A: Kamu bisa menulis script CSS di teks editor seperti notepad, wordpad dan sebagainya.

Q: Apakah penulisan syntax case sensitive?
A: Syntax CSS bersifat tidak case sensitive, artinya huruf kecil dan besar adalah sama.

KELEBIHAN CSS

Adapun beberapa kelebihan CSS adalah sebagai berikut:
1. Memisahkan desain dengan konten halaman web.
2. Mengatur design sefisien mungkin.
3. Lebih mudah di load karena pada umumnya membuat coding web lebih ringkas
4. Satu script CSS dapat digunakan banyak halaman web.

Syntax CSS

Berikut ini adalah struktur penulisan CSS.

Selector {
         Properties : Value;
}

Komentar dalam CSS:
// Komentar
/* Komentar */

Selector pada CSS

CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.

1. Class Selector.

Class merupakan “agen bebas” yang dapat diterapkan untuk tag HTML apapun. Kamu dapat membuat nama class dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling serbaguna. Penulisan class selector dalam CSS disymbolkan dengan tanda titik ( . ).

Contoh:
Penulisan code dalam dokumen HTML



Penulisan code dalam CSS


B. ID Selector

Hampir sama dengan class, ID Selector dapat diterapkan untuk hampir semua tag HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.

Contoh:
Penulisan code dalam dokumen HTML


Penulisan code di CSS


3. Tag Selector

Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang berasosiasi. Misalnya, selector dari <h1> adalah h1. HTML selector digunakan dalam CSS rule untuk mendefinisikan bagaimana suatu tag akan ditampilkan.

Contoh:
Penulisan code di dokumen HTML


Penulisan code di CSS:

Aplikasi CSS

Ada 3 cara penggunaan CSS yaitu inline CSS, embedded CSS dan external CSS.

A. Inline CSS
Cara penggunaan CSS dengan menambahkan langsung pada tag html yang digunakan sebagai atribut.

B. Embedded CSS
Merupakan aplikasi CSS yang disisipkan di dalam tag <head>...</head> pada dokumen HTML.

C. External CSS.
Cara ini menggunakan file CSS yang dituliskan secara terpisah dengan dokumen html. Dengan cara ini, kamu nanti hanya perlu memiliki satu set kode CSS dimana kode style CSS akan di host secara terpisah.

Contoh Embedded CSS:


Dari kode diatas kita memiliki sebuah dokumen HTML yang isinya adalah link menuju. http://searchmarketing.com.au. Ketika halaman tersebut dibuka lewat browser maka hasilnya akan seperti gambar dibawah ini:


Bagaimana kalau kita mau merubah style teks link agar lebih menarik, untuk merubahnya kita bisa gunakan CSS. Sekarang kita coba ubah style link tersebut dengan CSS.

Pertama tambahkan tag <style>...</style> diantara tag <header>...</header>,
kemudian masukkan code CSS di antara tag <style>...</style>.



Sekarang kita tambahkan efek pada link tersebut. Berikut adalah kode untuk menambahkan efek pada teks link.




Pembuatan Top Menu Sederhana Dengan CSS





Maka hasilnya akan terlihat seperti gambar dibawah ini:


Keterangan syntax:
*) #menu ul li berfungsi mengatur bagian list sub menu yang berada didalam bagan list menu utama.
*) text-decoration : none; Menghilangkan garis bawah (underline) pada link
*) display : inline;  Membuat tampilan list sejajar ke samping
*) #menu ul li a:hover Mengatur font dan warna background ketika pointer mouse diarahkan ke link pada list dan sub menu list.
*) /* RESET */ Global reset CSS function Berfungsi menyamakan layout berbeda pada setiap default browser.

Ini baru basic dari CSS, lain kesempatan akan aku share fungsi CSS lain yang bisa diaplikasikan pada dokumen HTML untuk tingkat intermediate sampai advanced lebih detail dan lengkap karena teknologi pemrograman web masih terus dikembangkan sampai saat ini.

Apabila ada pertanyaan silahkan tanyakan pada kolom komentar.