Cara Penulisan CSS External

Penulisan css secara external yaitu memisahkan tulisan (kode) html dengan css. Kode html dan kode css dituliskan pada file yang berbeda. Berikut beberapa kegunaan css ditulis secara external.
  • Kode css dapat digunakan beberapa kali dengan mudah.
  • Kode html maupun css menjadi ringkas.
Kode css dapat digunakan beberapa kali dengan mudah contoh nya sebuah kelas misal bernama "card". class card ini dapat dengan mudah dipakai kembali di setiap tag html tanpa harus dituliskan kembali kode css nya.

Kode html maupun css menjadi ringkas maksudnya adalah kode tidak bercampur di satu halaman sehingga mengurangi baris kode pada html. Kode yang ringkas atau tidak campur aduk akan membuatnya mudah dibaca kembali.

Cara membuat css external
  • Buat file html
  • Buat file css
  • Buat tag link
  • Panggil class pada css di tag html
# Nama file external.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Penulisan  CSS External</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<div class="card">
Contoh External CSS
</div>
</body>
</html>

# Nama file external.css
.card{
width: 100%;
height: 100%;
background-color: black;
color: white;
text-align: center;
        font-size: 60pt;

text-shadow: 2px 2px #ff0000;
}

#Penjelasan file external.html
Sebelum css digunakan di html, maka harus dikenalkan terlebih dahulu pada tag link di dalam tag head. Atribut href harus menunjukkan dimana file css yang akan dipakai. Langkah terakhir adalah memanggil class css di tag html. format Atribut: class, value: nama class. 

#Penjelasan file external.css
Class selector pada css ditandai dengan awalan (.) dan di ikuti nama selector yaitu card. Isi dari selector diawali dengan { (buka kurung kurawal) dan diakhiri } (tutup kurung kurawal). Di html dikenal istilah atribut sedangkan pada css dikenal dengan properti yang artinya kurang lebih sama. Properti pada selector class card adalah width, height, background-color, color, dan text-align. Value dari peroperti tersebut adalah 100%,100%, black, white, dan center.



Popular posts from this blog

Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis

Aplikasi CRUD menggunakan Template Admin LTE

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman