Pengenalan CSS: Dasar-Dasar Styling Web

Mei 20, 2025

Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain tampilan dan format halaman web. Dengan CSS, kita dapat mengubah warna, jenis font, jarak antar elemen, dan banyak lagi. CSS bekerja bersama dengan HTML untuk membuat tampilan website menjadi lebih menarik dan profesional.

Mengapa Kita Perlu CSS?

Sebelum adanya CSS, semua desain dan styling dilakukan menggunakan tag HTML seperti <font>, <center>, dan lainnya — cara ini tidak efisien dan susah dikelola untuk skala besar. CSS memisahkan konten (HTML) dengan presentasi (style), sehingga:

Website lebih mudah diatur dan dikembangkan.
Desain bisa digunakan ulang di banyak halaman.
Tampilan bisa diadaptasi untuk berbagai perangkat (ponsel, tablet, desktop).

Cara Kerja CSS

CSS terdiri dari selector, property, dan value. Struktur dasarnya adalah:

selector {
    property: value;
}

Contoh sederhana:

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

Pada contoh di atas:

p adalah selector, menargetkan semua paragraf.
color dan font-size adalah properti.
blue dan 16px adalah nilai dari properti tersebut.

Menyisipkan CSS ke dalam HTML

Ada tiga cara untuk menambahkan CSS ke halaman HTML:

1. Inline CSS

Menulis CSS langsung di dalam tag HTML menggunakan atribut style.

<p style="color:red; font-size:14px;">Ini adalah paragraf merah.</p>

2. Internal CSS

Menulis CSS di dalam tag <style> pada bagian <head> dokumen HTML.

<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: green;
        }
    </style>
</head>

3. External CSS

Menyimpan CSS dalam file terpisah (misalnya style.css) dan menghubungkannya ke HTML menggunakan tag <link>.

File style.css:

h1 {
    color: purple;
}

Di HTML:

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

Kesimpulan

CSS adalah alat penting dalam pengembangan web modern. Dengan mempelajari CSS, Anda bisa mengubah halaman HTML biasa menjadi situs web yang menarik dan responsif. Selanjutnya, kita akan membahas Selectors CSS, yaitu bagaimana menargetkan elemen HTML dengan tepat untuk diberi gaya.

💡 Tips Praktis

Gunakan external CSS untuk proyek besar agar kode lebih rapi dan mudah dipelihara.
Uji hasil styling Anda menggunakan browser developer tools.
Pelajari teknik dasar seperti box model, flexbox, dan grid untuk layout yang baik.

Dasar CSS

Written by Kelvin Y.