- INLINE didefinisikan langsung pada tag HTML
- EMBEDDED didefinisikan terlebih dahulu
- LINKED menggunakan satu atau lebih file CSS
Inline Style Sheet
Penulisan dengan metode Inline style sheet ditulisakan langsung pada program HTML dibagian tag yang bersangkutan dan tidak mempengaruhi bagian tag yang lain.
Contoh penggunaan CSS menggunakan metode inline style sheet
<html> <head> <title> Contoh Bentuk Inline </title> </head> <body bgcolor="#FFFFFF"> <p id="cth1"> Ini adalah contoh tag P tanpadiformat menggunakan CSS </p> <p id="cth2" style="font-size:20pt"> Tag P ini diformat dengan besar font 20 point </p> <p id="cth3" style="font-size:14pt; color:red"> Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p> </body> </html>
Embedded Style Sheet
Penulisan dengan metode Embedded style sheet dituliskan langsung pada program HTML di bagian atas program atau di dalam tag <HEAD> dengan menggunakan tag <STYLE> ditutup dengan </STYLE>, cukup menuliskan selector dari CSS tersebit disertai dengan parameter yang ada.
Contoh penggunaan CSS menggunakan metode embedded style sheet
<html> <head> <title>Contoh Bentuk Embedded</title>
<style> body {background:#0000FF; color:#FFFF00; margin-left:0.5in} h1 {font-size:18pt; color:#FF0000} p {font-size:12pt; font-family:arial; text-indent:0.5in} </style>
</head>
<body> <h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1> <p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p> <p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p> </body> </html>
Linked Style Sheet
Penulisan dengan metode Linked style sheet dituliskan dengan file yang terpisah. Kemudian dipanggil dengan perintak LINK untuk menggabungkan dengan program utama yang memanggil.
Contoh penggunaan CSS mengunakan metode linked style sheet
Contoh file : lathian.html
<html> <head> <title>Contoh Bentuk Linked</title>
<link href="style.css" rel="Stylesheet">
</head> <body> <h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1> <p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p> <p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p> </body> </html>
Contoh file css yang disimpan terpisah dari halaman utama : style.css
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
tutorialnya sangat membantu saya yang sedang dalam tahap belajar pemrograman web, dengan mennguakan css.terimaksih infonya.....
ReplyDeleteKunjungi website saya : Naliyana
website Kampus saya : Atma Luhur
I confused
ReplyDelete