AHLI NGODINK
Learning PathTersimpanSemua Artikel Telegram
Dasar Web

Apa Itu CSS? Fungsi, Cara Kerja, dan Contohnya untuk Pemula

Pelajari apa itu CSS, fungsi CSS pada website, cara menghubungkannya dengan HTML, jenis penulisan CSS, selector, property, serta contoh sederhana untuk pemula.

Ditulis Ahli Ngodink 8 menit membaca

Setelah memahami HTML, langkah berikutnya dalam belajar web development adalah mengenal CSS. HTML digunakan untuk menyusun struktur halaman, sedangkan CSS digunakan untuk mengatur bagaimana struktur tersebut ditampilkan di browser.

Dengan CSS, halaman HTML yang awalnya terlihat sederhana dapat diubah menjadi website yang lebih rapi, menarik, responsive, dan nyaman digunakan pada berbagai ukuran layar.

Jika kamu masih mempelajari fondasi HTML, baca terlebih dahulu Apa Itu HTML? Pengertian, Fungsi, dan Contoh untuk Pemula serta Struktur HTML yang Benar untuk Website Pemula.

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. CSS merupakan bahasa yang digunakan untuk mengatur tampilan dan presentasi elemen HTML pada sebuah halaman web.

HTML menentukan konten yang tersedia, sedangkan CSS menentukan bagaimana konten tersebut terlihat.

Contohnya, HTML berikut membuat sebuah judul:

<h1>Belajar CSS</h1>

Tanpa CSS, browser akan menampilkan judul tersebut menggunakan tampilan bawaan.

Dengan CSS:

h1 {
  font-size: 40px;
  text-align: center;
}

tampilan judul dapat diatur sesuai desain yang diinginkan.

Apa Fungsi CSS?

CSS memiliki banyak fungsi dalam pengembangan website. Beberapa fungsi utamanya adalah sebagai berikut.

1. Mengatur Warna

CSS dapat digunakan untuk menentukan warna teks maupun latar belakang.

body {
  background-color: #f5f5f5;
}

h1 {
  color: #222222;
}

2. Mengatur Ukuran dan Jenis Font

Ukuran, ketebalan, jarak antarbaris, serta jenis font dapat diatur menggunakan CSS.

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 36px;
}

p {
  font-size: 16px;
  line-height: 1.7;
}

3. Mengatur Jarak Antar Elemen

CSS menyediakan margin dan padding untuk mengatur jarak.

.card {
  margin: 20px;
  padding: 24px;
}

margin mengatur jarak di luar elemen, sedangkan padding mengatur jarak antara isi dan batas dalam elemen.

4. Mengatur Layout Website

CSS digunakan untuk menentukan posisi dan susunan elemen pada halaman.

Teknik modern yang sering digunakan antara lain:

  • Flexbox
  • CSS Grid
  • Position
  • Responsive layout

Contoh Flexbox sederhana:

.container {
  display: flex;
  gap: 20px;
}

5. Membuat Website Responsive

Website modern harus dapat digunakan pada desktop, tablet, dan smartphone. CSS memungkinkan tampilan menyesuaikan ukuran layar menggunakan media query.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Ketika lebar layar berada di bawah 768 piksel, elemen di dalam container akan disusun secara vertikal.

6. Membuat Efek dan Animasi

CSS juga dapat digunakan untuk membuat transisi dan animasi sederhana.

.button {
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

Efek seperti ini dapat membantu memberikan feedback visual ketika pengguna berinteraksi dengan suatu elemen.

Bagaimana Cara Kerja CSS?

CSS bekerja dengan memilih elemen HTML menggunakan selector, kemudian memberikan aturan tampilan terhadap elemen tersebut.

Struktur dasar CSS adalah:

selector {
  property: value;
}

Contohnya:

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

Pada contoh tersebut:

  • p adalah selector.
  • color adalah property.
  • black adalah value.
  • font-size adalah property lainnya.
  • 16px adalah value dari font-size.

Cara Menghubungkan CSS dengan HTML

Ada beberapa cara untuk menggunakan CSS pada dokumen HTML.

1. Inline CSS

CSS ditulis langsung pada atribut style.

<h1 style="color: blue;">
  Belajar CSS
</h1>

Cara ini dapat digunakan untuk kebutuhan kecil, tetapi kurang ideal untuk website yang memiliki banyak elemen.

2. Internal CSS

CSS ditulis menggunakan elemen <style> di dalam bagian <head>.

<head>

  <style>

    h1 {
      color: blue;
    }

  </style>

</head>

Internal CSS cocok untuk halaman sederhana atau eksperimen cepat.

3. External CSS

Untuk proyek website, cara yang umum digunakan adalah memisahkan CSS ke file tersendiri.

Misalnya struktur file:

website/
│
├── index.html
└── style.css

Kemudian hubungkan CSS dari bagian <head>:

<link
  rel="stylesheet"
  href="style.css"
>

Isi file style.css:

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: #222222;
}

