Pengenalan CSS
Mari kita bayangkan sebuah gedung bertingkat, di mana HTML adalah struktur fisik gedung itu sendiri 🏢, dan CSS adalah cat atau dekorasi yang kita gunakan untuk mengubah penampilan dan nuansa ruangan di dalam gedung 🎨.
Inilah peran CSS (cat atau dekorasi) dalam analogi ini. Dengan CSS, kita dapat memberikan warna dinding, memilih jenis lantai, menambahkan perabotan, menggantung lukisan di dinding, dan mengatur pencahayaan 💡. Semua ini membantu mengubah suasana dan penampilan ruangan agar sesuai dengan keinginan kita.
Apa itu CSS ? 🌐
- CSS adalah singkatan dari Cascading Style Sheets
- CSS digunakan untuk mengontrol presentasi visual dari sebuah halaman web, termasuk tata letak, warna, font, dan tampilan elemen-elemen lainnya. Dengan menggunakan CSS, kamu dapat mengubah penampilan dan nuansa halaman web dengan mudah dan efisien
- CSS juga memungkinkan adanya penggunaan yang efisien, di mana kamu dapat mendefinisikan aturan sekali dan menerapkannya ke beberapa elemen secara bersamaan, menghemat waktu dan usaha dalam pengembangan web
- stylesheets eksternal disimpan dalam file yang berkesktensi .css
Mengapa harus menggunakan CSS ?
CSS dapat membantu kamu untuk membuat sebuah halaman website yang lebih menarik secara visual ataupun juga secara fungsi misalnya dalam mengatur tataletak
body {
background-color: #F9DBBD;
}
h1 {
color: #A53860;
}
p {
color: white;
}
copy code CSS diatas dan tambahkan pada file HTML yang kamu buat pada materi sebelumnya
kamu juga dapat menambahkannya langsung pada file html kamu dengan menggunakan tag <style/>kode CSS kamu</style> , seperti contoh dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
body {
background-color: #F9DBBD;
}
h1 {
color: #A53860;
}
p {
color: white;
}
</style>
</head>
<body>
<h1>Halaman pertama saya</h1>
<p>paragraf pertama saya.</p>
</body>
</html>
🎉yeay! web sederhana kamu sekarang sudah sedikit lebih keren👏
Penjelasan
- tag
<style>digunakan untuk menjalankan kode CSS yang kamu buat body,h1,padalah contoh tag HTML yang menjadi target untuk dilakukan perubahan visual sesuai kasus diatas. Kamu juga dapat menggunakan attribut didalam sebuah tag HTML seperti attributeclassatauid, seperti contoh dibawah ini :
<h1 class="warnai-text">Halaman pertama saya</h1>
dan untuk CSSnya,
.warnai-text {
color: #A53860;
}