Close Menu

Apa Itu CSS?

Table of Contents

Pengertian CSS #

CSS, atau Cascading Style Sheets, adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan layout halaman web. CSS memungkinkan Anda untuk mengontrol tampilan elemen HTML secara keseluruhan, termasuk warna, font, ukuran, spasi, dan posisi elemen.

Fungsi CSS #

  1. Mengatur Tampilan Halaman Web: CSS digunakan untuk mengatur bagaimana elemen HTML ditampilkan di layar, di kertas, atau di media lain. Anda dapat mengatur warna latar belakang, ukuran font, jarak antar elemen, dan banyak lagi.
  2. Memisahkan Konten dan Desain: Dengan CSS, Anda dapat memisahkan konten (HTML) dari desain (CSS). Hal ini membuat kode lebih mudah dibaca, dikelola, dan diperbarui.
  3. Mengatur Layout Responsif: CSS memungkinkan pembuatan layout responsif yang dapat menyesuaikan tampilan berdasarkan ukuran layar perangkat, seperti desktop, tablet, dan ponsel.
  4. Meningkatkan Konsistensi dan Reusabilitas: Dengan menggunakan CSS, Anda dapat mengatur gaya yang konsisten di seluruh halaman atau situs web. Anda juga dapat menggunakan kembali stylesheet yang sama di berbagai halaman.

Struktur Dasar CSS #

CSS terdiri dari aturan-aturan yang disebut rule set. Setiap rule set terdiri dari selector dan declaration block.

selector {
    property: value;
    property: value;
}

Penjelasan:

  • Selector: Bagian dari rule set yang menentukan elemen HTML mana yang akan diterapkan gaya. Contoh selector: p, h1, .class-name, #id-name.
  • Declaration Block: Bagian yang berisi satu atau lebih deklarasi yang menentukan gaya elemen yang dipilih. Deklarasi terdiri dari property dan value.

Contoh Rule Set CSS #

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

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

Dalam contoh di atas:

  • Selector p akan mengatur semua elemen paragraf (<p>) untuk memiliki teks berwarna biru dan ukuran font 16 piksel.
  • Selector h1 akan mengatur semua elemen heading pertama (<h1>) untuk memiliki teks berwarna hijau dan teks yang rata tengah.

Menambahkan CSS ke HTML #

Ada tiga cara utama untuk menambahkan CSS ke dokumen HTML:

Inline CSS #

CSS ditulis langsung dalam elemen HTML menggunakan atribut style.

<p style="color: blue; font-size: 16px;">Ini adalah paragraf dengan inline CSS.</p>

Internal CSS #

CSS ditulis dalam elemen <style> di bagian <head> dokumen HTML.

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

External CSS #

CSS ditulis dalam file terpisah dengan ekstensi .css, dan file tersebut di-link ke dokumen HTML menggunakan elemen <link>.

<!-- File HTML -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

<!-- File styles.css -->
p {
    color: blue;
    font-size: 16px;
}

Contoh Penggunaan CSS #

Berikut adalah contoh lengkap penggunaan CSS dalam dokumen HTML untuk mengatur gaya elemen-elemen di halaman web:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh CSS</title>
    <style>
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

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

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

        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Contoh CSS</h1>
    <p>Ini adalah paragraf pertama dengan warna teks biru.</p>
    <p class="highlight">Ini adalah paragraf yang disorot dengan latar belakang kuning.</p>
</body>
</html>

Penjelasan:

  • Elemen <style> di dalam <head> mendefinisikan gaya internal untuk dokumen.
  • Elemen body memiliki latar belakang abu-abu muda dan menggunakan font Arial.
  • Elemen h1 memiliki teks berwarna hijau dan rata tengah.
  • Elemen p memiliki teks berwarna biru dan ukuran font 16 piksel.
  • Elemen p dengan class highlight memiliki latar belakang kuning dan teks tebal.

Dengan CSS, Anda dapat dengan mudah mengatur dan mengubah tampilan halaman web tanpa harus mengubah konten HTML. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

What are your Feelings