Kalian bisa menggunakan elemen HTML seperti <b>, <i> dan <u> untuk mengubah bentuk tulisan dalam HTML. Kalian juga bisa menggunakan elemen <font> untuk mengubah bentuk huruf, walaupun itu sudah mulai ditinggalkan oleh HTML. Tapi, cara tersebut kurang efisien kalau kalian ingin menerapkan sekumpulan perubahan yang relatif sama pada banyak halaman HTML. Kalau kalian ingin menggunakan banyak perubahan bentuk tampilan sekaligus untuk satu elemen HTML kalian bisa menggunakan CSS. Kode CSS dalam HTML bisa ditambahkan dengan 3 cara.
- Inline CSS dengan menggunakan atribut style
- Elemen <style> yg berisi kode CSS.
- File CSS terpisah yang dihubungkan dengan file HTML menggunakan elemen <link>.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
<h2 style="color : red">Judul</h2>
<p>paragraf 1</p>
<p>paragraf 2</p>
<p>paragraf 3</p>
<p>paragraf 4</p>
<p>paragraf 5</p>
<p>paragraf 6</p>
<p style = "color : #00ff00">paragraf 7</p>
<p>paragraf 8</p>
</BODY>
</HTML>
CSS Internal
Jika kalian ingin menggunakan style css pada beberapa elemen HTML di halaman HTML yang sama kalian bisa menggunakan elemen <style>. Elemen <style> bisa berisi kode CSS yang berisi sekumpulan selector dengan properti dan nilainya. Satu selektor bisa digunakan untuk mempengaruhi tampilan beberapa elemen dalam kode HTML. Kode HTML di bawah ini menggunakan elemen <style> untuk mengubah warna huruf pada elemen <p>.<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
p{
color: blue;
}
</style>
</HEAD>
<BODY>
<h2>Judul</h2>
<p>paragraf 1</p>
<p>paragraf 2</p>
<p>paragraf 3</p>
<p>paragraf 4</p>
<p>paragraf 5</p>
<p>paragraf 6</p>
<p style = "color : #00ff00">paragraf 7</p>
<p>paragraf 8</p>
</BODY>
</HTML>
Kode CSS dalam elemen <style> di atas mengubah semua warna tulisan dalam paragraf atau isi elemen <p> kecuali yang memiliki atribut style. Salah satu elemen <p> pada kode HTML di atas menggunakan atribut style. Teks dalam elemen tersebut memiliki warna berbeda dengan elemen <p> lainnya.
Huruf p sebelum tanda kurung kurawal { ... } disebut dengan selector CSS. Selain berdasarkan nama elemen HTML, kalian bisa mengubah sebagian tampilan isi elemen HTML dengan menggunakan class atau id. Untuk saat ini, fokus saja ke cara penggunaan kode CSS-nya. Pembahasan yang lebih rinci tentang CSS akan saya tulis secara terpisah.
CSS Eksternal
Selain dengan menggunakan dua cara di atas, style CSS juga bisa disimpan pada file terpisah dengan ekstensi *.css dan digunakan untuk beberapa file HTML. Satu file CSS bisa digunakan untuk mengubah banyak file sekaligus. Untuk menggunakan file CSS kalian perlu menambahkan tag <link> seperti di bawah ini.<link rel="stylesheet" href="nama_file.css">
"nama_file.css" pada href bisa kalian ganti dengan nama file CSS yang kalian gunakan. Kalian bisa menambahkan beberapa tag link di antara tag <head> dan penutupnya.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<link rel="stylesheet" href="nama_file.css">
</HEAD>
<BODY>
<h2>Judul</h2>
<p>paragraf 1</p>
<p>paragraf 2</p>
<p>paragraf 3</p>
<p>paragraf 4</p>
<p>paragraf 5</p>
<p>paragraf 6</p>
<p style = "color : #00ff00">paragraf 7</p>
<p>paragraf 8</p>
</BODY>
</HTML>Isi file CSS sama dengan isi yang kalian lihat di tengah tag <style>. Kalian tidak perlu tag <style> lagi dalam file CSS, walaupun kalian tetap bisa menggunakannya.
p{
color: blue;
font-weight: bold;
font-size: 24px;
}