Penulisan Internal CSS

Setelah anda belajar cara menuliskan css secara inline, maka selanjutnya coba untuk menuliskan internal css. Penulisan css secara internal memiliki beberapa kelebihan bila dibandingkan dengan inline css. Pada internal css sudah dikenal atau digunakan selektor. Dengan selektor ini css dapat digunakan berkali-kali dibagian html. Maka dari itu baiknya kita mengenal apa itu selektor css.

  1. Selektor class, menggunakan tanda titik ".".
    .kotak { /* kode css*/}
  2. Selektor id, menggunakan tanda pagar "#".
    #kotak { /* kode css*/}
  3. Selector tag, menggunakan nama tag.
    h1{ /* kode css*/}
Pada nomor 1 dan 2 kotak adalah nama selektor, awalan titik "." untuk jenis class dan pagar "#" untuk jenis id. Sedangkan untuk selektor tag "h1" tidak ada awalan namun namanya tidak boleh bebas melainkan harus mengikuti nama-nama yang ada di tag html.

Setelah anda mengenali jenis-jenis selektor mari kita coba mengetikkan kodenya.


<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.kotak{
width: 100px;
height: 100px;
background-color: blue;
color: white;
padding: 10px;
text-align: center;
float: left;
}
#kotak{
width: 100px;
height: 100px;
background-color: green;
color: white;
padding: 10px;
text-align: center;
float: left;
}
kotak{
width: 100px;
height: 100px;
background-color: red;
color: white;
padding: 10px;
text-align: center;
float: left;
}
</style>
</head>
<body>
<div class="kotak">
Ini adalah selektor kotak jenis class.
</div>
<div id="kotak">
Ini adalah selektor kotak jenis id.
</div>
<kotak>
Ini adalah selektor kotak jenis tag.
</kotak>
</body>
</html>



Nah dari kode di atas ada beberapa hal yang perlu diingat.
  1. Kode css di dalam tag head ==> <head>
  2. Kode css di dalam tag style ==> <style> 
  3. Memanggil css selektor class dengan cara menuliskan atribut class dengan nilai nama selektor.
    class="kotak"
  4. Memanggil css selektor id dengan cara menuliskan atribut id dengan nilai nama selektor.
    id="kotak"
  5. Memanggil css selektor tag dengan cara menuliskan nama tag sama dengan nama selektor.
    <kotak>
Khusus untuk selektor tag dibuat untuk mengatur style berdasarkan nama tag. Misalkan kita hendak mewarnai semua judul (h1) dengan warna merah. Maka lebih baik menuliskan selektor tag daripada yang lain sebab tidak perlu lagi dipanggil dengan atribut. Namun perlu anda ingat dari ketiga selektor tersebut yang paling sering digunakan oleh banyak orang adalah selektor class.

Catatan: Penulisan internal css sudah lebih efisien dari inline css karena selektor css yang sama sudah dapat dipanggil berulang kali. Namun internal css tidak dapat berbagi css dengan html pada file lain. Selanjutnya pelajari penulisan eksternal css. 

Terima Kasih.

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE