Home Tutorial Set Artikel Projects
Join Sekarang

Belajar CSS Dasar #1: Pengenalan dan Pengertian CSS

Ditulis oleh Jajang Nurjaman | Diperbarui pada 12 November 2025

Apa itu CSS?

CSS merupakan singkatan dari "Cascading Style Sheets". Sesuai dengan namanya, CSS memiliki sifat sebagai "style sheet language", yang berarti ini adalah bahasa pemrograman yang khusus digunakan untuk web design Secara sederhana, CSS adalah bahasa pemrograman yang digunakan untuk mendesain atau mengatur tampilan sebuah halaman website.


Dalam proses mendesain halaman, CSS bekerja dengan cara menggunakan penanda yang dikenal sebagai id dan class untuk mengakses elemen HTML yang ingin diubah. Seiring perkembangannya, CSS tidak hanya digunakan untuk HTML dan XHTML, tetapi juga sudah bisa dimanfaatkan untuk mendesain tampilan aplikasi android.

Fungsi dan Kegunaan CSS

CSS memiliki banyak sekali fungsi untuk mengatur dan mempercantik halaman website. Beberapa kegunaan utamanya antara lain:

  • Mengubah dan mengatur font, termasuk ukuran font, warna, dan formatnya.
  • Mengatur tata letak (layout) halaman, seperti lebar, tinggi, dan warna elemen.
  • Mengubah tampilan formulir (form).
  • Membuat halaman website agar menjadi responsif.
  • Mengatur jarak di luar elemen menggunakan "margins".
  • Mengatur warna atau gambar latar belakang menggunakan "background".
  • Mengatur ukuran font secara spesifik menggunakan "font-size" dan jenis font menggunakan "font-family".

Cara Membuat CSS

Css memiliki format penulisan yang harus kita ikuti agar kode yang kita tulis dapat di eksekusi oleh browser dan diimplementasikan pada element html.

Format penulisan css ditunjukan pada gambar berikut


Penjelasan:

1.   Selector  digunakan untuk memilih element yang ingin kita atur propertinya, selector bisa berupa tag element ataupun atribut element (berupa id, class dan lainya).

2.   Properti adalah variable-variable dari element yang bisa kita atur nilainya seperti color, font, background, border, margin dan lain sebagainya.

3.   Nilai properti adalah nilai yang kita berikan pada properti tertentu.

4.   Block style adalah satu blok kode css untuk satu selector

Cara Menautkan Kode CSS

Untuk menggunakan CSS, ada beberapa langkah dasar yang perlu diketahui:

  1. Ekstensi File: File CSS disimpan dengan ekstensi .css.
  2. Menghubungkan ke HTML: File CSS ini kemudian diimpor atau dihubungkan ke dalam file HTML (atau PHP) yang ingin didesain.
  3. Menggunakan Tag <link>: Proses penghubungan ini dilakukan menggunakan tag <link>. Tag ini diletakkan di dalam file HTML, tepatnya di bagian <head>.

Pada series berikutnya kita akan mempelajari cara menautkan CSS dengan lengkap.

Sebelumnya Berikutnya