Materi 3 : Belajar Menambahkan CSS di HTML

Belajar Menambahkan CSS di HTML – Kita mulai masuk pada sesi penulisan css di html dan sebelumnya kita sudah membahas tentang Metode Penulisan CSS. Hal pertama yang harus dipahami sebelum menuliskan kode css adalah memahai struktur penulisannya. Baik, kita ulangi kembali tentang struktur penulisan kode css ini, perhatikan kode pada gambar di bawah ini

- Selektor adalah berupa kode dari tag yang ada pada baris html kita yang nantinya akan kita modifikasi

- Property adalah perintah yang kita berikan pada selektor. Misal kita akan mengubah warna latar web kita, berarti kita beri perintah pada kode selektor kita dengan background-color

- Nilai adalah target dari perintah yang sudah kita berikan untuk kode selektornya. Misal latar web kita ingin berwarna merah, maka nilai pada propertinya adalah red.

Belajar Menambahkan CSS di HTML

Sebelum lanjut, pada materi ini dan selanjutnya kita akan menggunakan metode penulisan css eksternal atau memisahkan file css dan html kita agar memudahkan kita saat mau menambahkan atau mengedit cssnya.

Mulai Ngoding

- Buatlah sebuah file dengan ekstensi .html lalu save dan juga buat satu file dengan nama style.css.

- Pada file html kalian buatlah 1 judul dan 1 paragraf (tidak usah panjang-panjang, cukup 3-5 baris saja) [kalian bisa lihat materi ]

- Lalu ketikan kode berikut ini pada file style.css yang sudah kalian buat tadi

h1 {
 color: green;
}

p {
 background-color: yellow;
}

Penjelasan

- Selektor h1 = kode selektor ini kita ambil dari tag html kita yaitu tag <h1> yang berfungsi untuk membuat judul pada header website kita

- Properti color = adalah sebuah properti pada css yang berfungsi untuk mengubah warna font huruf

- Nilai green = adalah nilai yang kita berikan pada properti color yaitu agar elemen yang ada pada tag h1 memiliki warna hijau.

- Selektor p = kode selektor ini kita ambil dari tag html kita yaitu tag <p> yang berfungsi untuk membuat paragraf di website kita

- Properti background-color = adalah sebuah properti yang kita berikan kepada selektor <p>, agar bisa memberikan warna latar pada elemen yang pada tag <p>

- Nilai yellow = adalah nilai yang kita berikan pada properti background-color yaitu agar elemen yang ada pada tag <p> memiliki warna latar berwarna kuning

Oke. Sekian materi pada sesi kali ini, semoga bisa dipahami. Jika ada pertanyaan, silahkan tulis di kolom komentar di bawah ini.

Share :