Pengertian dan Contoh CSS


.. Cascading Style Sheet (CSS)merupakan salah satu bahasa pemrograman web  untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. 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 file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

.. CSS dapat mengendalikan ukuran gambar, warna body 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 dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda .

.. Dasar dari CSS sendiri sebenarnya sudah banyak sekali, namun tampilan yang dihasilkan syntaks – syntaks dari CSS lama masih belum menarik bagi para end-user atau pengunjung. Syntaks css secara umum dapat ditulis sebagai berikut :
<html>
<head>
<style type=”text/css”>
…isi css…
</style>
…isi halaman…
</body>
</html>

. atau dpat langsung menuliskan style pada tag html-nya : <img src =”../images/contoh.gif” align=”…” Padding,Border,Margin…. >

Contoh Css :

height: 35px; width: 100px; border: 1px solid #ff0000; background: #ff0000; background: -moz-linear-gradient( center top, white 20%, #ff0000 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #ff0000) )
;

Apabila suatu style dari css akan dipergunakan untuk beberapa halaman, akan lebih tepat mendeklarasikan css tersebut ke dalam suatu file css terpisah dan baru dipanggil pada suatu halaman. Contoh yang paling sederhana adalah sebagai berikut:

Contoh kerangka kode berikut akan disimpan pada file.css

html {…}
body {…}
a {…}
.b {…}
.c {…}
#tujuan{…}
#header h1 a:visited{…}
a.page-numbers:hover {…}
div.content-bottom{…}
table th {…}
fieldset {…}
legend {…}
form {…}
p{…}
h1 {…}
div#nama li{…}
textarea {…}
input[type=”…”] {…}
select {…}
label{…}
pre {…}
code {…}
blockquote {…}
ul {…}
li {…}

Untuk memanggilnya dengan menambahkan kode html seperti berikut <link rel=”stylesheet” type=”text/css” href=”contoh.css” /> atau dapat juga dengan <style src=”contoh.css” type=”text/css” media=”screen” />. Pada pemanggilan fungsi dari css terdapat 2 penulisan (class dan id) yang berbeda dengan fungsi yang berbeda pula. Pada suatu elemen dapat memakai lebih dari 1 class namun hanya dapat menggunakan satu id. Jika diambil contoh di atas maka pemanggilan dapat digunakan dengan cara sebagai berikut:

<p></p> dan untuk penulisan id adalah

atau lebih jelas lagi seperti pada penggunaan link <a href=”#tujuan “/>. Jadi secara logika kita tidak dapat menggunakan class pada penggunaan link seperti contoh di atas. Atribut dari css pada dasarnya ada banyak sekali walaupun jumlahnya terhingga. Atribut untuk CSS dasar meliputi bagian, antara lain;

  • Background
  • Border
  • Classification
  • Dimension
  • Font
  • Generated Content
  • List and Marker
  • Margin
  • Outlines
  • Padding
  • Positioning
  • Table
  • Text


Sedangkan untuk CSS3 akan ada lebih banyak lagi tambahan atribut dari CSS dasar sehingga akan lebih mudah dipelajari dari kasus – kasus tertentu yang akan diberikan pada topik pembahasan studi kasus tentunya masih di Tutorial Pembelajaran.

.. Video Pengenalan Tentang CSS  :

.. Diperbolehkan Mengcopy-paste Postingan ini dengan mencantumkan sumberx . Panda MZ


2 thoughts on “Pengertian dan Contoh CSS

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s