Beranda
CSS

Cara Menggunakan CSS

Kalian pernah bertanya-tanya bagaimana sih caranya mempercantik tampilan halaman web? Nah, pada kesempatan ini kodeviolet.com akan membahas tentang
Kode Violet
Cara Menggunakan CSS

Halo semua! Kalian pernah bertanya-tanya bagaimana sih caranya mempercantik tampilan halaman web? Nah, pada kesempatan ini kodeviolet.com akan membahas tentang cara menggunakan CSS untuk memperindah dan mengatur elemen-elemen di halaman HTML kalian. CSS (Cascading Style Sheets) adalah alat penting bagi web developer agar tampilan web menjadi menarik, rapi, dan profesional.

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. CSS digunakan untuk mengatur tampilan elemen-elemen HTML seperti warna, ukuran font, jarak antar elemen, dan posisi di layar. Dengan CSS, kalian bisa memisahkan konten dari presentasi, membuat kode lebih bersih dan mudah dikelola.

Cara Menggunakan CSS

Ada tiga cara utama untuk menggunakan CSS dalam dokumen HTML:

Cara Penggunaan Deskripsi Contoh
Inline CSS Langsung pada tag HTML dengan atribut style <p style="color: red;">Teks merah</p>
Internal CSS Diletakkan di dalam tag <style> di bagian <head> HTML <style>p { color: blue; }</style>
External CSS Menggunakan file .css terpisah dan dihubungkan lewat <link> <link rel="stylesheet" href="style.css">

1. Inline CSS

CSS ini ditulis langsung pada elemen HTML. Cocok untuk pengaturan cepat namun tidak disarankan untuk proyek besar.

<p style="color: green; font-size: 20px;">Ini teks hijau</p>

2. Internal CSS

Diletakkan dalam tag <style> di bagian <head>. Berguna untuk halaman tunggal.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: navy;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Selamat Datang!</h1>
</body>
</html>

3. External CSS

Cara terbaik dan paling rapi. Kalian membuat file CSS terpisah (misalnya style.css) dan menyambungkannya.
File HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Halo Dunia</h1>
</body>
</html>

File style.css:

h1 {
  color: purple;
  font-family: Arial, sans-serif;
}

Tips Tambahan dalam Menggunakan CSS

  • Gunakan selector dengan bijak seperti class (.judul) dan id (#header).
  • Manfaatkan properti seperti margin, padding, border, dan background.
  • Gunakan Developer Tools browser untuk mencoba gaya secara langsung.
  • Gabungkan CSS dengan Flexbox atau Grid untuk layout responsif.

Kesimpulan

Itulah tadi artikel dari kodeviolet.com tentang cara menggunakan CSS. CSS sangat penting untuk mengontrol tampilan situs web kalian, dan ada berbagai cara untuk menerapkannya sesuai kebutuhan. Mulailah dari cara yang sederhana dan pelajari secara bertahap ya. Semoga bermanfaat dan sampai jumpa di artikel selanjutnya!

Posting Komentar