Teman-teman mungkin sudah mendengar HTML. Bila belum, bisa pelajari artikel disini. CSS (Cascading Style Sheets) adalah bahasa markup paling dasar dan sudah ada sejak lama. CSS ini termasuk elemen penting dalam teknologi web sama seperti HTML dan Javascript. Mengapa CSS begitu penting? Mari pelajari.
Pengertian CSS
CSS adalah bahasa desain untuk membuat halaman website menjadi lebih menarik daripada hanya sekedar teks biasa. Bila HTML menentukan isi konten, CSS menentukan struktur visual, tata letak, dan estetika. HTML adalah bahasa markup dan CSS adalah bahasa style sheet.
Bagaimana Cara kerjanya?
Bila diibaratkan mobil, HTML adalah rangka mobil, maka CSS akan menjadi penentu bentuk body nya, warna catnya dan yg berhubungan dengan design mobil. Sebuah website bisa berjalan tanpa CSS hanya saja tampilannya tidak menarik dan sulit melakukan navigasi. CSS bertanggung jawab atas font color, tata letak, format.
Manfaat CSS
- Respon halaman lebih cepat. Dengan banyaknya kode, kecepatan website menampilkan halaman akan lebih lambat dan CSS memungkinkan untuk meminimalkan penulisan kode dan 1 blok CSS bisa menerapkannya dalam banyak tag pada dokumen HTML.
- User experience akan lebih baik karena tampilan dan formatnya yang ramah digunakan oleh user.
- Melakukan perubahan tampilan jadi lebih mudah karena tidak perlu dilakukan setiap halaman. Cukup lakukan perubahan pada file CSS yang sesuai.
- Responsive tampilan agar pengalaman navigasi menyesuaikan dengan perangkat yang berbeda-beda seperti desktop maupun mobile.
Contoh CSS sederhana
Berikut ini adalah contoh CSS sederhana. Pada contoh ini, Syntax CSS menyatu dengan HTML.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Paragraf ini diberi warna menggunakan CSS</p>
</body>
</html>Maka hasil dari HTML dan CSS tersebut akan seperti dibawah ini.
Penjelasan:
p {
color: red;
} Pada block CSS ini yang berarti setiap tag <p> akan berwarna merah.