Cara Menggunakan Css Pada Html

4 min read Jul 26, 2024

Cara Menggunakan CSS pada HTML

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya sebuah halaman web. HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat struktur dasar sebuah halaman web. Untuk membuat halaman web yang menarik dan profesional, Anda perlu menggabungkan kedua bahasa ini. Berikut adalah cara menggunakan CSS pada HTML:

1. Menambahkan CSS ke dalam HTML

Ada tiga cara untuk menambahkan CSS ke dalam HTML:

Inline styles: Menyertakan gaya langsung ke dalam tag HTML menggunakan atribut style.
```
Judul Halaman
```
Internal stylesheets: Menyertakan gaya di dalam tag <style> di dalam HTML.
External stylesheets: Menyertakan gaya dalam file terpisah dengan ekstensi .css dan menghubungkannya ke HTML menggunakan tag <link>.

2. Menentukan Selektor CSS

Selektor CSS digunakan untuk memilih elemen HTML mana yang akan diberi gaya. Beberapa contoh selektor:

Tag selector: Memilih semua elemen dengan nama tag tertentu.
```
h1 {
    color: blue;
}
```

Class selector: Memilih elemen dengan kelas tertentu.

Ini adalah paragraf pengantar.

.intro {
    font-style: italic;
}

ID selector: Memilih elemen dengan ID tertentu.

Konten utama halaman

#main-content {
    background-color: #f0f0f0;
}

3. Menentukan Properti CSS

Setelah memilih elemen yang akan diberi gaya, Anda perlu menentukan properti CSS yang akan diterapkan. Beberapa contoh properti:

color: Mengatur warna teks.
font-size: Mengatur ukuran font.
background-color: Mengatur warna latar belakang.
margin: Mengatur jarak antara elemen dan elemen lainnya.
padding: Mengatur jarak antara konten dan batas elemen.

4. Contoh Penerapan CSS

Berikut contoh penerapan CSS untuk mengubah warna teks dan latar belakang dari elemen <p> dengan kelas "intro":

HTML:

Ini adalah paragraf pengantar.

CSS:

.intro {
    color: red;
    background-color: yellow;
}

5. Keuntungan Menggunakan CSS

Pemisahan konten dan gaya: CSS memungkinkan Anda untuk memisahkan konten HTML dari gaya, sehingga lebih mudah untuk mengelola dan memperbarui desain.
Konsistensi: Anda dapat menggunakan CSS untuk mengatur gaya secara konsisten di seluruh halaman web.
Kemudahan pemeliharaan: Anda dapat mengubah desain dengan mudah dengan hanya mengedit file CSS.
Responsif: CSS memungkinkan Anda untuk membuat desain yang responsif, yang akan terlihat bagus di berbagai perangkat.

Dengan memahami konsep-konsep dasar CSS dan cara menggunakannya dengan HTML, Anda dapat membuat halaman web yang menarik dan profesional.

Cara Menggunakan Css Pada Html