Pemisahan seperti ini membuat struktur proyek lebih rapi dan memudahkan pemeliharaan kode.

Mengenal Selector CSS

Selector menentukan elemen HTML mana yang akan menerima sebuah aturan CSS.

Selector Elemen

p {
  color: gray;
}

Semua elemen <p> akan menggunakan warna tersebut.

Selector Class

HTML:

<button class="button-primary">
  Mulai Belajar
</button>

CSS:

.button-primary {
  padding: 12px 20px;
  border-radius: 8px;
}

Selector class diawali tanda titik.

Selector ID

HTML:

<section id="belajar">

</section>

CSS:

#belajar {
  padding: 60px 20px;
}

Selector ID diawali tanda pagar #.

Perbedaan Class dan ID

Class dapat digunakan pada banyak elemen.

<div class="card">
  Card pertama
</div>

<div class="card">
  Card kedua
</div>

Sedangkan ID sebaiknya digunakan untuk mengidentifikasi bagian tertentu yang unik dalam sebuah halaman.

Dalam styling sehari-hari, developer biasanya lebih sering menggunakan class karena lebih fleksibel dan dapat digunakan kembali.

Mengenal CSS Box Model

Salah satu konsep dasar CSS yang penting dipahami adalah box model.

Setiap elemen HTML dapat dianggap sebagai sebuah kotak yang terdiri dari:

  • Content
  • Padding
  • Border
  • Margin

Contohnya:

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #dddddd;
  margin: 20px;
}

Pemahaman mengenai box model akan sangat membantu ketika mulai mengatur layout website.

Gunakan Box Sizing

Salah satu aturan CSS yang sering digunakan pada awal proyek adalah:

* {
  box-sizing: border-box;
}

Dengan border-box, perhitungan ukuran elemen menjadi lebih mudah karena padding dan border diperhitungkan di dalam ukuran elemen.

Mengenal Flexbox

Flexbox merupakan salah satu sistem layout CSS yang sangat berguna untuk mengatur elemen secara horizontal maupun vertikal.

HTML:

<div class="cards">

  <div class="card">
    HTML
  </div>

  <div class="card">
    CSS
  </div>

  <div class="card">
    JavaScript
  </div>

</div>

CSS:

.cards {
  display: flex;
  gap: 16px;
}

Ketiga card tersebut akan tersusun dalam satu baris selama ruang layar masih mencukupi.

Mengenal CSS Grid

CSS Grid cocok digunakan ketika layout membutuhkan pengaturan baris dan kolom yang lebih terstruktur.

.grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;
}

Kode tersebut membuat layout tiga kolom dengan ukuran yang sama.

Membuat CSS Responsive

Desain responsive berarti tampilan website dapat menyesuaikan ukuran perangkat.

Contohnya:

.container {
  width: min(1100px, 90%);
  margin: 0 auto;
}

Kemudian gunakan media query:

@media (max-width: 768px) {

  .cards {
    flex-direction: column;
  }

}

Pendekatan seperti ini membuat website lebih nyaman digunakan melalui smartphone.

Pseudo-class CSS

CSS dapat memberikan tampilan berbeda berdasarkan kondisi tertentu.

Contohnya ketika mouse berada di atas tombol:

.button:hover {
  background-color: black;
  color: white;
}

Beberapa pseudo-class yang sering digunakan antara lain:

  • :hover
  • :focus
  • :active
  • :first-child
  • :last-child

Contoh HTML dan CSS Sederhana

Berikut contoh proyek kecil yang menggabungkan HTML dengan CSS.

File index.html:

<!DOCTYPE html>
<html lang="id">

