Beranda
CSS

Pengenalan Dasar CSS untuk Pemula

Kode Violet
Pengenalan Dasar CSS untuk Pemula

CSS (Cascading Style Sheets) adalah salah satu fondasi utama dalam pengembangan web modern. Bagi kalian yang sedang belajar membuat tampilan website yang menarik dan responsif, memahami CSS merupakan langkah awal yang penting. Pada artikel ini kodeviolet.com akan membahas pengenalan dasar CSS untuk pemula secara lengkap dan mudah dipahami.

Dengan menggunakan CSS, kalian bisa mengatur warna, ukuran, posisi, hingga animasi elemen-elemen HTML. Artinya, HTML bertugas menyusun struktur konten, sedangkan CSS mempercantik tampilan visualnya. Mari kita pelajari dasar-dasar CSS yang wajib diketahui oleh pemula.

Apa Itu CSS?

CSS adalah bahasa desain yang digunakan untuk mengatur tampilan dari dokumen HTML. CSS memungkinkan kita memisahkan desain dari konten, sehingga lebih mudah dikelola dan dirawat. CSS bisa ditulis langsung di file HTML (internal atau inline), atau pada file terpisah (eksternal) dengan ekstensi .css.

Contoh sederhana penggunaan CSS:

<style>
  h1 {
    color: blue;
    font-size: 24px;
  }
</style>

Kode di atas akan membuat teks judul <h1> berwarna biru dan berukuran 24 piksel.

Cara Menyisipkan CSS

Ada tiga cara utama untuk menambahkan CSS ke dalam HTML:

  1. Inline CSS: Ditulis langsung pada atribut tag HTML. 
    <p style="color: red;">Ini paragraf berwarna merah.</p>
  2. Internal CSS: Diletakkan di bagian <head> HTML menggunakan tag <style>. 
    <head>
  <style>
    p {
      font-size: 16px;
    }
  </style>
</head>
  3. Eksternal CSS: Menghubungkan file CSS terpisah. 
    <link rel="stylesheet" href="style.css">

Selektor dan Properti

CSS menggunakan selektor untuk menentukan elemen mana yang akan diberi gaya, dan properti untuk mengatur tampilannya.

Contoh:

h1 {
  color: green;
  text-align: center;
}

Penjelasan:

  • h1 adalah selektor
  • color dan text-align adalah properti
  • green dan center adalah nilai properti

Contoh Properti CSS Umum

Properti Fungsi
color Mengatur warna teks
background Mengatur warna latar belakang
font-size Mengatur ukuran teks
margin Mengatur jarak luar elemen
padding Mengatur jarak dalam elemen
border Mengatur garis tepi elemen

Kesimpulan

CSS adalah alat penting untuk membuat tampilan website lebih menarik dan profesional. Dengan memahami cara kerja CSS, cara menyisipkannya, dan mengenal selektor serta properti dasar, kalian sudah berada di jalur yang tepat untuk menjadi web developer handal.

Itulah tadi artikel dari kodeviolet.com mengenai pengenalan dasar CSS untuk pemula. Jika ada hal yang ingin ditanyakan, langsung saja tulis di kolom komentar!

Posting Komentar