Mengenal web

 Ketika pertama kali mengenal dunia web, segala sesuatu terlihat seperti sihir di mata saya. Hidupkan komputer, colok modem (pastikan juga tidak ada yang akan / sedang menggunakan telepon!), jalankan software yang disediakan oleh ISP, tekan “Dial”, dan tunggu sampai terdapat tulisan “Connected to the Internet”. Selesai terkoneksi, buka Netscape Navigator [1], dan masukkan alamat website yang ingin dituju (90% boleh.com waktu itu).
Karena hanya memandang Internet sebagai sihir, pada saat itu saya sama sekali tidak tertarik untuk mengetahui bagaimana internet bekerja. Tidak adanya minat tersebut membuat saya sama sekali tidak peduli akan pengembangan web, dan meskipun sangat ingin memiliki website sendiri, pada akhirnya saya hanya bisa membuat website menggunakan Frontpage atau Word (dan percayalah, hasilnya sangat, sangat parah). Ketidak mengertian saya tentang dunia web pada saat itu berdampak pada parahnya website yang saya kembangkan. Karena hal inilah pada saat memutuskan untuk menulis buku ini, saya mendedikasikan satu bab untuk mengenalkan pembaca kepada dunia web, dan mudah-mudahan membangun minat pembaca dalam dunia web. Pembelajaran yang disertai dengan minat dan ketertarikan akan jauh lebih optimal dibandingkan pembelajaran tanpa minat sama sekali.

Cara Kerja Web

Ketika menjelajah website dalam Internet, umumnya kita menggunakan sebuah browser. Kita memasukkan sebuah alamat, seperti google.com ke dalam browser, dan kemudian browser akan menampilkan website Google kepada kita. Apa yang sebenarnya terjadi di belakang layar?

Tentu saja cara kerja web sebenarnya tidak sesederhana ini. Prosesnya disederhanakan hanya untuk ilustrasi saja.

Secara sederhana, dapat dikatakan bahwa web bekerja seperti pos, di mana setiap orang yang ingin berkomunikasi dengan orang lain harus melakukan pengiriman pesan. Identifikasi penerima pesan dilakukan melalui alamat dan kode pos, yang ditentukan oleh kantor pos. Pesan yang dikirimkan ini kemudian disampaikan oleh kantor pos, untuk kemudian dibaca oleh penerima pesan. “Kantor pos”, sebagai pihak yang menentukan alamat dan kode pos, dikenal dengan nama DNS (Domain Name Server) pada dunia web. “Alamat”, sebagai tempat penerima pesan, dikenal sebagai IP Address, sementara penerima pesannya sendiri tentunya adalah website atau komputer lain. Pengirim pesan, tentunya adalah web browser yang kita gunakan.

Langkah Pertama

Cukup jelas. Pengguna memberikan perintah kepada browser untuk membuka halaman tertentu.

Langkah Kedua

Browser kemudian harus melalui firewall atau proxy, sebuah sistem pengamanan di sisi pengguna atau ISP, sebelum memasuki Internet.

Langkah Ketiga

Browser menanyakan DNS alamat IP dari http://www.google.com.

Langkah Keempat

Browser berjalan menuju alamat IP yang diberikan oleh DNS.

Langkah Kelima

Setelah mencapai alamat, browser biasanya menemui sekumpulan website pada alamat tersebut. Hal ini disebabkan karena umumnya beberapa website disajikan dalam satu server (yang dikenal dengan nama Hosting Server) untuk menghemat sumber daya.

Langkah Keenam

Browser memasuki “ruang” google.com pada hosting server, dan meminta konten dari google.com kepada penyaji konten. Pada gambar Bagaimana Web Bekerja, penyaji konten diilustrasikan sebagai burung hantu.

Langkah Ketujuh

Data dikirimkan kembali ke pengguna.

Langkah Kedelapan

Ketika data sampai, maka browser menampilkan data yang didapatkan kepada pengguna.

Langkah Kesembilan

Selesai.

