Bagaimana Caranya Menggunakan CSS?
Kita dapat menggunakan CSS dan memasangnya kedalam skrip HTML melalui 3 Cara. Yaitu:- Inline Style Sheet
- Embedded Style Sheet
- External Style Sheet
Inline Style Sheet
Apa itu Inline Style Sheet? Inline Style Sheet adalah cara menuliskan CSS secara langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup mudah, yaitu dengan menambahkan attribute style="..." pada tag HTML tersebut. Ingat! Style hanya berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag yang lain.Contoh :
<html> <head> <title> Belajar Inline Style Sheet </title> </head> <body> <h4 style="color: red; font-family: verdana"> Teks H4 ini akan berwarna merah, dan akan berjenis huruf Verdana </h4> </body> </html>
Contoh Lagi :
<html> <head> <title> Belajar Inline Style Sheet 2</title> </head> <body> <p style="color: blue"> Teks didalam paragraf ini akan berwarna biru :D </p> </body> </html>
Oke, penulis harap kalian sudah dapat menguasai teknik Inline Style Sheet ini. Sekarang kita akan lanjut membahas Embedded Style Sheet :D
Embedded Style Sheet
Apa itu Embedded Style Sheet? Embedded Style Sheet adalah Cara menggunakan CSS yang didefinisikan dulu menggunakan tag <style> dan </style>, dan tag <style> ini harus berada didalam tag <head> dan </head>. Oke dari pada mumet, langsung saja kita praktekan!Oh iya! Penulisan tag <style> harus memenuhi standar seperti ini:
<style type=”text/css”> ..... isi css .... </style>
Ingat! Jangan lupa dikasih attribute dan value type=”text/css” pada tag <style> yak :D
<html>
<head>
<title> Belajar Embedded Style Sheet</title>
<style type=”text/css”>
h3 {
color: green;
font-family: Tahoma;
font-size: 12px
}
</style>
</head>
<body>
<h3>
Teks h3 ini akan berwarna hijau, berukuran 12 pixel dan berjenis huruf tahoma :D
</h3>
</body>
</html>
External Style Sheet
Apa itu External Style Sheet? External Style Sheet adalah Cara menggunakan CSS yang dibuat pada file terpisah dan berekstensi .css, Untuk menggunakan External Style Sheet kita cukup memanggil file .css yang terpisah tersebut dengan menggunakan tag <link />, dan tag ini harus berada didalam tag <head> dan </head>.Spesifikasi penggunaan tag link adalah sebagai berikut:
<link rel=”stylesheet” type=”text/css” href=”nama_file_external.css” />
Penjelasan :
- <link = adalah tag HTML
- rel=”...” = adalah attribute HTML dari tag <link />
- stylesheet = adalah Value dari attribute rel=”..”
- type=”...” = adalah attribute HTML dari tag <link />
- text/css = adalah Value dari attribute type=”...” yang mendefinisikan bahwa file yang akan di panggil adalah file bertipe css
- href=”...” = adalah attribute HTML yang mendefinisikan lokasi file external tujuan nama_file_external.css = adalah nama file external style sheet yang akan dipanggil
- /> = Adalah tag penutup
Buatlah file dengan nama external.css dan tulis skrip css berikut:
p{
color: red;
background-color: yellow
}
h4 {
Color: blue;
Font-size: 12px
}
Setelah itu buat file dengan nama belajarexternal.html dan isi skrip HTML berikut:
<html> <head> <title> Belajar External Style Sheet </title> <link rel=”stylesheet” type=”text/css” href=”external.css” /> </head> <body> <p> Text didalam paragraf ini akan berwarna merah, dan backgroundnya berwarna kuning </p> <h4> Text h4 ini akan berwarna biru, dan berukuran 12 pixel </h4> </body> </html>
Oke sampai di sini Belajar CSS Dasar Part 3: Implementasi CSS sampai bertemu lagi :D
Tidak ada komentar:
Posting Komentar