Membuat Halaman Web Lebih Berwarna
Sejauh ini, halaman web yang kita kembangkan masih berwarna hitam dan putih. Jika teman-teman perhatikan, setiap aplikasi web pasti memiliki desain yang beragam. Bukan hanya warna, ukuran dari setiap elemen juga perlu diperhatikan. Untuk melakukan hal tersebut pada setiap elemen HTML, kita memerlukan CSS. Ayo kita kenalan dengan CSS!
Hubungan CSS dan HTML: Seperti Kulit Manusia
Jadi, bagaimana CSS dan HTML bekerja bersama-sama? Kita bisa menganggap HTML sebagai "kerangka tubuh" yang menentukan struktur halaman web, sedangkan CSS adalah "kulit" yang memberi tahu tampilan dan desain bagaimana harus terlihat. Mereka berkolaborasi untuk membuat halaman web kita tampak bagus dan berfungsi dengan baik. Ayo kita coba menentukan "warna kulit" pada sebuah elemen HTML, terdapat 3 cara.
Inline CSS: Ini adalah cara termudah, tapi mungkin tidak paling efisien. Dalam metode ini, kita menambahkan kode CSS langsung ke dalam elemen HTML menggunakan atribut style.
<p style="color: blue; font-size: 16px;">Teks dengan gaya langsung</p>Pada contoh di atas, kita mengganti warna dari elemen <p> menjadi biru dan mengganti ukuran font menjadi 16 piksel.
Internal CSS: Dalam metode ini, kita menulis kode CSS di dalam tag <style> yang terletak di bagian <head> dari halaman HTML. Ini memungkinkan kita menggaya beberapa elemen dalam halaman yang sama.
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>Eksternal CSS: Ini adalah metode yang lebih efisien dan disarankan dalam pengembangan web yang serius. Dalam metode ini, kita menulis kode CSS dalam file terpisah dengan ekstensi .css dan menghubungkannya ke halaman HTML menggunakan tag <link>.
p {
color: red;
background-color: black;
font-size: 18px;
}<!-- Di dalam tag head -->
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>Anatomi CSS: Selektor, Properti, dan Nilai
Selektor: Ini adalah elemen HTML yang akan diubah gayanya. Misalnya, jika kita ingin mengubah teks paragraf, selektor kita adalah
p.Properti: Ini adalah atribut tertentu yang akan kita ubah, seperti
color,font-size, ataubackground-color.Nilai: Ini adalah nilai yang kita berikan kepada properti tersebut, seperti
red,16px, atau#F0F0F0.
Sebagai analogi, kita bisa memikirkannya seperti cara kita memilih baju (selektor) dan memutuskan warna baju (properti) serta ukurannya (nilai) untuk kita pakai.
Referensi
https://www.dicoding.com/blog/dasar-penggunaan-css/ https://www.w3schools.com/cssref/index.php
Last updated