🎯 Tujuan

Mempelajari cara menggunakan CSS untuk mengubah warna, font, tata letak, dan jarak antar elemen agar tampilan web lebih menarik, rapi, dan responsif di berbagai perangkat.

⏰ Konteks

Tutorial ini dilakukan untuk memisahkan desain dari konten sehingga lebih mudah dalam pengelolaan tampilan website, terutama saat melakukan perubahan rutin atau pemeliharaan agar konsistensi desain tetap terjaga.

🪵 Hal yang Diperlukan

1. Visual Studio Code (VS Code) Ekstensi: Pasang ekstensi Live Server by Ritwick Dey untuk menampilkan hasil secara langsung.
2. Browser

📋 Langkah-Langkah

1. Buat folder baru di komputer:

   • Buka File Explorer, pilih direktori yang diinginkan, lalu klik ikon + untuk membuat folder baru. Beri nama sesuai keinginan.
   • Setelah itu, buka Visual Studio Code dan pilih File > Open Folder, lalu pilih folder yang baru saja dibuat.

2. Buat file HTML baru bernama index.html:

   • Klik kanan di dalam folder yang terbuka di VS Code, lalu pilih New File dan beri nama index.html.

3. Masukkan kode berikut ke dalam file index.html:

   <!DOCTYPE html>  
   <html lang="en">  
   <head>  
       <meta charset="UTF-8">  
       <meta name="viewport" content="width=device-width, initial-scale=1.0">  
       <title>Belajar CSS Dasar</title>  
       <link rel="stylesheet" href="style.css">  
   </head>  
   <body>  
       <h1>Hello, CSS!</h1>  
       <p>Ini adalah contoh teks.</p>  
   </body>  
   </html>  
   

4. Buat file CSS baru bernama style.css di direktori yang sama.

   • Pastikan file HTML kamu sudah terhubung ke file CSS dengan menambahkan tag berikut di dalam <head> file index.html:

   <link rel="stylesheet" href="style.css">  
   

5. Tambahkan kode berikut ke dalam file style.css:

   body {  
       background-color: #f0f0f0;  
       font-family: Arial, sans-serif;  
       margin: 0;  
       padding: 20px;  
   }
   
   h1 {  
       color: #4CAF50;  
       text-align: center;  
   }
   
   p {  
       font-size: 16px;  
       text-align: justify;  
   }
   

   Penjelasan Kode CSS:

   • body, h1, p: Elemen HTML yang diberi gaya.
   • background-color: Mengatur warna latar belakang elemen.
   • font-family: Menentukan jenis font yang digunakan.
   • text-align: Mengatur perataan teks (center/justify).
   • font-size: Mengatur ukuran font.
   • color: Mengatur warna teks.
   • margin & padding: Mengatur spasi di luar dan dalam elemen.

6. Jalankan Live Server di Visual Studio Code:

   • Pastikan ekstensi Live Server sudah terpasang di VS Code. Tekan tombol Go Live di bagian bawah.
   • Browser akan terbuka otomatis, dan kamu dapat melihat halaman yang sudah diberi gaya dengan CSS.

Kesimpulan Dengan menggunakan CSS, tampilan website menjadi lebih menarik dan terstruktur, dengan kontrol penuh terhadap warna, ukuran font, tata letak, dan elemen visual lainnya.

📋 Documentation

W3Schools.com