Pengertian CSS
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style,misalnya heading,subbab,bodytext, footer,images,dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar,warna bagian tubuh pada teks,warna tabel,ukuran border,warna border,warna hyperlink,warna mouse over,spasi antar paragraf,spasi antar teks,margin kiri,kanan,atas, bawah,dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.



Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style.CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.Setelah CSS distandardisasikan,Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Cara kerja CSS
CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya.Seperti yang telah kami sebutkan sebelumnya,HTML tidak dibuat untuk menerapkan elemen style,hanya markup halaman saja.HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh:<p>This is a paragraph.</p>.

Satu yang menjadi pertanyaannya sekarang,bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana.Struktur ini memiliki selector dan declaration block.Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap elemen tersebut. Sangat mudah, kan?

Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.
Selector mengarah ke elemen HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.
Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma,sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

Mari kita lihat contoh di bawah ini:

Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).

  1. <style>
  2. p {
  3. color: blue;
  4. text-weight: bold;
  5. }
  6. <style>

Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:

Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value.Selector dalam pernyataan di atas adalah h1,sedangkan color adalah property,dan #0789de adalah value.

Selain itu ada tiga metode penulisan CSS atribut, yaitu :

h1 {
    color: #0789de;
}


Inline Style Sheet
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 memengaruhi tag HTML yang lain.

Contoh penulisan CSS dengan 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
CSS didefinisikan terlebih dahulu dalam tag <style> ...</style> di atas tag <body>.Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML,yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

Contoh penggunaan CSS dengan metode Embedded Style Sheet :

<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<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>

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


yayan supardi

Previous Post Next Post

Post a Comment

Post a Comment