Logo Universitas Teknokrat Indonesia

Belajar CSS Kilat: Bikin Desain Web Cantik dalam Sejam

Kategori: Teknologi CSS.
Gambar untuk Belajar CSS Kilat: Bikin Desain Web Cantik dalam Sejam

Pernahkah Anda merasa frustrasi saat mencoba membuat website? Anda sudah berhasil menulis kode HTML dan melihat teks serta gambar berjejeran, tetapi tampilannya terlihat kaku dan membosankan. Jangan khawatir, Anda tidak sendirian. Banyak pemula mengira bahwa membuat website yang menarik membutuhkan keahlian desain yang rumit. Padahal, ada sebuah "jurus rahasia" yang bisa Anda kuasai dalam waktu singkat untuk mengubah tampilan website Anda secara drastis: CSS atau Cascading Style Sheets.

baca juga : XPages: Jurus Ampuh Bikin Aplikasi Web Cepat Tanpa Ribet

Artikel ini akan menjadi panduan kilat Anda. Dalam waktu kurang dari satu jam, Anda akan belajar dasar-dasar CSS dan melihat bagaimana ia bisa mengubah website polos Anda menjadi tampilan yang cantik dan profesional. Kita akan membongkar konsep-konsep kunci, dari cara kerja CSS hingga trik-trik yang paling sering digunakan para desainer. Bersiaplah, karena setelah ini, Anda akan memiliki kekuatan untuk membuat tampilan web yang memukau.

Apa Itu CSS dan Mengapa Ia Penting?

Bayangkan sebuah rumah. HTML adalah kerangka bangunannya—dinding, pintu, dan jendela. Ia mendefinisikan struktur. Nah, CSS adalah desain interior dan eksteriornya. Ia mengatur warna cat, tata letak furnitur, dan dekorasi. Tanpa CSS, website Anda hanyalah tumpukan teks dan gambar yang tidak beraturan. Dengan CSS, Anda bisa mengubah tampilan, warna, tata letak, dan bahkan menambahkan animasi.

Peran utama CSS adalah memisahkan struktur dari presentasi. Ini adalah prinsip fundamental dalam pengembangan web yang membuat pekerjaan Anda jauh lebih mudah. Anda bisa menulis kode HTML yang bersih, sementara semua aturan gaya disimpan di file .css terpisah. Ini berarti, jika Anda ingin mengubah desain seluruh website, Anda hanya perlu mengedit satu file CSS, dan perubahan itu akan diterapkan di seluruh halaman.

Jam ke-1: Dasar-dasar CSS yang Harus Anda Kuasai

Waktu satu jam mungkin terdengar singkat, tetapi itu lebih dari cukup untuk menguasai fondasi CSS. Berikut adalah langkah-langkah yang bisa Anda ikuti.

1. Cara Menghubungkan CSS dengan HTML (10 Menit)

Ada tiga cara untuk menghubungkan CSS dengan file HTML Anda. Cara terbaik dan paling sering digunakan adalah menggunakan file eksternal.

  • File Eksternal: Buat file baru dengan nama style.css (atau nama lain yang Anda suka). Di dalam file HTML, tambahkan baris kode ini di dalam tag <head>:HTML<link rel="stylesheet" href="style.css"> Ini adalah cara paling rapi dan efisien, karena memungkinkan Anda mengelola semua gaya di satu tempat.
  • Internal CSS: Anda bisa menempatkan kode CSS langsung di dalam tag <style> di dalam tag <head> HTML. Ini berguna untuk proyek kecil atau saat Anda hanya ingin membuat gaya untuk satu halaman.
  • Inline CSS: Anda bisa menempatkan gaya langsung di dalam tag HTML dengan atribut style. Contoh: <h1 style="color: blue;">Judul</h1>. Cara ini tidak disarankan karena membuat kode Anda berantakan dan sulit dikelola.

Fokuslah pada metode file eksternal.

2. Memahami Selektor dan Properti (20 Menit)

Ini adalah jantung dari CSS. Selektor adalah cara Anda memilih elemen HTML yang ingin Anda beri gaya. Properti adalah aturan gaya yang ingin Anda terapkan.

  • Selektor Tag: Untuk memilih semua elemen dari sebuah tag, gunakan nama tag-nya.CSSp { color: gray; font-size: 16px; } Kode di atas akan membuat semua paragraf (<p>) berwarna abu-abu dengan ukuran font 16px.
  • Selektor Kelas: Untuk memilih elemen berdasarkan kelas, gunakan tanda titik (.). Ini sangat berguna karena Anda bisa memberikan kelas yang sama ke beberapa elemen.HTML<h2 class="judul-kuning">Judul Saya</h2> CSS.judul-kuning { color: yellow; } Sekarang, semua elemen dengan kelas judul-kuning akan memiliki warna teks kuning.
  • Selektor ID: Untuk memilih elemen yang unik, gunakan tanda pagar (#).HTML<div id="kotak-utama">Isi Konten</div> CSS#kotak-utama { background-color: lightblue; }

Pahami ketiganya. Ini adalah dasar yang kuat untuk memberikan gaya yang spesifik.

3. Mengatur Warna, Font, dan Latar Belakang (15 Menit)

Setelah Anda bisa memilih elemen, saatnya berkreasi!

  • Warna Teks: Gunakan properti color. Nilai bisa berupa nama warna (blue), kode heksadesimal (#0000FF), atau RGB (rgb(0, 0, 255)).
  • Ukuran dan Jenis Font: Gunakan font-size dan font-family.
  • Latar Belakang: Gunakan background-color untuk warna solid atau background-image untuk gambar.

Dengan properti-properti ini, Anda sudah bisa mengubah tampilan website Anda secara drastis.

4. Mengenal Box Model (15 Menit)

Setiap elemen di website pada dasarnya adalah sebuah "kotak." Memahami Box Model adalah kunci untuk mengatur tata letak. Box Model terdiri dari empat bagian:

  • Konten (Content): Isi dari elemen, seperti teks atau gambar.
  • Padding: Ruang di antara konten dan border.
  • Border: Garis di sekitar padding dan konten.
  • Margin: Ruang di luar border, yang memisahkan elemen dengan elemen lain.

Anda bisa mengatur keempatnya dengan properti padding, border, dan margin.

CSS

.kotak {
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

Proyek Mini: Bikin Halaman Profil Sederhana

Mari kita terapkan semua yang sudah Anda pelajari. Dalam waktu 5 menit, Anda bisa membuat halaman profil sederhana.

baca juga : Mahasiswa Universitas Teknokrat Indonesia Buat dan Berikan Alat Smart Roaster Berbasis IoT Kepada Mitra UMKM

HTML:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Profil Saya</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="kontainer">
    <h1>Nama Anda</h1>
    <p>Halo, saya adalah seorang desainer web pemula. Halaman ini dibuat dengan CSS!</p>
    <a href="#" class="tombol">Hubungi Saya</a>
  </div>
</body>
</html>

CSS (style.css):

CSS

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 50px;
}

.kontainer {
  background-color: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #333;
}

p {
  color: #666;
  line-height: 1.5;
}

.tombol {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 20px;
}

Simpan kedua file dan buka index.html di browser Anda. Selamat! Anda baru saja membuat website yang lebih cantik hanya dalam hitungan menit.

penulis : Dylan Fernanda

Bagikan ke WhatsApp