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.
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 script :
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 ditempatkan diantara tag dan tag , dan harus dibuat pada tiap halaman.
<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 dan tag . Disini kita langsung menuliskan gaya/css untuk mengatur style halaman yang kita inginkan 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 dan dengan atribut style: Dengan kata lain kita memasukan gaya untuk elemen html, dengan atribut style yang dapat berisi properti css.
<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: dan margin-left: 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>
back to top
Ribed memang posting menggunakan handphone dengan penampilan blogger yang baru, apalagi admin newbe seperti saya ini.
BalasHapusUntuk itu aku mohon ma'af dengan penampilan nya seakan asal-asalan.