DI dalam kode HTML anda dapat menyisipkan kode css.Css adalah kepanjangan dari
Cascading
Style
Sheets.
merubah style d HTML terdapat 3 cara:
- inline menggunakan style atribut
- internal menggunakan tag <style> di antara tag <header>
- exteernal menggunakan satu atau lebih eksternal css.
berikut ini adalah contoh css styling syntax:
element { property:value ; property:value }
element pada syntax di atas adalah nama dari element html.property adalah css property.value adalah css value atau css data /isi dari propeerty
inline css sangat berguna untuk memberikan style unik pada element html tertentu.
contoh inline css :
<h1 style="color:blue">Ini Heading</h1>
inteernal css bisa digunakan pada semua element html pada seluruh elemen html dalam satu page saja.
contoh internal css :
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>INI
heading</h1>
<p>Bukan paragraf.</p>
</body>
</html>
external css dapat dignakan pada semua html elemen dan semua page html dengan syarat menambahkan alamat css diantara tag <header>.
contoh exteernal css:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS BOX MODEL
setiap Element html berbentuk kotak tapi kita tidak dapaat melihatnya .Untuk menampilkan border pada element html harus menggunakan kode css .berikut ini adalah contoh kode cssnya:
p {
border:1px
solid black;
}
ID atribut
untuk dapat membuat spesial style untuk element html tertentu html element membutuhkan atribut id agar menjadi unik .Dan berikut ini adalah contoh penggunaan styling pada html element tertentu berdasarkan pada atribut id:
<p id="p01">saya aneh</p>
kode diataaas adalah kode html dengan id "p01"
dan kode di bawah ini adalah kode css untuk meerubah html element berdasarkan id atribut nya
p#p01 {
color:blue;
}
Class atribut
membuaat style element html khusus juga dapaat menggunakan class.
Contoh:
<p class="error">Saya aneh</p>
dan kode css untuk class "error" sebagai berikut:
p.error {
color:red;
}
Title : HTML css
Description : DI dalam kode HTML anda dapat menyisipkan kode css.Css adalah kepanjangan dari C ascading S tyle S heets. merubah style d HTML terdapat 3 ...