VIP INFORMATIKA

Lab Digital SMK VIP Al Huda Kebumen

Satu platform untuk semua materi Informatika, praktikum mandiri, dan eksplorasi teknologi masa depan.

Mulai Belajar

Kamis, 25 Desember 2025

Mempercantik Website: Mengenal CSS Dasar untuk Pemula

Halo kawan-kawan kreatif! Web kalian sudah punya teks dan gambar, tapi kok tampilannya masih seperti koran lama ya? Nah, di sinilah peran CSS (Cascading Style Sheets) bekerja. Kalau HTML adalah bangunannya, maka CSS adalah cat dan interiornya!

Apa itu CSS?

CSS adalah bahasa yang digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup seperti HTML. Dengan CSS, kita bisa mengubah warna teks, jenis font, ukuran gambar, hingga layout website agar terlihat profesional.

Tiga Cara Menggunakan CSS

Ada beberapa cara memasukkan CSS ke dalam HTML, namun untuk tahap awal ini kita akan mencoba cara yang paling mudah, yaitu Internal CSS (menggunakan tag <style> di dalam <head>).

Mari Mencoba: Mengubah Warna & Font

Perhatikan contoh kode di bawah ini. Kita akan mengubah warna latar belakang dan mempercantik judul:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { background-color: #f0f4f1; }
    h1 { color: #2e7d32; text-align: center; }
    p { font-family: Arial; font-size: 18px; color: #333; }
  </style>
</head>
<body>
  <h1>Website Berwarna Saya</h1>
  <p>Sekarang tulisan ini jadi lebih rapi dan berwarna!</p>
</body>
</html>

Daftar Property CSS Penting:

  • color: Mengubah warna teks.
  • background-color: Mengubah warna latar belakang.
  • font-size: Mengatur besar kecilnya huruf.
  • text-align: Mengatur posisi teks (left, center, right).

🎨 Tugas Kreatif:

Gunakan file profil.html yang kalian buat kemarin, lalu tambahkan tag <style> untuk:

  • Ganti warna latar belakang website dengan warna kesukaanmu.
  • Ubah warna teks Nama kalian menjadi Hijau.
  • Buat posisi Nama kalian berada di Tengah (Center).

Selamat berkreasi dengan warna!
#SMKVIPBisa #InformatikaAlHuda

Tidak ada komentar:

Posting Komentar