Assalamualaikum Wr.Wb
Pada kesempatan kali ini saya ingin berbagi sedikit ilmu yaitu Atribut style dasar pada HTML.Style ini menggunakan atribut dasar CSS.Mengenai CSS mungkin saya akan posting lebih lengkap di postingan saya yang lain.Oke,mari kita mulai
Selain unutk memperindah tampilan style juga bisa mempersingkat waktu kita untuk mengatur tapilan pada HTML,silahkan lihat contoh berikut:
Untuk membuat tampilan di atas maka teman - teman cukup menuliskan style seperti berikut:
cukup praktis bukan? Daripada kita harus menggunakan atribut seperti biasa
Ada tiga macam style dengan CSS yang bisa kita gunakan
Style ini bisa langsung kita tuliskan di element mana yang akan kita tuju misalnya: kita ingin membuat huruf dengan H1 menjadi warna merah maka bisa di tulis seperti berikut:Selain unutk memperindah tampilan style juga bisa mempersingkat waktu kita untuk mengatur tapilan pada HTML,silahkan lihat contoh berikut:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: blue;}
h2 {color: green;}
h3 {color: yellow;}
p {color: red;}
</style>
</head>
<body>
<h1>Ini H1</h1>
<h2>Ini H2</h2>
<h3>Ini H3</h3>
<p>Ini bagian p</p>
</body>
</html>
cukup praktis bukan? Daripada kita harus menggunakan atribut seperti biasa
Ada tiga macam style dengan CSS yang bisa kita gunakan
- Iniline CSS
<h1 Style="color:red;"> Ini H1 </h1>
Hasilnya akan sama persis seperti h1 yang sudah saya contohkan di atas.
style tersebut menurut saya malah sedikit ribet,karena kita harus menuliskan style pada setiap element.Seandainya kita ingin membuat 3 element h1yang berwarna merah kita harus menuliskan style sebanyak 3 kali.Lalu bagaimana agar tidak ribet?teman - teman bisa menggunakan Internal CSS yang akan saya jelaskan selanjutnya.
- Internal CSS
Style ini sudah saya contohkan di atas misal kita ingin membuat tampilan huruf h1 sebanyak 3 kali kita cukup menuliskan atribut seperti ini:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: red;}
</style>
</head>
<body>
<h1>Ini H1</h1>
<h1>Ini H1</h1>
<h1>Ini H1</h1></body>
</html>
Cukup ringkas bukan? kita cukup menuliskan <h1> sebanyak 3 kali maka otomatis element h1 akan berubah menjadi warna merah.
- External CSS
<head><link rel="stylesheet" href="styles.css" ></head>
kita harus membuat halaman untuk style terlebih dahulu terserah di beri nama apa yang terpenting penulisannya harus sama di link style yang kita tulisakan dan jangan lupa simpan dengan format ".CSS"
setelah itu masukkan style di antara <head> dan </head>
Berikut contoh styles.css nya
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
lalu untuk halaman utamnya
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Ini H1</h1>
</body>
</html>
Berikut hasilnya
Sekali lagi antara nama yang di tulis di "link rel" dan nama file harus sama,dan halaman utama dengan style.css harus berada dalam satu folder.
Sekian dulu mengenai Style pada HTML.Semoga bermanfaat walau masih banyak kekurangan,terima kasih sudah mau berkunjung ke blog saya sampai jumpa di postingan berikutnya.
Referensi:http://w3schools.com/
Referensi:http://w3schools.com/
Wassalamualaikum Wr.Wb
0 komentar:
Posting Komentar