Perlu ditekankan bahwa langkah-langkah di atas merupakan langkah yang telah disederhanakan, dan hanya mencakup satu bagian dari browser: pengambilan data dari server. Bagian ini bahkan adalah bagian yang paling sederhana dari sebuah browser, karena sebagian besar pekerjaan dikerjakan oleh jaringan Internet. Kegunaan utama (dan tugas tersulit) dari sebuah browser ialah menampilkan halaman web. Penjelasan mengenai hal ini akan diberikan pada bagian selanjutnya.
Sampai pada titik ini, kita dapat melihat bahwa web merupakan kumpulan dokumen masif dalam jaringan yang dapat diakses kapanpun, selama kita terkoneksi dalam jaringan tersebut. Untuk pengembangan web sendiri, terdapat dua komponen penting, yaitu: komponen server yang menyajikan halaman kepada kita, dan komponen klien yang menampilkan halaman yang disajikan oleh server ke pengguna. Komponen server dikenal dengan nama web server, sementara komponen klien dikenal dengan nama web browser. Contoh dari web server adalah Apache dan nginx, sementara contoh dari web browser yaitu Internet Explorer dan Mozilla Firefox.
Karena memiliki dua komponen dalam pengembangan, tentunya pembangunan sebuah website akan memerlukan pengembangan dari kedua sisi. Seorang pengembang web yang handal setidaknya harus dapat melakukan pengembangan klien dan server, meskipun banyak pengembang yang memiliki spesialisasi pada satu sisi saja (misalnya penulis lebih menguasai pengembangan server, meskipun tetap harus memiliki pengetahuan yang mumpuni pada sisi klien). Mempelajari web, menurut penulis, lebih baik dilakukan mulai dari sisi klien terlebih dahulu, karena pengembangan pada sisi server tidak dapat terlepas dari pengembangan sisi klien. Ingat, tujuan akhir dari server ialah untuk menghasilkan halaman web kepada pengguna, yang adalah sisi klien.

HyperText Markup Language

HyperText Markup Language, yang lebih dikenal sebagai HTML, merupakan bahasa yang digunakan untuk membuat halaman web. HTML dikirimkan kepada pengguna oleh web server, untuk kemudian ditampilkan oleh web browser. Sebagai sebuah markup language, HTML bertugas hanya memberikan informasi mengenai isi dari konten (dengan cara memberikan “tanda” pada teks, makanya disebut markup), tanpa memiliki informasi mengenai tampilan (style) dari konten tersebut. HTML hanya memberitahukan browser bahwa bagian tertentu dari sebuah tulisan merupakan kutipan, atau harus dicetak tebal. Bagaimana bentuk dari tulisan cetak tebal tidak diatur dalam HTML.
Karena bertugas hanya memberikan informasi isi (semantik), HTML bersifat sangat sederhana, biasanya hanya sepasang penanda (tag) yang melingkupi teks yang ingin ditandai. Listing di bawah memberikan contoh potongan HTML pada teks:

Scala (yang adalah kepanjangan dari "<u>Scalable Language</u>")
merupakan sebuah bahasa pemrograman yang dirancang untuk
digunakan dalam berbagai lingkungan, mulai dari <i>script</i>
sederhana sampai dengan sebuah sistem yang besar dan rumit.
Istilah kerennya, Scala adalah sebuah
<b>general purpose programming language</b>.

bagian mana yang merupkana HTML pada kode di atas? Dengan mudah tentunya anda dapat melihat, bahwa bagian yang merupakan kode HTML adalah kode-kode yang tidak dapat dibaca seperti <u>Scalable Language</u>. Penanda teks seperti <u></u> tersebut dikenal dengan nama tag pada HTML. Setiap tag memberikan arti khusus kepada teks. Tag “u” berarti teks tersebut bergaris bawah (underlined). Tag “i” berarti teks dicetak miring (italics), dan tag “b”, seperti yang dapat ditebak, memberikan huruf tebal (bold).
Kaget bahwa ternyata HTML sesederhana itu? Ya, HTML memang sangat sederhana! Pembelajaran HTML biasanya berkisar dalam eksperimen dan pembacaan dokumentasi mengenai setiap tag. Kedua hal tersebut menyebabkan penguasaan HTML hanya menjadi masalah kerajinan membaca dan pengalaman. Tantangan dalam pengembangan web pada sisi klien utamanya terdapat pada memperindah tampilan dan interaktifitas dari teks yang telah diformat HTML.

Cascading StyleSheet

