Kode CSS internal terletak di dalam bagian <head> pada halaman. Class dan ID bisa untuk dipergunakan merujuk pada kode CSS, tapi hanya akan aktif di halaman itu. Style CSS yang dipasang menggunakan metode ini akan di-download setiap kali halaman terpanggil, jadi hal ini akan meningkatkan kecepatan dari akses.
Tapi, ada beberapa case yang dimana penggunaan internal stylesheet yang justru berguna. Diantaranya yaitu untuk mengirimkan template halaman pada seseorang dikarenakan semuanya bisa terlihat dalam 1 halaman, jadi akan lebih mudah untuk melihat previewnya. CSS internal meletakkannya di dalam tag <style></style>. Contohnya:
<head>
<style type="text/css">
p {color:white; font-size: 10px;} .
center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>
Manfaat internal CSS:
1. Perubahan terjadi di 1 halaman
2. Class dan ID bisa dipergunakan oleh internal stylesheet
3. Tidak perlu meng-upload berbagai file dikarenakan HTML dan CSS bisa digunakan pada file yang sama.
Kekurangan menggunakan Internal CSS:
1. Meningkatnya waktu akses pada website
2. Perubahan hanya terjadi pada 1 halaman tidak efisien jika kalian ingin menggunakan CSS yang sama pada beberapa file.
Cara menambahkan internal CSS ke halaman HTML
1. Buka file HTML kalian menggunakan text editor. Jika halaman telah di-upload ke hosting, kalian dapat menggunakan text editor yang sudaj disediakan oleh hosting . Jika memiliki file HTML pada komputer, kalian bisa menggunakan text editor untuk meng-edit dan lalu meng-upload file ke akun hosting kalian dengan menggunakan aplikasi FTP.
2. Temukan bagian awal kode <head> lalu tambahkan kode berikut dibawah ini pada bagian bawahnya
<style type="text/css">
3. Di baris baru, tambahkan rule CSS:
body {
background-color: blue;
}
h1 {
color: red; padding: 60px;
}
4. Jika sudah menambahkan rule CSS, tambahkan tag penutup:
</style>
Nanti file HTML yang sudah ditambahkan style CSS bisa terlihat seperti ini:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: blue;
}
h1 {
color: red; padding: 60px;
}
</style>
</head>
<body>
<h1>Hostinger Tutorials</h1>
<p>This is our paragraph.</p>
</body>
</html>
Baca juga Kekurangan Pada Topologi Jaringan Tree
Kategori : Pelatihan