Macam Macam CSS
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain. Contoh penulisan CSS secara inline style sheet, CSS berikut mengatur style di elemen
atau paragraf.
<p align="center" style="color:#303; ffont-size:24px">SMK</p>
Saat penulisan CSS diatas, listing kode CSS langsung dipasang di tag HTML,
namun hal tidak direkomendasikan karena akan menyulitkan pengaturan style
jika terjadi perubahan tampilan website dikemudian hariB. Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag
<body>, lebih tepatnya didalam tag <head>
<html>
<head>
</style>
</head><html>
<head>
<style>
input.btn
{color: #fff;
background: #ffa20f;
border: 2px outset #BBD16D;
font-family: "calibri", Times, serif;
font-size: 14px;
font-weight: bold;
width : auto;}
<body>
P">Password</label>
<input type="text" id="KTP" />
</p>
<p>
<input type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm" />
</head>
</html>
Pada listing kode diatas, penerapan style diberikan pada komponen input
button hal ini ditandai dengan pembuatan CSS dengan nama “input.btn”
didalam tag <style></style>
<style>
input.btn
{ …….}
Di bagian body terdapat penerapan CSS dengan cara memanggil nama class
nya
C. External Style Sheet
<input type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm" />
CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file
atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal
memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi
berbasis web sehingga tampilan antar halaman akan terlihat konsisten.File yang berisi style CSS disimpan dalam format *.css. Dari gambar diatas
dapat dilihat file CSS ditempatkan dalam satu folder yang sama dengan file
HTML.
0 komentar: