Inline Styles
Inline Styles merupakan metode dasar dan paling sederhana untuk menuliskan script CSS. Penulisan Scrip Inline Styles pada elemen <body> menggunakan atribut style. contoh:
<p style="font-family: sans-serif; color: blue;"> Developing as Fun as Playing the Game</p>
Sebagai catatan Inline Style seperti diatas hanya hanya berlaku untuk setiap elemen p yang berbeda-beda. Maksudnya jika ingin menggunkan format yang sama kita harus mengetik ulang atribut style yang sama.
Embedded Styles
Embedded Styles merupakan metode penulisan script CSS dengan menempatkan atribut-atriibut CSS didalam tag <style>. Penempatan tag style sendiri berada diatas elemen <body> tepatnya berada dalam elemen <head>. Contoh:
<html>
<head>
<title>Embedded Styles CSS</title>
<style type="text/css">
h1 {font-size:18pt; color:#FF0000; font-family: initial;}
p {font-size:12pt; font-family:arial; color: brown;}
</style>
</head>
<body>
<h1>Embedded Styles CSS</h1>
<p>Developing as Fun as Playing the Game </p>
</body>
</html>
<head>
<title>Embedded Styles CSS</title>
<style type="text/css">
h1 {font-size:18pt; color:#FF0000; font-family: initial;}
p {font-size:12pt; font-family:arial; color: brown;}
</style>
</head>
<body>
<h1>Embedded Styles CSS</h1>
<p>Developing as Fun as Playing the Game </p>
</body>
</html>
Eksternal Style Sheet
Penulisan Script CSS menggunakan Eksternal Style Sheet yaitu dimana kita menuliskan atribut-atribut css di file yang berbeda dengan file yang ditampilkan (File HTML). Atribut-atribut CSS didefinisikan didalam file berekstensi .css. Agar file HTML dapat menggunakan atribut yang sudah didefinisikan didalam file .css maka kita harus memanggil file tersebut terlebih dahulu, atau mendeklarasikan link file css. Penempatan link file css berada pada elemen head . berikut adalah contoh pemanggilan/pendeklarasian link file css.
<link rel="stylesheet" type="text/css" href="style.css"/>
Contoh lengkap penulisan Eksternal Style Sheet CSS:
- Buatlah file style.css dengan script dibawah ini:
h1,h2{
font-family: monospace;
color: green;
}
p{
font-family: cursive;
color: orange;
}
- Buatlah file eksternalstysheet.html, sebagai halaman view.
<html>
<head>
<title>Eksternal Style Sheet CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Syamadav.com Tutorial CSS</h1>
<h2>Embedded Styles CSS</h2>
<p>Developing as Fun as Playing the Game </p>
</body>
</html>
<head>
<title>Eksternal Style Sheet CSS</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Syamadav.com Tutorial CSS</h1>
<h2>Embedded Styles CSS</h2>
<p>Developing as Fun as Playing the Game </p>
</body>
</html>
Sekian dari Saya, semoga bermanfaat dan terima kasih.
Posting Komentar