About CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Untuk saat ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2 mendukung penentuan posisi konten, downloadable, huruf font, tampilan pada tabel /table layout dan media tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi pertama dan kedua.

CSS3 juga dapat melakukan animasi pada halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image, CSS Math, dan CSS Object Model.

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 */

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.

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>

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>

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>

sumber : wikipedia