Ketika berselancar di internet, Anda sebenarnya mengakses atau membuka halaman atau laman web (web pages). Halaman web adalah dokumen yang diakses melalui internet menggunakan web browser dengan mengetik URL atau mengklik link untuk halaman web tersebut. Ada dua teknologi utama untuk membuat halaman web yaitu HTML dan CSS. Keduanya memiliki peran berbeda, namun tidak terpisahkan dalam pembuatan halaman web modern.
Untuk sebuah halaman web, HTML berperan untuk menentukan struktur dan tipe konten seperti paragraf, heading, list, dan image, sedangkan CSS lebih ke penyajian struktur dan konten agar menarik seperti layout, color, margin, padding, font-family, dan alignment. Tanpa CSS, Anda tetap bisa menyajikan konten di halaman web, namun dengan tampilan yang kurang menarik.
| BACA ARTIKEL |
|---|
| Tata Cara Penulisan Atau Sintaksis CSS |
CSS didesain untuk digunakan dengan HTML. Ada tiga cara berbeda dalam menggunakan CSS dengan HTML yaitu inline CSS, internal CSS, dan external CSS. Tergantung keperluan, bisa saja ketiga cara menggunakan CSS tersebut dipakai semua dalam membuat laman web. Berikut ini adalah penjelasan untuk masing-masing cara menggunakan CSS dengan HTML:
1. Inline CSS.
Inline CSS digunakan untuk memberi style (gaya) pada tag atau elemen HTML tertentu. Anda dapat menggunakan atribut style untuk memberi style pada tag HTML. Style hanya berlaku untuk tag HTML tersebut. Style di inline CSS memiliki prioritas utama dan akan digunakan (rendering) meskipun tag HTML juga sudah diberi style melalui internal CSS atau external CSS.
Pengunaan inline CSS sebenarnya tidak direkomendasikan karena setiap tag HTML perlu diberi style sendiri. Ketika Anda mengubah style di salah satu tag, untuk mendapatkan style yang konsisten, Anda juga perlu mengubah style pada tag lainnya. Misalnya, semua h1 berwarna merah, ketika Anda mengubah h1 menjadi berwarna hijau, Anda perlu mengubah style di semua h1 satu persatu agar berwana hijau.
Berikut ini adalah contoh kode sederhana:
<!DOCTYPE html> <html> <head> </head> <body style="background-color:yellow;"> <h2 style="color:red;">Menggunakan CSS Dengan HTML</h2> <p style="color:blue;">Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.</p> </body> </html>
2. Internal CSS.
Internal CSS digunakan untuk memberi style yang hanya berlaku pada satu laman web. Style yang diberikan diapit oleh tag <style> </style> dan diletakkan di bagian elemen head atau tag <head> dari laman web. Anda dapat menggunakan internal CSS bila pemberian style dimaksudkan hanya untuk satu laman web saja dan tidak untuk digunakan di laman web lain. Anda dapat menggunakan internal CSS bila kode untuk style tidak terlalu besar atau kompleks.
Berikut ini adalah contoh kode sederhana:
<!DOCTYPE html> <html> <head> <style type="text/css"> body {background-color:yellow;} h2 {color:red;} p {color:blue;} </style> </head> <body> <h2>Menggunakan CSS Dengan HTML</h2> <p>Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.</p> </body> </html>
3. External CSS.
External CSS adalah file berekstensi .css yang hanya berisi kode-kode style. Tujuan menggunakan external CSS adalah untuk memisahkan kode style dengan struktur dan tipe konten halaman web. External CSS dapat diterapkan di lebih dari satu halaman web sehingga semua halaman web memiliki tampilan atau desain yang seragam.
Sebagai contoh, buat file CSS bernama csseksternal.css menggunakan plain text editor seperti Notepad atau Notepad++. Tuliskan kode CSS di bawah ini sebagai style yang akan diberlakukan di halaman web. Simpan file CSS di folder yang sama tempat menyimpan file HTML.
body {background-color:yellow;} h2 {color:red;} p {color:blue;}
Buat file HTML dan di bagian tag <head> tambahkan elemen link atau tag <link>. Tag <link> ini akan digunakan untuk mengacu ke file CSS yang dibuat sebelumnya. Perhatikan penulisan <link> beserta atributnya untuk mengacu ke file CSS.
Berikut ini adalah contoh kode sederhana:
<!DOCTYPE html> <html> <head> <link href="csseksternal.css" rel="stylesheet" type="text/css"> </head> <body> <h2>Menggunakan CSS Dengan HTML</h2> <p>Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.</p> </body> </html>
Tiga cara menggunakan CSS dengan HTML di atas menghasilkan tampilan halaman web yang sama persis seperti gambar di bawah ini.
