Tutorial CSS Untuk Pemula

CSS adalah elemen kunci yang mengubah struktur dasar HTML menjadi karya seni visual, memberikan nuansa dan estetika yang membuat website lebih menarik sekaligus fungsional.

Dengan CSS, kamu bisa mengontrol tampilan berbagai elemen HTML, mulai dari warna, font, sampai layout, membuat audiens mendapatkan pengalaman yang lebih berkesan. Jika HTML adalah kerangka bangunan, CSS merupakan cat dan dekorasi yang mempercantik bangunan tersebut.

Dalam artikel ini, kita akan belajar CSS secara mendalam serta bagaimana kamu bisa memanfaatkannya untuk menciptakan desain web yang menarik. Selamat membaca!

Persiapan Sebelum Belajar CSS

Sebelum memulai, kamu perlu mengetahui bahwa memahami struktur dan sintaks HTML adalah kunci untuk mempelajari CSS.

HTML menggunakan tag untuk menentukan elemen seperti paragraf, judul, gambar, dan lain-lain. Misalnya, tag < p > dipakai untuk paragraf. Sementara tag < h1 > berfungsi untuk judul utama. Jika kamu sudah mengerti bagaimana tag dan elemen HTML bekerja, kamu akan lebih mudah memahami tutorial CSS dan menerapkannya dalam proyekmu.

Sebagai web developer, kamu akan sering bekerja dengan HTML dan CSS secara bersamaan. Contohnya, saat kamu ingin mengubah tampilan teks atau gambar, kamu akan menggunakan CSS untuk melakukannya. Namun, sebelum itu, kamu perlu memastikan bahwa elemen HTML sudah ada dan ditempatkan dengan benar.

Jadi, sebelum kamu terjun ke dalam CSS tutorial, pastikan kamu sudah memiliki pemahaman yang baik tentang HTML. 

Aturan Penulisan CSS

Jika kamu sudah memahami dasar-dasar HTML dan siap melanjutkan belajar CSS, ada beberapa aturan penulisan yang perlu kamu ketahui.

Dalam CSS, ada beberapa komponen utama yang membentuk kode, yaitu selector, declaration, property, dan value. Mari kita bahas satu per satu.

• Selector: selector adalah cara untuk menargetkan elemen HTML yang ingin kamu ubah tampilannya menggunakan CSS. Di CSS, selector bisa berupa nama tag HTML, class, ID, dan berbagai jenis selector lainnya.

Sebagai contoh, untuk menargetkan semua elemen < p >, kamu akan menggunakan selector p. Namun, ini hanya beberapa contoh dari beragam selector yang tersedia di CSS. Untuk informasi lebih lengkap mengenai selector yang bisa digunakan, kamu bisa mengunjungi w3schools.

• Declaration: declaration adalah kumpulan aturan yang akan diterapkan pada elemen yang ditargetkan oleh selector. Declaration berada di dalam kurung kurawal {} setelah selector. Contoh: p { color: red; }.
• Property: Property adalah aspek spesifik dari elemen yang ingin kamu ubah. Dalam web development, property bisa berupa warna teks, jenis font, margin, padding, dan lain-lain. Di CSS, property ini akan ditemukan sebagai bagian dari declaration.
• Value: value adalah nilai yang akan diberikan pada property. Misalnya, jika property-nya adalah color, value-nya bisa berupa red, #FF0000 atau rgb(255,0,0). Value menentukan bagaimana perubahan akan terlihat pada elemen target.

Cara Menulis Kode CSS dengan Contoh Sederhana

Berikut beberapa cara menulis kode CSS disertai contohnya.

Mempercantik tampilan tombol

Untuk mempercantik tampilan tombol, kamu bisa menggunakan beberapa property CSS, seperti border, padding, dan border-radius.

Misalnya, kamu memiliki elemen HTML berikut:

<button class="my-button">Klik Saya</button>

Kamu bisa menulis kode CSS sebagai berikut untuk mempercantik tampilannya:

.my-button {
  border: 2px solid #007BFF;
  padding: 10px 20px;
  border-radius: 5px;
}

Dalam contoh di atas, border menambahkan batas sekitar tombol, padding memberikan jarak antara teks dan batas tombol, serta border-radius membuat sudut tombol menjadi bulat.

Menambahkan warna latar dan teks pada tombol

Untuk menambahkan warna latar dan warna teks pada tombol, kamu bisa menggunakan property background-color.

Contoh:

.my-button {
  background-color: #007BFF;
  color: white;
}

Pada contoh di atas, background-color: #007BFF; menetapkan warna latar belakang tombol menjadi biru dan color: white; menetapkan warna teks menjadi putih.

Dengan menggabungkan semua property ini, kode CSS untuk tombol akan ditampilkan sebagai berikut:

.my-button {
  border: 2px solid #007BFF;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #007BFF;
  color: white;
}

Cara Menambahkan CSS di HTML

Ada beberapa cara untuk menambahkan CSS di HTML. Namun, dua metode di bawah ini paling umum digunakan.

Menggunakan tag < link > untuk menautkan CSS eksternal

Salah satu cara menambahkan CSS ke dalam HTML adalah menggunakan tag < link >. Metode ini memungkinkan kamu menyimpan kode CSS dalam file terpisah yang biasanya memiliki ekstensi .css.

Cara Ini sangat membantu untuk memisahkan struktur (HTML) dan style (CSS), sehingga lebih mudah dikelola.

Contoh penggunaan tag < link > adalah sebagai berikut:

-->

Dalam contoh ini, href="styles.css" menunjukkan lokasi file CSS yang ingin kamu tautkan. Pastikan lokasi dan nama file sudah benar agar CSS berhasil diterapkan.

Memasukkan kode CSS langsung dalam tag < style > di HTML

Metode kedua adalah memasukkan kode CSS langsung ke dalam dokumen HTML menggunakan tag < style >. Tag ini biasanya ditempatkan di dalam elemen < head > dokumen HTML.

Contoh penggunaannya sebagai berikut:

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-button {
      border: 2px solid #007BFF;
      padding: 10px 20px;
      border-radius: 5px;
      background-color: #007BFF;
      color: white;
    }
  </style>
</head>
<body>
  <button class="my-button">Klik Saya</button>
</body>
</html>

Dalam contoh di atas, kode CSS ditempatkan di antara tag < style > dan < /style >. Kode CSS ini akan diterapkan pada elemen HTML di dalam dokumen yang sama.

Namun, pendekatan seperti ini kurang disarankan karena dapat membuat struktur dokumen HTML menjadi kurang rapi. Sebagai best practice, sebaiknya pisahkan antara penulisan HTML dan CSS.

Menggunakan CSS eksternal yang dihubungkan ke HTML melalui tag < link > tidak hanya membuat kode lebih rapi, tetapi juga memudahkan dalam pengelolaan dan pemeliharaan, karena tidak mencampur kode CSS dan HTML dalam satu file.