Jadi, kalau HTML hanya berguna untuk menandai teks, bagaimana kita memberikan tampilan yang bagus pada teks tersebut? Dokumen HTML ditingkatkan tampilannya menggunakan sebuah bahasa lain, yang dikenal dengan nama Cascading Stylesheet, atau CSS. CSS sendiri merupakan bahasa deklaratif yang sangat kompleks, sehingga intrik utamanya tidak dapat dijelaskan di dalam beberapa paragraf, seperti pada HTML. Penjelasan detil mengenai CSS akan diberikan pada bagian selanjutnya. Untuk sekarang, hanya perlu dimengerti bahwa untuk membuat halaman web yang indah, diperlukan pengetahuan HTML dan CSS yang baik.

Javascript

Pada sebuah website modern, web yang enak dipandang mata saja tidak cukup. Sebuah website yang baik juga kerap kali bersifat sangat interaktif. Nama anda terlalu panjang untuk masuk ke dalam kolom nama di formulir pendaftaran? Tenang saja, web kami akan memperpanjang kolom tersebut begitu anda mengetik sampai di ujung kolom. Ingin mengetahui apakah user id yang diinginkan telah terpakai? Tenang, otomatis dicek kok, tidak perlu melakukan apa-apa.
Interaktifitas seperti yang dicontohkan di atas dimungkinkan dengan adanya kode khusus pada website tersebut yang dijalankan oleh browser ketika kita menampilkan website. Kode yang dijalankan ini ditulis dalam bahasa pemrograman Javascript, yang dapat langsung berinteraksi dengan HTML dan mengubah atribut, CSS, maupun isi dari HTML itu sendiri. Sama seperti CSS, Javascript tidak akan dibahas mendalam pada bagian ini, dan bahkan pada buku ini sama sekali. Pembahasan mengenai Javascript akan memerlukan sebuah buku tersendiri, karena kayanya bahasa pemrograman ini.

Browser dan Kode Klien

Sejauh ini, kita telah mengetahui bahwa pengembangan pada sisi klien dilakukan dengan menggunakan tiga bahasa, yaitu: HTML sebagai bahasa penanda konten, CSS untuk membuat desain tampilan, dan Javascript untuk inteaktifitas. Ketika browser menerima ketiga kode tersebut dari web server, maka browser akan menjalankan ketiga kode tersebut. Hasil dari eksekusi kode tersebut ialah tampilan website yang diberikan kepada pengguna. Jadi, tugas utama dari pengembang browser ialah membaca dan menjalankan kode pada sisi klien, untuk kemudian ditampilkan kepada pengguna.
Untuk memastikan berbagai browser yang ada dapat mengintepretasikan kode web dengan benar, sebuah badan standar dibuat untuk memberikan spesifikasi yang dapat dirujuk oleh pengembang browser. Badan standar ini dikenal dengan nama W3C (World Wide Web Consortium). Idealnya, setiap browser yang mengimplementasikan spesifikasi HTML dan CSS sesuai dengan standar yang ditentukan (W3C hanya mengatur kedua standar tersebut, Javascript diatur oleh badan lain) akan mendapatkan tampilan yang sama dari kode yang sama. Sayangnya, hal ini tidak sesuai dengan kenyataan yang ada di lapangan. Pada implementasinya, setiap browser memiliki “keunikan” tersendiri dalam mengintepretasikan HTML dan CSS. Hal ini menyebabkan pengembang pada sisi klien harus menguji web yang dikembangkan pada banyak browser, atau setidaknya beberapa browser yang paling populer, untuk memastikan halaman yang dikembangkan dapat tampil sesuai dengan keinginan.
Beberapa browser utama yang umumnya didukung oleh kebanyakan website karena pangsa pasarnya yang besar yaitu: Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari, dan Opera. Tabel Browser dan engine-nya memperlihatkan engine yang digunakan oleh masing-masing browser.

Browser dan engine-nya

Browser	Engine
Microsoft Internet Explorer	Trident
Mozilla Firefox	Gecko
Google Chrome	Webkit
Apple Safari	Webkit
Opera	Presto (Kedepannya Webkit)

Perbedaan-perbedaan tampilan yang diashilkan oleh setiap engine dapat berupa perbedaan kecil, seperti ukuran font, ataupun perbedaan yang sangat besar, seperti perbedaan layout. Gambar Perbedaan Tampilan Browser memperlihatkan contoh perbedaan tampilah oleh empat buah browser, dari satu halaman yang sama [2]. Jika ditemui perbedaan-perbedaan sejenis pada bagian selanjutnya dalam buku ini, catatan khusus akan diberikan kepada pembaca.

Perbedaan Tampilan Browser

