Materi :
- External style
- Internal style
- Inline style
Dalam membangun sebuah halaman web, css tidak dapat berdiri sendiri, css fungsinya adalah membantu mempermudah memberi gaya pada dokumen html dalam membangun sebuah halaman web. Akan tetapi, hanya dengan satu file css dapat mengubah seluruh halaman web. Seperti yang telah diutarakan pada materi sebelumnya tentang Belajar css Selector Id dan Class. serta dalam dalam Belajar css Pendahuluan.
Dengan css, tag-tag html yang harus ditulis secara berulang-ulang dapat dipersingkat hanya dengan membuat satu file css.
Untuk menyisipkan css kedalam dokumen html, ada 3 cara yang dapat kita lakukan. Yaitu :
- Eksternal style.
- Internal style
- Inline style
Cara eksternal style.
Cara eksternal merupakan cara yang ideal dalam menyisipkan file css ke dalam dokumen html karena lebih mudah dalam pengelolaannya. Misalnya untuk mengedit tampilan halaman, kita cukup mebuka file cssnya saja.File css dibuat secara terpisah dari dokumen html dan disimpan dalam format file .css dengan nama misalnya gayaku.css.
Contoh css scrypt :
body
{
bacground-color:#7fffd4;
font-size:12px;
padding-left:3px;
}
#header
{
border:1px #DC143C solid;
background-color:#00CED1;
color:blue;
text-align:center;
margin-top:20px;
}
#menu
{
background-color:#40E0D0;
text-align:left;
padding-left:6px;
border:1px #800080 solid;
}
#content
{
background-color:#40E0d0;
text-align:left;
padding:3px;
color:black;
}
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font size: 12px; }
#footter
{
background-color:#00CED1;
color:blue;
text-align:center;
}
/* dan seterusnya */
{
bacground-color:#7fffd4;
font-size:12px;
padding-left:3px;
}
#header
{
border:1px #DC143C solid;
background-color:#00CED1;
color:blue;
text-align:center;
margin-top:20px;
}
#menu
{
background-color:#40E0D0;
text-align:left;
padding-left:6px;
border:1px #800080 solid;
}
#content
{
background-color:#40E0d0;
text-align:left;
padding:3px;
color:black;
}
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font size: 12px; }
#footter
{
background-color:#00CED1;
color:blue;
text-align:center;
}
/* dan seterusnya */
Simpanlah file tersebut dalam format css dan berilah nama dengan nama file misalnya: gayaku.css, pada folder yang sama dengan folder tempat menyimpan file dokumen html.
Untuk menerapkan script css tersebut ke dalam dokumen html, adalah dengan membuat link pada dokumen html yang merujuk pada file gayaku.css. Link tersebut harus ditempatkan diantara tag <head> dan tag </head>, dan harus dibuat pada tiap halaman. Sebagai contoh bagaimana sebuah dokumen html memanggil file css bernama gayaku.css yang akan diterapkan pada dokumen html.
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="gayaku.css">
</head>
<body>
<div id="">
</div>
<div id="">
</div>
<div id="">
</div>
</body>
</html>
<head>
<link rel="stylesheet"
type="text/css"
href="gayaku.css">
</head>
<body>
<div id="">
</div>
<div id="">
</div>
<div id="">
</div>
</body>
</html>
Cara internal style.
Menyisipkan css denagn cara internal style adalah dengan menyisipkan script css pada dokumen html yang ditempatkandi bagian header, yaitu diantara tag <head> dan tag </head>. Disini kita langsung menuliskan srypt css untuk mengatur style halaman yang kita inginkan, yang dalam penulisannya didahului dengan menuliskan tag <style> dan diakhiri dengan tag </style>.Berikut ini adalah contoh menyisipkan script css pada dokumen dengan cara internal.
<html>
<head>
<style type="text/css">
body
{
bacground-color:#7fffd4;
/*7FFFD4=Aquamarine*/
font-size:12px;
padding-left:3px;
}
#header
{
border:1px #DC143C solid;
background-color:#00CED1;
color:blue;
text-align:center;
margin-top:20px;
}
#menu
{
background-color:#40E0D0;
text-align:left;
padding-left:6px;
border:1px #800080 solid;
}
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font size: 12px; }
#footter
{
background-color:#00CED1;
color:blue;
text-align:center;
}
</style>
</head>
<body>
<div id="">
</div>
<div id="">
</div>
<div id="">
</div>
</body>
</html>
<head>
<style type="text/css">
body
{
bacground-color:#7fffd4;
/*7FFFD4=Aquamarine*/
font-size:12px;
padding-left:3px;
}
#header
{
border:1px #DC143C solid;
background-color:#00CED1;
color:blue;
text-align:center;
margin-top:20px;
}
#menu
{
background-color:#40E0D0;
text-align:left;
padding-left:6px;
border:1px #800080 solid;
}
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font size: 12px; }
#footter
{
background-color:#00CED1;
color:blue;
text-align:center;
}
</style>
</head>
<body>
<div id="">
</div>
<div id="">
</div>
<div id="">
</div>
</body>
</html>
Cara inline style.
Memasukan css kedalam dokumen html dengan cara inline style dapat dilakukan apabila kita menginginkan gaya/style pada kejadian tunggal yang unik atau khusus. Gaya inline diletakan pada elemen html yang relevan, misalnya kita memasukan gaya tulisan pada sebuah paragraf tertenu, maka properti css ini kita terapkan pada tag <p> dan dengan atribut style: Dengan kata lain kita memasukan gaya untuk elemen html, dengan atribut style yang dapat berisi properti css. Misalnya kita akan memberi gaya pada sebuah paragraf. <p style="color:blue; margin-left:40px;"> ini sebuah paragraf
</p>
</p>
Contoh diatas dapat dijelaskan bahwa kita memberi gaya pada paragraf tersebut dengan properti css yaitu color (memberi warna tulisan) dan margin-left (memberi jarak tepi tulisan) dengan nilai/value masing-masing blue dan 40px. Dan gaya tersebut haya berlaku untuk paragraf ini saja, sedang paragraf yang lain tidak mengikuti gaya ini.
Contoh lainnya :
<body style="color:black; background-color:#FFD700; font-size:12px; padding:3px; > menerapkan style css pada bagian tubuh
</body>
</body>
Demikianlah bagaimana cara menyisipkan css ke dalam dokumen html.
back to top
Tidak ada komentar:
Posting Komentar