<head>

  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>
    Belajar CSS
  </title>

  <link
    rel="stylesheet"
    href="style.css"
  >

</head>

<body>

  <main class="container">

    <h1>
      Belajar CSS
    </h1>

    <p>
      Website pertama saya.
    </p>

    <button class="button">
      Mulai Belajar
    </button>

  </main>

</body>

</html>

File style.css:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
}

.container {
  width: min(800px, 90%);
  margin: 80px auto;
  text-align: center;
}

h1 {
  font-size: 42px;
}

p {
  color: #666666;
}

.button {
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

Jika kedua file berada dalam folder yang sama dan HTML dibuka melalui browser, aturan CSS akan langsung diterapkan.

Hubungan CSS dengan JavaScript

CSS berfokus pada tampilan, sedangkan JavaScript dapat mengubah kondisi halaman berdasarkan interaksi pengguna.

Contohnya, JavaScript dapat menambahkan class:

const menu =
  document.querySelector(".menu");

menu.classList.add("active");

Kemudian CSS mengatur tampilannya:

.menu {
  display: none;
}

.menu.active {
  display: block;
}

Kombinasi HTML, CSS, dan JavaScript memungkinkan developer membuat website yang memiliki struktur, desain, dan interaksi.

Baca juga Perbedaan HTML, CSS, dan JavaScript untuk memahami fungsi masing-masing teknologi.

Kesalahan CSS yang Sering Dilakukan Pemula

Beberapa kesalahan yang umum terjadi saat baru belajar CSS antara lain:

  • Menulis terlalu banyak inline CSS.
  • Menggunakan selector yang terlalu rumit.
  • Tidak memahami margin dan padding.
  • Tidak menggunakan box-sizing.
  • Membuat ukuran yang hanya cocok untuk desktop.
  • Menggunakan terlalu banyak nilai tetap tanpa mempertimbangkan responsive design.
  • Menulis CSS tanpa struktur yang rapi.
  • Terlalu cepat menggunakan framework sebelum memahami CSS dasar.

Urutan Belajar CSS untuk Pemula

Jika baru mulai, kamu dapat mempelajari CSS dengan urutan berikut:

  1. Selector.
  2. Color dan background.
  3. Typography.
  4. Margin dan padding.
  5. Box model.
  6. Width dan height.
  7. Flexbox.
  8. CSS Grid.
  9. Responsive design.
  10. Transition dan animation.

Tidak perlu mencoba menguasai semuanya sekaligus. Gunakan setiap konsep pada proyek kecil agar lebih mudah dipahami.

Belajar CSS Sebaiknya Langsung Praktik

Cara efektif belajar CSS adalah dengan mengubah tampilan proyek HTML yang sudah dibuat.

Kamu dapat mulai dari:

  • Mengubah warna background.
  • Mengatur typography.
  • Membuat tombol.
  • Membuat card.
  • Membuat navbar.
  • Membuat layout dua kolom.
  • Membuat halaman responsive.

Jika belum mempunyai proyek untuk digunakan sebagai latihan, ikuti Cara Membuat Website Pertama dari Nol.

Setelah HTML dan CSS Selesai

Website berbasis HTML dan CSS dapat langsung dipublikasikan ke hosting.

Setelah file seperti index.html dan style.css selesai dibuat, keduanya dapat diunggah ke folder public_html pada hosting berbasis cPanel.

Panduan lengkapnya dapat dibaca pada Cara Upload Website HTML ke cPanel.

Kesimpulan

CSS adalah bahasa yang digunakan untuk mengatur tampilan halaman web. Dengan CSS, developer dapat mengatur warna, typography, jarak, ukuran, layout, responsive design, hingga berbagai efek visual.

CSS bekerja bersama HTML. HTML membangun struktur halaman, sementara CSS mengatur bagaimana struktur tersebut ditampilkan kepada pengguna.

Bagi pemula, fokus terlebih dahulu pada selector, box model, Flexbox, Grid, dan responsive design. Setelah fondasi tersebut dikuasai, kamu akan lebih mudah membangun tampilan website yang lebih kompleks.

Topik: #CSS #Dasar Web #HTML #Pemula #Responsive Web #Web Development
Lanjut Belajar
Semua artikel →

Artikel berikutnya

Struktur HTML yang Benar untuk Website Pemula →