Adanya perbedaan cara setiap browser menampilkan ini menyebabkan pengembang web pada umumnya memiliki banyak browser pada sistem pengembangan mereka, dan biasanya akan menguji tampilan web mereka pada banyak browser. Begitupun, kesamaan tampilan 100% umumnya tidak menjadi tujuan akhir, karena hal tersebut akan sangat sulit dilakukan. Yang umumnya ingin dicapai dengan pengujian pada banyak browser ialah tidak adanya tampilan yang menyebabkan web tidak dapat digunakan pada browser tertentu, misalnya komponen yang saling menimpa ataupun tulisan yang terlalu besar.
Jika anda masih belum memiliki seluruh browser utama yang tertera pada tabel Browser dan engine-nya, tunggu apa lagi? Segera pasang semua browser yang ada, dan lihat berbagai perbedaan dari tiap browser pada website yang sering anda kunjungi!

Catatan Kaki

[1]	Salah satu browser tertua yang ada, sekarang telah menjadi Mozilla Firefox. Baca sejarahnya di: http://en.wikipedia.org/wiki/Netscape_Navigator

[2]	Halaman yang dirujuk: http://thesis.bertzzie.com

HTML dan CSS Dasar¶

Pada bab-bab sebelumnya, kita telah berkenalan sekilas dengan dunia web. Sekarang kita akan langsung masuk dan mencoba membuat dokumen HTML sederhana, agar konsep-konsep yang telah dijelaskan sebelumnya menjadi lebih jelas.

Untuk menyegarkan pikiran, sebelum masuk ke dalam kode, kita akan melihat kembali perbedaan antara HTML dan CSS:

• HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan makna semantik.
• CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.

Contoh sederhananya, sebuah paragraf teks direpresentasikan dengan penanda lstinline{p} pada HTML. Memberikan penanda lstinline{p} pada konten dalam HTML berarti menandakan konten tersebut berada di dalam sebuah paragraf. CSS kemudian digunakan untuk menentukan ukuran teks, warna teks, spasi, dan berbagai gaya tampilan dari paragraf tersebut.
Oke, setelah pikiran anda segar kembali dengan konsep HTML dan CSS, mari kita lihat berbagai hal yang membuat dokumen HTML menjadi, emph{well}, dokumen HTML.

Elemen, Tag, dan Atribut

Sebelum masuk lebih jauh, kita akan melihat tiga istilah utama yang harus diketahui ketika menulis HTML. Ketiga istilah tersebut ialah elemen, tag, dan atribut.

Elemen

Elemen HTML merupakan komponen yang menetapkan peran sebuah objek dalam dokumen, termasuk struktur dan konten dari objek tersebut. Contoh dari sebuah elemen HTML ialah p ataupun b yang telah dicontohkan pada bagian-bagian sebelumnya. Elemen-elemen populer lain dalam HTML misalnya a, h1, div, span, em, ataupun strong.
Kode di bawah menunjukkan contoh dari elemen a yang digunakan untuk membuat hyperlink ke halaman lain:

<a>

Tag

Sebuah elemen biasanya direpresentasikan oleh tag. Tag pembuka menandakan elemen tersebut dimulai, dan tag penutup menandakan akhir dari sebuah elemen. Tag pembuka direpresentasikan dengan nama elemen yang diapit simbol “<>”, contohnya <a>. Tag penutup dituliskan dengan menambahkan garis miring (“/”) setelah simbol “<”. Misalnya, tag penutup untuk elemen a adalah </a>.
Berikut adalah contoh pengunaan tag a untuk membuat sebuah link:

<a>Ini adalah sebuah link</a>

Atribut

Atribut merupakan informasi tambahan yang dapat kita berikan untuk sebuah elemen. Setiap elemen memiliki atribut yang berbeda-beda, meskipun terdapat beberapa atribut standar yang dapat digunakan oleh semua elemen.
Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan untuk elemen tersebut. Misalnya, untuk elemen img yang digunakan untuk menampilkan gambar, terdapat atribut untuk menentukan di mana sumber gambar yang akan ditampilkan di simpan. Atribut ini tentunya tidak akan berguna untuk elemen p, yang hanya menampilkan teks.
Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya dapat diimplementasikan oleh semua elemen, misalnya atribut “id” untuk identifikasi elemen, atau “class” untuk klasifikasi elemen.
Kode di bawah menunjukkan contoh elemen a yang digunakan dengan atribut wajib elemen tersebut (href):

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

