Style sheet internal adalah kode CSS yang digunakan di dalam dokumen HTML untuk memberikan tampilan desain dan style pada elemen-elemen yang ada di halaman web. Untuk menentukan style sheet internal, kita menggunakan tag <style> di dalam tag <head> pada sebuah dokumen HTML. Berikut ini adalah cara menggunakannya dan beberapa contoh penggunaan tag <style> sebagai style sheet internal.
Menggunakan tag <style>
Untuk menambahkan style sheet internal ke dalam dokumen HTML, kita perlu menggunakan tag <style> dengan atribut type. Nilai dari atribut type seharusnya adalah “text/css”, yang akan memberitahukan browser bahwa kode di dalam tag tersebut merupakan kode CSS (Cascading Style Sheets).
Contoh menambahkan tag <style> ke dalam dokumen HTML:
<!DOCTYPE html><html><head> <title>Latihan Style Sheet Internal</title> <style type="text/css"> /* kode CSS di sini */ </style></head><body> ...</body></html>Contoh penggunaan tag <style> sebagai style sheet internal
Berikut ini adalah beberapa contoh penggunaan tag <style> sebagai style sheet internal.
- Mengubah warna teks paragraf:
<!DOCTYPE html><html><head> <title>Contoh Warna Teks</title> <style type="text/css"> p { color: blue; } </style></head><body> <p>Paragraf ini akan ditampilkan dengan warna teks biru.</p></body></html>- Mengatur ukuran dan jenis font:
<!DOCTYPE html><html><head> <title>Contoh Ukuran dan Jenis Font</title> <style type="text/css"> h1 { font-family: Arial, sans-serif; font-size: 24px; } </style></head><body> <h1>Judul ini menggunakan jenis font Arial dengan ukuran 24px.</h1></body></html>- Mengatur style tautan (link) saat dihover:
<!DOCTYPE html><html><head> <title>Contoh Style Tautan</title> <style type="text/css"> a:hover { color: red; text-decoration: none; } </style></head><body> <a href="https://www.google.com">Hover di atas saya!</a></body></html>Dengan menggunakan tag <style> sebagai style sheet internal, kita dapat mengatur tampilan dan desain elemen pada halaman web dengan mudah, tanpa perlu menggantung pada file eksternal CSS. Namun, dalam kasus yang kompleks, menggunakan file eksternal CSS mungkin lebih disarankan karena lebih mudah dalam melakukan pengelolaan dan maintainability.
