Cara Penulisan CSS Dengan Medote INLINE, EMBEDDED, LINKED
Apa Itu CSS?
CSS adalah singkatan dari istilah Bahasa Inggris “Cascading Style Sheet“. Istilah tersebut bisa diartikan sebagai “lembar penataan menurun”.
Pengertian css menurut para ahli:
CSS adalah bahasa markup atau kode khusus yang dipakai untuk mengatur dan mempercantik tampilan elemen sebuah situs.
Dalam hal bentuk, CSS hampir sama dengan HTML yakni berupa bahasa markup atau kode pemrograman.
Hanaya saja, kedua bahasa tersebut memiliki fungsi yang berbeda.
Ada 3 metode penulisan CSS kedalam program HTML yaitu :
- 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
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}Selamat Mencoba :)
Ketika kamu lelah dan kecewa, maka saat itu kamu sedang belajar tentang kesungguhan.#Wawasan ku luas banget
Tidak ada komentar:
Posting Komentar