Mengenal CSS
(Cascading Style Sheet)
CSS adalah singkatan dari Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. arti lain dari CSS yaitu bahasa yang digunakan untuk menentukan tampilan dan format halaman website. CSS bukan merupakan bahasa pemrograman. Dengan CSS, kita dapat mengatur jenis font, warna tulisan, latar belakang web, dan lain sebagainya.
CSS biasanya digunakan pada bahasa markup seperti HTML dan XML untuk membangun sebuah halaman web yang menarik dan memiliki fungsi yang berjalan baik.
Apa Fungsi CSS ?
Secara umum, CSS berfungsi untuk mengatur tampilan atau desain halaman website agar lebih menarik dan terstruktur. Adapun beberapa fungsi CSS lainnya adalah :
1. Mempercepat Loading Halaman Web
Kita bisa menuliskan satu rangkaian kode CSS untuk dapat digunakan beberapa halaman web sekaligus. Sehingga jumlah kode bisa diminimalkan dan proses loading website bisa lebih cepat.
2. Memudahkan Pengelolaan Kode
Dengan CSS kita tidak perlu mengubah kode setiap halaman apabila ingin mengganti desain tampilan web. Kita hanya perlu mengubah satu elemen dalam file CSS, maka semua yang menggunakan elemen tersebut akan ikut berubah tampilannya.
3. Membuat Website lebih responsive
CSS memiliki berbagai property untuk mengatur tampilan konten sesuai kebutuhan layar, misalnya dengan max-width. Kita dapat mengatur max-width sesuai ukuran layar maka pada saat halaman web ditampilkan di Komputer dan di Smartphone akan menyesuaikan ukuran layarnya.
Apa Jenis-jenis CSS ?
Jenis CSS dibedakan berdasarkan penempatan kodenya, yaitu Inline, Internal dan External.
1. Inline CSS
Kode CSS yang dituliskan di dalam file HTML. Jenis CSS ini hanya mempengaruhi satu baris kode HTML tersebut.
Perhatikan baris kode berikut :
<p style="font-size: 20px;color: blue;">Belajar CSS</p>Inline CSS tidak bisa digunakan ke semua halaman website sekaligus.
Namun, jenis CSS ini tepat digunakan ketika kita ingin membuat elemen
HTML dengan format khusus hanya pada halaman tersebut.
2. Internal CSS
Kode CSS yang dituliskan di bagian header file HTML. Jenis CSS ini mengatur tampilan dari sebuah halaman web.
Perhatikan baris kode berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
p {
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<p>Belajar CSS</p>
</body>
</html>Kode diatas akan mendapatkan hasil seperti ini :
Internal CSS dapat digunakan jika kita ingin membuat tampilan halaman web berbeda dengan yang lainnya.
3. External CSS
Kode CSS yang disimpan di luar file HTML sebagai file .css. Jenis ini berfungsi untuk mengatur tampilan semua halaman website.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head> Kode diatas menunjukan halaman web kita menggunakan file style.css untuk mengatur desain tampilannya.
Cara Kerja CSS ?
Pada dasarnya, CSS akan bekerja ketika browser memuat halaman web. Berikut adalah penjelasannya :
Sumber: MDN Web Docs
Browser akan memuat file HTML dan CSS (jika menggunakan external CSS), kemudian browser mengubah keduanya menjadi document object model (DOM). komponen inilah yang mewakili file HTML dan CSS dalam memori perangkat pengguna. Setelah diubah menjadi DOM, Lalu browser akan melakukan rendering (proses browser menerapkan pengaturan di kode CSS pada elemen HTML). Hasilnya adalah halaman website yang tampil di layar perangkat pengguna.