h1 { color:#333;}
| | |
HTML property value
element
Penjelasan :
- Kita perlu menentukan elemen HTML apa yang akan diberi style CSS, dalam kasus ini adalah h1.
- Tambahkan tanda kurung pembuka dan penutup Kurawal {}.
- Didalam kurung kurawal, letakan propety yang akan kita terapkan pada elemen h1, dalam kasus ini property color dengan value (nilai) #333 (abu-abu). Artinya, Teks yang berada di tag <h1> akan berwarna abu-abu semua
- terakhir, berikan tanda titik kom (;) untuk mengakhiri perintah CS
Mengimplementasikan CSS pada HTML
Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada HTML yang ada agar desain yang dispesifikasikan oleh CSS dapat diaplikasikan pada HTML. Terdapat tiga cara untuk memberikan referensi CSS, yaitu:- Referensi ke File Eksternal
- Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. Cara referensi CSS seperti ini seringkali dianggap sebagai best practice dalam pengembangan web.
- Penulisan CSS pada Elemen Head
- CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada bagian
headdari sebuah dokumen. Penulisan CSS seperti ini tidak disarankan, karena umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain. Penulisan CSS langsung pada bagianheadakan menyebabkan elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga. - CSS di dalam Atribut style pada Elemen
- Menuliskan CSS di dalam atribut style pada elemen HTML (atribut ini dimiliki oleh semua elemen) merupakan cara terakhir, yang juga tidak disarankan karena penulisan seperti ini akan “mengotori” kode HTML. HTML dibuat dengan tujuan untuk memberikan makna semantik untuk konten, bukan desain. Begitupun, metode ini biasanya digunakan untuk manipulasi gaya yang dilakukan secara dinamis, melalui Javascript (yang tidak mengotori kode HTML, karena biasanya atribut baru diisikan setelah HTML selesai dibaca oleh browser).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pengenalan HTML</title>
<!-- Referensi pada Elemen Head -->
<style type="text/css">
h1 {
color: red;
}
</style>
<!-- Referensi pada file eksternal -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Berita Utama</h1>
<p>
Elemen h1 digunakan untuk menandakan sebuah header dari teks
(h1 == header 1). Konten teks ini sendiri berada di dalam
sebuah paragraf, yang ditandai oleh elemen p.
</p>
<!-- CSS langsung pada atribut style -->
<p style="font-weight: bold;">
Paragraf kedua.
</p>
</body>
</html>
style.css yang direferensikan oleh elemen link pada kode di atas terlebih dahulu. Simpan kode di atas pada sebuah file bernama referensi-css.html, dan kemudian buat sebuah file baru dengan nama style.css di dalam direktori yang sama dengan referensi-css.html. Isikan file style.css dengan kode berikut:p {
font-size: 50px;
}
style.css harus berada di dalam direktori yang sama karena atribut href
diisikan tanpa penunjuk direktori. Jika misalnya kita ingin menyimpan
file pada direktori yang berbeda, maka kita dapat menambahkan direktori
sebelum nama file. Misalnya jika file disimpan dalam subdirektori
“style”, kita dapat mengisikan style/style.css pada atribut href.
No comments :
Post a Comment