Kode di atas memberikan contoh atribut href yang dimiliki oleh elemen a. Atribut ini berguna untuk memberikan referensi hyperlink dari sebuah elemen (karenanya namanya “href” - hyperlink reference). Atribut-atribut yang dimiliki oleh tiap-tiap elemen akan dibahas lebih lanjut ketika pembahasan dari sebuah elemen dilakukan.

Struktur Dokumen HTML

Sebuah dokumen HTML memiliki struktur tertentu yang harus dipatuhi. Struktur minimal yang harus dimiliki sebuah dokumen HTML dapat dilihat pada kode di bawah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
  </head>
  <body>
    ...
  </body>
</html>

Apa arti dari struktur tersebut? Mari kita lihat satu per satu.

Elemen DOCTYPE

Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang digunakan oleh dokumen. Pada listing~ref{code:struktur-html}, versi HTML yang digunakan adalah HTML5.

Elemen HTML

Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.

Elemen head

Elemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman web hasil tampilan browser.

Elemen title

Memberikan judul dokumen.

Elemen body

Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada pengguna.

Untuk lebih jelasnya, buat sebuah file dengan nama pengenalan-html.html yang berisi kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks
        (h1 == header 1). Konten teks ini sendiri berada di dalam
        sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

Buka file tersebut pada browser (dapat dilakukan dengan klik dua kali, ataupun melalui menu File -> Open... pada browser).

Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan

Gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan menunjukkan hasil tampilan dari kode pada pengenalan-html.html, beserta dengan pemetaan antara elemen HTML dengan tampilan hasil olahan browser.
Pada gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan dapat dilihat bahwa elemen title ditampilkan pada bagian atas browser, dan isi dari body ditampilkan seluruhnya oleh browser. Perhatikan juga bahwa terdapat jarak spasi antara elemen p pertama dengan elemen p kedua, sebagai pemisah antar paragraf. Secara otomatis browser dapat membaca bahwa terdapat dua paragraf, dan biasanya dua paragraf yang berbeda akan memiliki jarak. Seperti yang telah dijelaskan pada bagian Browser dan Kode Klien, jarak antar paragraf ini akan berbeda-beda, tergantung dengan browser yang digunakan. Perhatikan juga bahwa jarak antar p berbeda dengan jarak antara h1 dengan p. Hal ini dikarenakan elemen h1, sebagai kepala teks, dianggap memiliki makna khusus, sehingga harus ditonjolkan (dengan menebalkan dan memperbesar huruf, serta memberi jarak yang lebar antara elemen h1 dengan elemen-elemen lainnya).

Dasar CSS

Untuk dapat mengerti bagaimana menggunakan CSS, terlebih dahulu kita harus mengerti tiga istilah dasar yang digunakan dalam CSS, yaitu selector, property, dan value. Pembahasan mengenai makna dari ketiga istilah tersebut akan dilakukan pada bagian selanjutnya.

Selector

Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan. Pemilihan elemen HTML dilakukan dengan menspesifikasikan selector. Kode di bawah memberikan contoh dari sebuah selector, yang dapat digunakan untuk memberikan gaya tampilan terhadap seluruh elemen p yang ada pada dokumen HTML:

p {
    ....
}

Pada kode di atas, yang dikatakan selector ialah kode “p”. Singkatnya, sebuah selector merupakan seluruh kode yang berada sebelum “{}”.
Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen p yang ada dalam dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat memberikan desain secara lebih spesifik: melalui klasifikasi, identitas, ataupun berbagai atribut lainnya dari sebuah elemen. Pembahasan selector secara mendalam dapat ditemukan pada bab.

Property

Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah elemen yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di bawah:

p {
    color: ...;
    font-size: ...;
}

Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum titik dua (“:”). Kegunaan dari kedua properti tersebut tentunya cukup jelas dari nama yang diberikan, yaitu color untuk memberikan warna pada elemen p, dan font-size untuk mengubah ukuran teks. Terdapat sangat banyak properti yang dapat digunakan, tetapi pembahasan mengenai detil pengunaan tiap-tiap properti tidak akan dilakukan pada buku ini. Jika terdapat pengunaan properti baru, penjelasan akan diberikan pada bagian yang relevan. Daftar properti sendiri dapat dibaca di.

