Jika kamu sudah paham mengenai apa itu css, selajutnya kita akan belajar bagaimana cara memenggil css sehingga bisa digunakan di dalam file html.
Secara umum ada 3 cara memanggil css di dalam html. Yaitu:
- Inline CSS
- Internal CSS
- External CSS
Daftar Isi
Kita akan bahas satu persatu cara mememanggil CSS dengan datail.
Inline CSS
Inline CSS adalah cara memanggil CSS yang paling mudah dan cepat dilakukan. Caranya adalah menulis CSS ke dalam element HTML langsung. Dengan nambahkan tag style="" secara langsung di tag html.
Contoh: Penulisan CSS dengan mode Inline
<div style="background:red;color:white;padding:10px">Div dengan background merah</div>
<div style="background:black;color:white;padding:10px">Div dengan background hitam</div>Internal CSS
Cara memanggil CSS yang kedua adalah dengan mode internal. Berbeda dengan inline css yang menulis style langsung di dalam element, internal CSS membuat CSS di dalam tag <style></style> dan ditaruh di dalam tag <head></head>.
Contohnya:
<html>
<head>
<title>Internal CSS</title>
<style>
div {
background: red;
color: white;
padding: 15px;
margin: 15px;
}
.border {
border: 1px solid green;
}
</style>
</head>
<body>
<div class="border"> Contoh Internal CSS</div>
<div class="border"> Contoh Internal CSS</div>
<div class="border"> Contoh Internal CSS</div>
</body>
</html>Hasilnya:
Internal CSS lebih efektif dan efisien dibandingkan dengan inline CSS. Dengan internal CSS kamu bisa membuat styling dan bisa dipakai berulangkali di dalam element HTML.
External CSS
Cara memanggil CSS yang terakhir dengan external CSS. External artinya kita memisahkan CSS dari file HTML. Untuk memasukkan CSS ke dalam file HTML kita akan memakai tag <link rel="stylesheet" href="path_ke_css_file" />.
Jika sedang membuat project web yang besar, sebaiknya menggunakan mode external CSS karena akan jauh lebih mudah untuk maintenance dan juga efisiensi size CSS.
Contohnya:
Pertama: Misalnya kita punya file .css dengan nama style.css. File ini akan berisi semua style style CSS.
Kedua: Di dalam file HTML kita akan include dengan menggunakan tag <linl />
Isi dari style.css
body {
background: grey;
}
div {
background: red;
color: white;
padding: 15px;
margin: 15px;
}
.border {
border: 1px solid green;
}Include style.css di dalam index.html
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="border"> Contoh External CSS</div>
<div class="border"> Contoh External CSS</div>
<div class="border"> Contoh External CSS</div>
</body>
</html>Jika dilihat-lihat, external CSS ini adalah memindahkan internal CSS ke dalam sebuah file.
Oke guys, itulah cara memanggil CSS. Ada 3 yaitu inline, internal, dan external. Semoga bisa dimengerti ya. Selanjutnya kita akan mebahas satu-persatu tag CSS di artikel selanjutnya.
