CSS untuk Mempercantik Halaman Web

Pendahuluan

Kalau HTML adalah kerangka rumah, CSS (Cascading Style Sheets) bertugas menambahkan warna, dekorasi, dan kenyamanan visual.

Dalam catatan ini, kita akan mengenal CSS:
☐ Apa dan untuk apa CSS
☐ Elemen penting dalam CSS (selector, properti dan nilainya, komentar)
☐ Praktik menggunakan HTML dan CSS

1. Apa Itu CSS?

CSS adalah bahasa desain yang digunakan untuk mengatur tampilan dan tata letak elemen di halaman web. Dengan CSS, kamu bisa:

Dengan CSS, halaman web-mu akan terlihat lebih profesional dan menarik.

2. Elemen Penting dalam CSS

a. Selector

Selector digunakan untuk memilih elemen HTML yang akan diberi gaya. Selector dalam CSS seperti "siapa yang kita pilih" saat ingin memberikan instruksi.

Gambarannya seperti ini:

Beberapa selector yang sering digunakan:

b. Properti dan Nilainya

CSS menggunakan properti dan nilai untuk menentukan gaya. Beberapa properti yang banyak digunakan:

Contoh:

p {
  color: red;
  font-size: 16px;
  margin: 10px;
}

Properti ini memungkinkan pengaturan elemen yang presisi dan fleksibel.

c. Komentar

Komentar digunakan untuk memberi catatan pada kode, yang tidak akan dieksekusi oleh browser. Ini berguna untuk menjelaskan maksud kode atau memberikan informasi tambahan.

Contoh:

/* Ini adalah komentar */
p {
  color: blue; /* Warna teks biru */
}

Komentar seperti memo kecil yang kita tempel di buku catatan untuk membantu mengingat atau memberi penjelasan tambahan.

3. Praktik

a. Persiapan Awal:

  1. Buat Folder Proyek Baru:
    • Buat folder baru, misalnya dengan nama proyek-latihan.
  2. Buka Folder di VS Code:
    • Jalankan Visual Studio Code (VS Code).
    • Klik menu File > Open Folder, lalu pilih folder proyek-latihan yang baru kamu buat.
  3. Buat File Baru:
    • Di dalam folder proyek, buat dua file:
      • index.html
      • style.css

b. Struktur Folder:

Folder proyek-latihan akan memiliki struktur seperti ini:

proyek-latihan/
├── index.html
└── style.css
Title

Pada contoh ini, HTML dan CSS berada dalam file yang terpisah - (external CSS). Ini merupakan cara penggunaan CSS yang disarankan pada banyak kasus. Lihat Pakai Inline, Internal, atau External CSS kalau kamu penasaran cara lainnya!

c. File index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <title>Halaman Web Pertamaku 🌐</title>
  </head>
  <body>
    <h1>Halo, Dunia! 👋</h1>
    <p class="intro">Selamat datang di dunia web development. Ini adalah paragraf pertamaku! 🚀</p>
    <p>Seru banget bisa belajar membuat halaman web sendiri. 😍</p>
  </body>
</html>

d. File style.css:

/* Mengatur gaya dasar untuk halaman */
body {
  background-color: #e8f5ff; /* Warna latar belakang biru muda */
  color: #333; /* Warna teks abu-abu gelap */
  font-family: 'Arial', sans-serif; /* Jenis font utama */
  margin: 20px; /* Ruang di sekitar konten */
}

/* Mengatur gaya untuk judul */
h1 {
  color: #007bff; /* Warna teks biru */
  text-align: center; /* Posisikan teks di tengah */
  text-transform: uppercase; /* Mengubah teks menjadi huruf kapital semua */
}

/* Mengatur gaya untuk paragraf pertama */
.intro {
  font-style: italic; /* Mengubah teks menjadi miring */
  color: #555; /* Warna teks abu-abu */
  background-color: #f0f0f0; /* Warna latar belakang abu-abu terang */
  padding: 10px; /* Menambahkan ruang di dalam paragraf */
  border-left: 5px solid #007bff; /* Garis vertikal di sisi kiri */
}

/* Mengatur gaya untuk paragraf lain */
p {
  line-height: 1.6; /* Mengatur jarak antar baris teks */
  margin-top: 10px; /* Memberikan jarak di atas paragraf */
}

e. Cara Menjalankan:

  1. Buka File HTML di Browser:
    • Klik kanan pada file index.html di panel Explorer di VS Code.
    • Pilih Open with Live Server (jika kamu sudah menginstal ekstensi Live Server di VS Code).
    • Jika belum menggunakan Live Server, kamu bisa membuka file index.html langsung di browser dengan klik kanan pada file, lalu pilih Open in Default Browser.
  2. Lihat Hasilnya:
    • Kamu akan melihat halaman web sederhana dengan teks dan gaya yang sudah diatur.

f. Eksperimen:

Tips Desain CSS: Gunakan Palet Warna yang Konsisten

Gunakan situs seperti coolors.co untuk memilih palet warna yang menarik dan serasi. Dengan menggunakan palet warna yang konsisten, tampilan situs kamu jadi lebih profesional, mudah dibaca, dan nyaman dilihat!

Penutup

Selamat bereksperimen! Dengan bereksperimen, kamu akan lebih cepat memahami bagaimana CSS bekerja untuk mengatur tampilan halaman web!