Value

Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat diberikan sendiri berbeda-beda, tergantung dengan jenis property-nya. Misalnya, jika ingin memberikan nilai warna, kita harus memberikan nilai dalam format #RRGGBB (kombinasi nilai heksa merah-hijau-biru yang biasa digunakan pada program pengolah grafis seperti Photoshop). Ketika ingin memberikan nilai ukuran, kita dapat memberikan nilai dalam format nilai px atau nilai em. Untuk lebih jelasnya, kode berikut memberikan contoh value dari properti yang ada pada kode sebelumnya:

p {
    color: #FFFF00;
    font-size: 50px;
}

Sintaks CSS

Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks dari CSS adalah seperti yang ditampilkan pada gambar berikut:

Sintaks CSS

Ingat, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing property akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh property tersebut.

Penyingkatan Nilai dari Property

Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat nilai yang diberikan. Untuk lebih jelasnya, perhatikan kode berikut:

/*
    Bentuk Panjang
*/
p {
    margin-top    : 10px;
    margin-right  : 20px;
    margin-bottom : 10px;
    margin-left   : 20px;
}

/*
    Bentuk Singkat (1)
*/
p {
    margin: 10px 20px;
}

/*
    Bentuk Singkat (2)
*/
p {
    margin: 10px;
}

Pada bentuk panjang pada kode di atas, nilai margin atas, kanan, bawah, dan kiri diberikan satu per satu, sesuai dengan property yang ada. Penulisan ini dapat kita singkat dengan menggunakan hanya property margin dan dua value, yang secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan left. Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.
Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat ini. Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya: margin, padding, border, dan background. Untuk mendapatkan informasi lebih lanjut mengenai property tersebut silahkan baca dokumentasi property CSS yang bersangkutan.

Mengimplementasikan CSS pada HTML

Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada HTML yang ada agar desain yang dispesifikasikan oleh CSS dapat diaplikasikan pada HTML. Terdapat tiga cara untuk memberikan referensi CSS, yaitu:

Referensi ke File Eksternal

Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. Cara referensi CSS seperti ini seringkali dianggap sebagai best practice dalam pengembangan web.

Penulisan CSS pada Elemen Head

CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada bagian head dari sebuah dokumen. Penulisan CSS seperti ini tidak disarankan, karena umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain. Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga.

CSS di dalam Atribut style pada Elemen

Menuliskan CSS di dalam atribut style pada elemen HTML (atribut ini dimiliki oleh semua elemen) merupakan cara terakhir, yang juga tidak disarankan karena penulisan seperti ini akan “mengotori” kode HTML. HTML dibuat dengan tujuan untuk memberikan makna semantik untuk konten, bukan desain. Begitupun, metode ini biasanya digunakan untuk manipulasi gaya yang dilakukan secara dinamis, melalui Javascript (yang tidak mengotori kode HTML, karena biasanya atribut baru diisikan setelah HTML selesai dibaca oleh browser).

Untuk lebih jelasnya, kode di bawah memberikan contoh cara melakukan referensi CSS pada sebuah dokumen HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
    <!-- Referensi pada Elemen Head -->
    <style type="text/css">
        h1 {
            color: red;
        }
    </style>

    <!-- Referensi pada file eksternal -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks
        (h1 == header 1). Konten teks ini sendiri berada di dalam
        sebuah paragraf, yang ditandai oleh elemen p.
    </p>

    <!-- CSS langsung pada atribut style -->
    <p style="font-weight: bold;">
        Paragraf kedua.
    </p>
  </body>
</html>

Mari kita coba jalankan kode yang ada pada kode di atas! Sebelum menjalankan kode tersebut, tentunya kita harus membuat file style.css yang direferensikan oleh elemen link pada kode di atas terlebih dahulu. Simpan kode di atas pada sebuah file bernama referensi-css.html, dan kemudian buat sebuah file baru dengan nama style.css di dalam direktori yang sama dengan referensi-css.html. Isikan file style.css dengan kode berikut:

p {
    font-size: 50px;
}

Sedikit catatan untuk mereferensikan file CSS eksternal, pada kode di atas, file style.css harus berada di dalam direktori yang sama karena atribut href diisikan tanpa penunjuk direktori. Jika misalnya kita ingin menyimpan file pada direktori yang berbeda, maka kita dapat menambahkan direktori sebelum nama file. Misalnya jika file disimpan dalam subdirektori “style”, kita dapat mengisikan style/style.css pada atribut href.
Setelah selesai menyimpan referensi-css.html dan style.css, jalankan referensi-css.html