1. Pengertian CSS

CSS (Cascading Style Sheets) adalah bahasa desain yang digunakan untuk mengatur tampilan elemen-elemen HTML pada halaman web. Dengan CSS, kita bisa mengubah warna, ukuran, tata letak, jenis huruf, hingga membuat desain web yang responsif.

2. Fungsi CSS

Memisahkan konten (HTML) dan desain (CSS).
Mempermudah pengaturan tampilan web.
Membuat tampilan lebih menarik dan konsisten.
Mendukung desain responsif (tampilan menyesuaikan perangkat).
Mengurangi kode berulang pada HTML.

3. Cara Menghubungkan CSS ke HTML

Ada 3 cara untuk menggunakan CSS:

Inline CSS
Ditulis langsung pada atribut style di elemen HTML.

<p style="color: red; font-size: 18px;">Teks ini berwarna merah</p>

Internal CSS
Ditulis dalam tag <style> di dalam file HTML.

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

External CSS
Ditulis di file terpisah dengan ekstensi .css lalu dipanggil menggunakan <link>.
```
<head>
    <link rel="stylesheet" href="style.css">
</head>
```

4. Struktur Dasar CSS

selector {
    property: value;
}

Selector → Elemen HTML yang akan diberi gaya.
Property → Aturan gaya (misalnya color, font-size).
Value → Nilai dari property.

Contoh:

h1 {
    color: green;
    font-size: 30px;
}

5. Jenis Selector CSS

Tag Selector → Berdasarkan nama tag HTML.
```
p { color: blue; }
```
Class Selector → Menggunakan tanda titik . diikuti nama class.
```
.highlight { background-color: yellow; }
```
ID Selector → Menggunakan tanda pagar # diikuti nama ID.
```
#judul { text-align: center; }
```
Universal Selector → Menggunakan tanda * (untuk semua elemen).
```
* { margin: 0; padding: 0; }
```

6. Properti CSS yang Sering Digunakan

Teks

p {
    color: red;
    font-size: 18px;
    font-family: Arial, sans-serif;
    text-align: center;
}

Warna & Background

body {
    background-color: lightgray;
}

Box Model (margin, padding, border)

div {
    margin: 20px;
    padding: 15px;
    border: 2px solid black;
}

Layout (display, position, float, flexbox, grid)

.container {
    display: flex;
    justify-content: space-between;
}

7. Contoh Kode Lengkap

HTML (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 id="judul">Halo, CSS!</h1>
    <p class="highlight">Ini adalah contoh penggunaan CSS.</p>
    <p>Tampilan web menjadi lebih menarik.</p>
</body>
</html>

CSS (style.css)

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

#judul {
    color: green;
    text-align: center;
}

.highlight {
    color: white;
    background-color: blue;
    padding: 10px;
    border-radius: 5px;
}

8. Kesimpulan

CSS digunakan untuk mempercantik tampilan HTML.
Ada 3 cara penggunaan: Inline, Internal, dan External.
CSS memiliki selector, property, dan value.
Dengan CSS, tampilan web bisa menjadi konsisten, menarik, dan responsif.

Tx - Rx

CSS (Cascading Style Sheet)