Cara Membuat Script CSS Sederhana untuk Pemula

Dalam dunia pengembangan web, kita mengenal tiga komponen penting: HTML, CSS, dan JavaScript. HTML digunakan untuk membuat struktur dasar, CSS digunakan untuk mempercantik tampilan, sedangkan JavaScript memberikan interaktivitas.

Bagi seorang pemula yang baru mengenal coding, langkah awal setelah menguasai HTML dasar adalah belajar CSS (Cascading Style Sheets). Dengan CSS, kita bisa mengatur warna, ukuran font, tata letak, hingga animasi sederhana.

Artikel ini akan membahas lengkap tutorial cara membuat script CSS sederhana. Mulai dari pengertian, fungsi, penulisan kode, contoh script dasar, hingga tips belajar efektif agar cepat menguasainya.

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Fungsi utama CSS adalah mengatur tampilan dan desain halaman web. Jika HTML adalah kerangka bangunan, maka CSS adalah cat, dekorasi, dan tata ruang yang membuat bangunan terlihat indah.

Tanpa CSS, halaman HTML hanya akan berisi teks hitam putih dengan tampilan sederhana. CSS memungkinkan kita menambahkan warna, mengatur jarak antar elemen, membuat layout kolom, bahkan menambahkan animasi.

Mengapa Harus Belajar CSS?

Ada beberapa alasan penting mengapa seorang pemula perlu belajar CSS:

Membuat Website Menarik – Website polos tanpa CSS terlihat membosankan.
Meningkatkan Pengalaman Pengguna (UX) – Desain yang rapi membuat pengunjung betah.
Menghemat Waktu – Dengan CSS, perubahan gaya bisa dilakukan secara serentak di banyak halaman.
Modal Menjadi Web Developer – CSS adalah skill wajib untuk bekerja di dunia IT.
Mendukung Karier Non-Teknis – Blogger, digital marketer, hingga desainer grafis juga terbantu dengan pengetahuan CSS.

Struktur Penulisan Script CSS

Penulisan CSS memiliki pola tertentu. Format umum:


selector {
  property: value;
}

Selector → bagian yang dipilih (misalnya paragraf, judul, atau ID tertentu).
Property → atribut yang ingin diubah (warna, font, ukuran).
Value → nilai dari property (misalnya warna merah, ukuran 14px).

Contoh:


p {
  color: blue;
  font-size: 16px;
}

Kode ini membuat semua paragraf (<p>) memiliki teks berwarna biru dengan ukuran font 16 piksel.

Cara Menggunakan CSS

Ada tiga cara menggunakan CSS dalam HTML:

1. Inline CSS

Langsung ditulis di dalam tag HTML.


<p style="color:red;">Teks ini berwarna merah</p>

Kelemahan: sulit dikelola jika kode banyak.

2. Internal CSS

Ditulis di dalam tag <style> di bagian <head>.


<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>
<body>
  <h1>Judul dengan CSS Internal</h1>
</body>
</html>

3. External CSS

Ditulis di file terpisah dengan ekstensi .css, lalu dipanggil ke HTML.


<link rel="stylesheet" type="text/css" href="style.css">

Di dalam file style.css:


h1 {
  color: blue;
}

Metode ini paling disarankan untuk proyek nyata karena lebih rapi.

Elemen Dasar CSS

1. Warna (Color)


body {
  background-color: #f0f0f0;
}
p {
  color: #333;
}

2. Font dan Teks


h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  text-align: center;
}

3. Border dan Background


div {
  border: 2px solid black;
  background-color: yellow;
}

4. Margin dan Padding


p {
  margin: 20px;
  padding: 10px;
}

5. Layout dengan Display


nav {
  display: flex;
  justify-content: space-between;
}

Contoh Script CSS Sederhana

Website dengan Warna Dasar


<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: navy;
      text-align: center;
    }
    p {
      color: darkgreen;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Website Pertamaku</h1>
  <p>Belajar membuat script CSS sederhana sangat menyenangkan.</p>
</body>
</html>

Hasilnya: halaman dengan latar biru muda, judul biru tua, dan teks hijau gelap.

Mini Project: Membuat Kartu Profil

Contoh sederhana penggunaan CSS:


<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 300px;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 15px;
      background-color: #fff;
      box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
      margin: auto;
      text-align: center;
    }
    .card img {
      width: 100px;
      border-radius: 50%;
    }
    .card h2 {
      color: navy;
    }
    .card p {
      color: #666;
    }
  </style>
</head>
<body>
  <div class="card">
    <img src="foto.jpg" alt="Foto Profil">
    <h2>Andi</h2>
    <p>Belajar CSS Dasar</p>
  </div>
</body>
</html>

Website ini menampilkan kartu profil dengan foto, nama, dan deskripsi sederhana.

Kesalahan Umum Saat Belajar CSS

Lupa menutup kurung kurawal { }.
Menulis selector salah (misalnya <h1> bukan h1).
Menggunakan warna dengan format salah.
Tidak membedakan id (#) dan class (.).
Tidak menghubungkan file style.css dengan benar.

Tips Belajar CSS dengan Cepat

Praktik langsung – jangan hanya membaca teori.
Gunakan Inspect Element di browser untuk melihat kode website lain.
Belajar dari project kecil seperti halaman profil atau biodata.
Pahami dasar dulu sebelum melompat ke framework seperti Bootstrap.
Gunakan dokumentasi resmi di MDN Web Docs.

Langkah Selanjutnya Setelah CSS Dasar

Jika sudah menguasai CSS sederhana, kamu bisa lanjut ke:

CSS Flexbox dan Grid untuk tata letak modern.
Responsive Design agar website tampil bagus di HP dan laptop.
Animation dan Transition untuk efek menarik.
Framework CSS seperti Bootstrap, Tailwind, atau Bulma.
Preprocessor CSS seperti SASS atau LESS.

Kesimpulan

Belajar cara membuat script CSS sederhana adalah langkah penting setelah memahami HTML. Dengan CSS, halaman web menjadi lebih indah, rapi, dan nyaman digunakan.

Dalam artikel ini kita sudah membahas:

Pengertian dan fungsi CSS.
Struktur penulisan script CSS.
Cara menulis CSS: inline, internal, dan external.
Contoh penggunaan CSS dasar untuk warna, font, margin, padding, hingga layout.
Mini project sederhana berupa kartu profil.
Kesalahan umum pemula dan tips belajar efektif.

Kunci utama menguasai CSS adalah latihan konsisten. Semakin banyak mencoba, semakin paham bagaimana setiap property bekerja.

Belajar Membuat Script