Pada tutorial sebelumnya, kita sudah membahas Tutorial Belajar HTML5 Bagian 18 : Penjelasan Tentang Header di HTML, selanjutnya kita akan mempelajari bagaimana cara membuat kode CSS di HTML agar tampilan dokumen HTML terlihat bagus.
Agar tampilan dokumen HTML terlihat lebih bagus, maka kita bisa menggunakan kode Cascading Style Sheets (CSS) untuk membentuk bagaimana dokumen disajikan di layar, dalam cetakan.
W3C secara aktif mempromosikan penggunaan style sheets di Web sejak konsorsium didirikan pada tahun 1994.
Cascading Style Sheets (CSS) membuat desain terhadap tag dan atribut HTML menjadi lebih mudah.
Dengan menggunakan CSS, Anda dapat menentukan sejumlah properti gaya untuk elemen HTML tertentu.
Setiap properti memiliki nama dan nilai, dipisahkan oleh titik dua (:). Setiap deklarasi properti dipisahkan oleh titik koma (;).
Mari kita lihat contoh memberi warna & ukuran font pada dokumen HTML menggunakan tag <font> :
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Halo dunia!</font></p>
</body>
</html>
Kita dapat menulis ulang contoh di atas dengan bantuan kode CSS sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Halo dunia!</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Anda dapat menggunakan CSS dengan 3 cara di dokumen HTML :
- External Style Sheet – Membuat kode aturan style sheet dalam file .css terpisah dari file HTML, kemudian sertakan file CSS tersebut dalam dokumen HTML Anda menggunakan tag <link> HTML.
- Internal Style Sheet – Membuat kode aturan style sheet pada bagian <head> dari dokumen HTML menggunakan tag <style>.
- Inline Style Sheet – Membuat kode aturan style sheet secara langsung bersama dengan elemen HTML menggunakan atribut style pada <body> HTML.
Mari kita lihat ketiga cara ini satu persatu lengkap dengan contohnya
External Style Sheet
Jika Anda ingin menerapkan desain yang sama untuk semua dokumen HTML, maka disarankan untuk membuat file CSS pada file tersendiri.
File CSS ini nantinya memiliki ekstensi sebagai .css dan bisa dipanggil ke setiap file HTML menggunakan tag <link> untuk memberikan gaya pada setiap tag elemen dalam dokumen HTML.
Contoh, kita membuat sebuah file CSS dengan nama style.css, berikut susunan kodenya :
.merah{
color:red;
}
.besar{
font-size:20px;
}
.hijau{
color:green;
}
Pada kode di atas, saya membuat 3 aturan css dengan membuat 3 class yang berbeda untuk kita gunakan nanti di dokumen HTML, yaitu :
- .merah – class yang berfungsi untuk memberi warna merah (red) pada huruf/teks
- .besar – class yang berfungsi mengubah ukuran huruf menjadi sebesar 20px
- .hijau – class yang berfungsi memberi warna hijau (green) pada huruf/teks
Itu penjelasan singkatnya, Anda tidak usah bingung dulu darimana aturan ini berasal. Kita akan mempelajari aturan penggunaan CSS pada tutorial terpisah.
Setelah file tersebut disimpan dengan nama style.css, mari kita panggil file CSS eksternal tersebut dalam dokumen HTML dengan menggunakan tag <link> berikut :
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<p class = "merah">Tulisan ini berwarna merah </p>
<p class = "besar">Tulisan ini diperbesar 20px </p>
<p class = "hijau">Tulisan ini berwarna hijau </p>
<p class = "besar hijau"> Tulisan ini diperbesar 20px dan berwarna hijau</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Internal Style Sheet
Jika Anda ingin memberi desain atau gaya hanya pada 1 halaman HTML saja, maka Anda dapat menggunakan teknik Internal Style Sheet dengan menulis langsung kode CSS di bagian <header> dokumen HTML menggunakan tag <style>.
Mari kita gunakan contoh yang sama, tetapi kali ini kita akan menggunakan tag <style> :
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.merah {
color: red;
}
.besar{
font-size:20px;
}
.hijau{
color:green;
}
</style>
</head>
<body>
<p class = "merah">Tulisan ini berwarna merah </p>
<p class = "besar">Tulisan ini diperbesar 20px </p>
<p class = "hijau">Tulisan ini berwarna hijau </p>
<p class = "besar hijau"> Tulisan ini diperbesar 20px dan berwarna hijau</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Inline Style Sheet
Anda juga bisa membuat desain/gaya langsung pada tag elemen HTML. Cara ini dilakukan jika hanya ingin memberikan gaya pada beberapa tag elemen HTML dalam 1 dokumen saja.
Masih dengan contoh yang sama, kita akan buat dengan teknik inline style sheet.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">Tulisan ini berwarna merah </p>
<p style = "font-size:20px;">Tulisan ini diperbesar 20px </p>
<p style = "color:green;">Tulisan ini berwarna hijau </p>
<p style = "color:green;font-size:20px;"> Tulisan ini diperbesar 20px dan berwarna hijau </p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Itu dia 3 teknik yang biasanya digunakan untuk memasukkan kode CSS di HTML, semoga tutorial ini membantu Anda untuk memahami bagaimana cara agar kode CSS bisa digunakan di dalam dokumen HTML.
