Tutorial Belajar Internal Style di HTML

Apa yang terjadi bila kita harus memberikan atribut style untuk setiap elemen HTML yang ada di dokumen? Tentu dokumen HTML kita akan nampak berantakan. Untuk itu kita dianjurkan untuk memisahkan style di tempatnya tersendiri, yakni di dalam tag <style>. Hal ini dikenal dengan istilah internal style atau internal CSS (Cascading Style Sheet).


<style>


p { background:black; color:white; }


</style>

Pada contoh di atas, kita mendefinisikan style untuk elemen paragraf. p di atas disebut dengan selector, yakni untuk menentukan elemen mana yang akan diset stylenya. Style untuk elemen ditulis di dalam kurung kurawal setelah selector.

Karena elemen yang ditarget adalah p, maka semua elemen paragraf di dalam dokumen HTML akan dikenai style ini. Dengan demikian kita tidak perlu lagi menulis atribut style yang sama berulang untuk setiap elemen paragraf.

Kita juga dapat menuliskan style untuk banyak elemen.


<style>


p { background: black; color: white; }

h1 { color: blue; font-size: 48px; }

</style>

Pada contoh kode di atas, kita mendefinisikan style untuk elemen paragraf dan juga heading 1.

Tag <style> biasanya disimpan di bagian head.

PRAKTEK

Pada editor terdapat elemen <h1>dan <p>. Selain itu juga terdapat tag <style> di bagian head. Deklarasikan selector untuk elemen <p> dan <h1> di dalam tag style.
```
<style>

p { }

</style>


h1 { }
```
Tambahkan style untuk elemen heading sehingga berwarna biru dan rata tengah. Tambahkan juga style untuk elemen paragraf sehingga memiliki border berwarna oranye, padding sebesar 10pixel dan margin-bottom 10 pixel.
```
<style>

h1 {

  text-align:center; 

color:blue;
}
p {

  border: 1px solid orange; 

padding:10px; 
  margin-bottom:10px;
}

</style>
```

<!DOCTYPE html>

<html>

<head>

<title>Belajar HTML</title>

<style>

</style>

</head>

<body>

<h1>Belajar HTML</h1>

<p>Selamat belajar style dasar pada HTML.</p>

<p>Tinggal sedikit lagi untuk menguasai HTML dasar.</p>

</body>

</html>

Hasilnya:

Belajar HTML

Selamat belajar style dasar pada HTML.

Tinggal sedikit lagi untuk menguasai HTML dasar.

Tutorial Belajar Internal Style di HTML

PRAKTEK

Belajar HTML

0 Response to "Tutorial Belajar Internal Style di HTML"

Posting Komentar