BAB 1 – MENGENAL CSS
A. Pendahuluan
Ketika pertama kali belajar HTML, kita dapat membuat struktur halaman web seperti judul, paragraf, gambar, tabel, dan formulir. Namun tampilan website tersebut masih sangat sederhana.
Perhatikan contoh berikut.
HTML Tanpa CSS
<h1>Selamat Datang</h1>
<p>Belajar membuat website.</p>Hasil:
Selamat Datang
Belajar membuat website.Tampilannya masih polos dan kurang menarik.
Agar website terlihat profesional, diperlukan CSS.
CSS memungkinkan kita mengatur:
- Warna teks
- Warna latar belakang
- Ukuran huruf
- Jenis huruf
- Posisi elemen
- Animasi
- Responsive Design
- Layout Website
B. Pengertian CSS
CSS merupakan singkatan dari:
Cascading Style Sheets
CSS adalah bahasa yang digunakan untuk mengatur tampilan dan tata letak halaman web.
CSS bekerja bersama HTML.
Jika HTML adalah kerangka rumah, maka CSS adalah cat, dekorasi, dan desain interior rumah tersebut.
C. Fungsi CSS
CSS memiliki beberapa fungsi utama:
1. Mempercantik Tampilan Website
Contoh:
h1{
color: blue;
}Hasil:
Tulisan menjadi berwarna biru.
2. Mempermudah Pengelolaan Tampilan
Tanpa CSS:
<h1 style="color:red">Judul 1</h1>
<h1 style="color:red">Judul 2</h1>
<h1 style="color:red">Judul 3</h1>Dengan CSS:
h1{
color:red;
}Semua heading otomatis berwarna merah.
3. Membuat Website Responsive
Responsive berarti website dapat menyesuaikan ukuran layar:
- Komputer
- Laptop
- Tablet
- Smartphone
4. Memisahkan Struktur dan Desain
HTML:
<h1>Profil Sekolah</h1>CSS:
h1{
color:green;
}Prinsip ini membuat kode lebih rapi dan mudah dikelola.