HTML Css
HTML Css, Css merupakan kependekan dari Cascading Style Sheets yang mana fungsinya untuk memberikan efek style pada website yang telah kita buat menggunakan html. Ada 3 cara untuk menggunakan CSS ini, salah satunya pernah kita buat.
Inline css, yang ini kita sudah bahas pada materi HTML Style. Yang mana kita bisa menambahkan style dengan menambahkan atribut style pada element yang akan kita tambahkan.
Internal css, yaitu cara penulisan css di dalam file html. Jadi kita bisa menyisipkan kode style css diantara tag penutup head dan tag pembuka body.
Eksternal css, yaitu penulisan css secara terpisah pada file baru. Cara ini sering di pakai karena akan memudahkan kita untuk menulskannya.
Dari penjelasan di atas kita akan melihat masing-masing contohnya.
Inine css
<p style="color: blue;">Contoh penggunaan inline css, merubah text menjadi warna biru</p>
<p style="color: red;">Contoh penggunaan inline css, merubah text menjadi warna merah</p>
<p style="color: yellow;">Contoh penggunaan inline css, merubah text menjadi warna kuning</p>
Kita bisa membuat macam style lainnya pada value style. Untuk mesiahkan value satu dengan lainnya kita bisa menambahkan titik koma (;)
Internal css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inline css</title>
</head>
<style type="text/css">
.p-1{
color: blue;
}
.p-2{
color: red;
}
.p-3{
color: yellow;
}
</style>
<body>
<p class="p-1">Contoh penggunaan inline css, merubah text menjadi warna biru</p>
<p class="p-2">Contoh penggunaan inline css, merubah text menjadi warna merah</p>
<p class="p-3">Contoh penggunaan inline css, merubah text menjadi warna kuning</p>
</body>
</html>
Kita menambahkan element style di antara tag penutup head dan tag pembuka body. Selanjutnya kita buat yang namanya class pada tag/element yang ingin kita tambahkan style. Pada contoh diatas kita bisa melihat ada 3 class yaitu p-1 p-2 p-3. Class ini yang nantinya akan kita panggil pada element style.
Untuk memanggil suatu class tag/element kita harus menambahkan tanda baca titik (.) di depan nama class nya. Silahkan kalian perhatikan kodenya
Eksternal css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inline css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="p-1">Contoh penggunaan inline css, merubah text menjadi warna biru</p>
<p class="p-2">Contoh penggunaan inline css, merubah text menjadi warna merah</p>
<p class="p-3">Contoh penggunaan inline css, merubah text menjadi warna kuning</p>
</body>
</html>
Nah eksternal ini kita bisa memisahkan style css pada file yang berbeda. Cara ini akan membuat kode kita menjadi rapih dan lebih enak untuk di praktekan. Caranya adalah kita membuat file baru dengan nama style.css atau dengan nama lainnya dengan catatan harus menggunakan ekstensi (.css) kemudian pada file itu kita memanggil nama class tag/elementnya. Penulisan class nya sama saja dengan internal css, hanya saja berbeda file dan eksternal css tidak menggunakan element style di awalnya, jadi langsung saja panggil nama classnya.
Selamat belajar dan jangan lupa untuk mempraktekannya.