Halo sobat Technosia.id, kemarin kita telah membahas tentang pengenalan HTML dan pada kesempatan kali ini kita akan membahas tentang CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan halaman web.
Dalam artikel ini, kita akan menjelajahi penggunaan dasar CSS dan bagaimana Anda dapat menggunakan CSS untuk mempercantik tampilan website Anda.
Apa Itu CSS?
CSS adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan format dokumen HTML. Dengan CSS, Anda dapat mengontrol warna, ukuran, tata letak, dan berbagai aspek tampilan halaman web.Bagaimana CSS Bekerja?
CSS bekerja dengan memilih elemen HTML yang ingin Anda gayakan, dan kemudian memberikan aturan gaya untuk elemen tersebut.Beberapa hal yang dapat Anda lakukan dengan CSS antara lain:
1. Menentukan warna dan latar belakang:
Dengan CSS, Anda dapat mengubah warna teks, latar belakang, dan elemen-elemen lain pada halaman web. Anda dapat menggunakan warna solid, gradasi, dan gambar sebagai latar belakang.2. Mengatur tata letak:
Anda dapat menentukan posisi, ukuran, dan orientasi elemen dalam halaman web. Dengan CSS, Anda dapat mengatur tata letak dua kolom, tiga kolom, grid, atau tata letak khusus lainnya.3. Mengubah gaya tipografi:
Anda dapat mengubah font, ukuran, warna, dan gaya lain dari teks pada halaman web. Anda juga dapat menambahkan efek bayangan, garis bawah, atau hiasan lainnya pada teks.4. Animasi dan transisi:
Dengan CSS, Anda dapat membuat animasi dan efek transisi yang menarik pada elemen-elemen halaman web. Ini mencakup animasi pergerakan, perubahan ukuran, dan efek fading.Contoh Penggunaan CSS:
/* Ini adalah komentar CSS */
/* Mengatur warna latar belakang dan teks */
body {
background-color: #f0f0f0;
color: #333;
}
/* Mengatur gaya untuk heading */
h1 {
color: #008080;
font-size: 24px;
text-align: center;
}
/* Mengatur gaya untuk paragraf */
p {
font-family: Arial, sans-serif;
line-height: 1.5;
}
Dalam contoh di atas, kita menggunakan CSS untuk mengatur warna latar belakang dan teks pada halaman web, mengatur gaya untuk heading (`h1`), dan mengatur gaya untuk paragraf (`p`).