Penulisan CSS secara internal atau embedded adalah salah metoda dalam menata gaya pada halaman HTML. Penulisan CSS secara internal dilakukan dengan menempatkan kode CSS di dalam bagian tag <head> pada halaman HTML. Selektor HTML, ID maupun Class dapat digunakan sebagai acuan pada kode CSS untuk memberikan gaya halaman HTML tersebut.
Style pada metoda ini akan dieksekusi pertama kali saat halaman tersebut dipanggil. Hal ini karena kode CSS diletakkan pada bagian tag <head>. Kemudian rujukan style pada kode CSS akan langsung diaplikasikan pada tiap tiap elemen tag HTML pada halaman tersebut.
Cara penulisan style secara inline (embedded) style sheet :
CSS
1
2
3
4
5
<head>
<style type="text/css">
selector{property:value;property2:value2;}
</style>
</head>
Contoh penulisan style secara inline (embedded) pada halaman HTML :
KODE SCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-color:#91c483;}
h1{color:maroon;}
#content1{color:green;}
#content2{color:olive;}
</style>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<p id="content1">Something usefull here..</p>
<p id="content2">One bad chapter doesn't mean your life is over. Turn the page and move on..</p>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan :
Manfaat yang diperoleh pada penggunaan kode CSS secara internal adalah style atau gaya dapat diaplikasikan untuk beberapa atau banyak elemen HTML. Anda cukup menuliskan satu style tertentu, dan dengan rujukan selektor baik itu tag html, Class ataupun lainnya, style tersebut dapat digunakan oleh tiap-tiap elemen HTML yang memiliki selektor atau class yang sama.
Penggunaan kode CSS secara internal masih cukup efektif saat anda ingin melakukan perubahan gaya pada halaman HTML dimana terdapat elemen yang menggunakan Id atau class yang harus diberikan perubahan tampilan.
Namun, metode CSS secara internal memiliki kelemahan berupa rujukan kode CSS hanya efektif berlaku untuk halaman (file HTML) yang aktif saja. Kode CSS tidak dapat digunakan oleh file HTML yang lainnya. Kemudian kelemahan lainnya adalah waktu akses website akan menjadi lambat. Hal ini disebabkan kode CSS secara inline akan selalu direload setiap kali pengguna mengakses halaman tersebut.
Catatan : Penempatan style CSS secara internal normalnya berada diantara tag <head></head>. Namun pada beberapa kasus misalnya pada kode HTML yang cukup panjang, penempatan kode CSS secara internal dapat ditempatkan di dalam tag <body></body>. Namun kode CSS ini hanya akan efektif berlaku bagi elemen tag HTML yang berada setelah kode tersebut dan tidak akan mempengaruhi elemen tag HTML yang berada sebelum kode tersebut.
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
