Posted in Komputer/IT

Pengenalan CSS


CSS
CSS

CSS adalah singkatan dari Cascading Style Sheet. CSS adalah suatu teknologi yang berfungsi untuk mendesain halaman web (HTML). CSS diproses di sisi client (langsung oleh web browser), sehingga untuk mengunakan CSS ini tidak diperlukan web server (xampp/wamp), hanya web browser saja, sama halnya seperti HTML. Pemrosesan di sisi client seperti ini disebut juga client-side scripting.

Penempatan script CSS

Penempatan script CSS ada tiga cara:

  1. Disisipkan langsung pada tag HTML. Ini disebut juga inline style
    1. Contoh nya: <p style='font-size=11px'>tulisan</p>
    2. Contoh lain nya: <h1 style='font-size=24px'>Judul</h1>
    3. Kekurangan nya adalah script CSS akan bercampur dengan HTML, dan untuk penggunaan yang banyak diperlukan penulisan yang berulang-ulang.
  2. Dipisahkan dengan tag HTML,

2a. Dituliskan di antara tag <head> dan </head>. Contoh:

<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
font-size:12px
}
</style>
</head>
<body>
<p>Ini tulisan yang akan diproses oleh css </p>
</body>
</html>

2b. Ditulis pada file terpisah (dengan ekstensi .css), tetapi untuk menghubungkan file CSS dengan file HTML yang akan didesain yaitu harus menambahkan tag “link” pada head HTML, contoh:

file.html

<html>
<head>
<title>Belajar CSS</title>
<link rel="stylesheet" href="tampilan.css">
</head>
<body>
<p>Ini tulisan yang akan diproses oleh css </p>
</body>
</html>

file css (tampilan.css, nama file ini harus sama dengan isi “link href=tampilan.css” pada file HTML yang didesain)

p {
font-family: Arial, Helvetica, sans-serif;
font-size:12px
}

Aturan Penulisan CSS

CSS memiliki aturan penulisan sendiri, berbeda dari HTML ataupun PHP. Aturan tersebut adalah sebagai berikut:

selector {
property: value;
property: value;
}

Selector

Bagian HTML yang didesain oleh CSS bisa semua bagian ataupun sebagian saja (dipilih). CSS bisa memilih bagian mana saja yang akan didesain. Fasilitas pemilih ini disebut dengan Selector. Selector ini secara garis besar ada tiga, yaitu:

  1. Tag Selector (Pemilih Tag)
  2. Class Selector (Pemilih Class)
  3. ID Selector (Pemilih ID)

Tag Selector

Tag selector adalah pemilih tag HTML. Penulisan selector nya yaitu langsung ditulis nama tagnya. Contoh:

p {
font-family: "Arial", Verdana, sans-serif;
font-size: 12px;
}

Dengan Tag Selector, maka desain akan diterapkan pada semua tag yang ada di dokumen HTML. Seperti pada contoh di atas, kode CSS di atas akan memformat semua tag <p> yang ada pada dokumen HTML menjadi huruf: Arial dengan ukuran 12px. Jika tidak ditemukan font Arial, maka akan menggunakan Verdana, dan jika Verdana tidak ditemukan, maka akan menggunakan huruf dari kelompok sans-serif yang ada di komputer tersebut.

Selain tag p, semua tag HTML lainnya bisa didesain oleh CSS. Contoh: h1, h2, body, table, tr, td, dll.

Class Selector

Class Selector adalah pemilih Class. Class adalah atribut HTML yang berisi nama Class yang akan didesain. Penulisan selector nya adalah dengan menambahkan tanda . (titik) sebelum nama Class yang akan didesain.

Contoh:

<style type='css/text'>
.catatan {
color: red;
}
</style>
</head>
<body>
<p class="catatan"> Ini adalah catatan penting </p>
<p>Ini tidak akan terpilih oleh Class Selector</p>
<p class="catatan">Ini catatan lainnya</p>
</body>

Seperti pada contoh di atas, Class Selector akan memilih dari dokumen HTML yang memiliki atribut class=”catatan” dan akan menerapkan desain hanya pada class itu saja. selebihnya akan diabaikan oleh CSS.

ID Selector

ID Selector sama dengan class selector. Bedanya ID hanya boleh ada satu pada dokumen HTML, sedangkan Class boleh berulang-ulang. Penulisan selectornya yaitu dengan menambahkan tanda # sebelum nama ID nya.

contoh:

<style type='css/text'>
#kata_pengantar {
font-size: 32px;
}
</style>
</head>
<body>
<p id="kata_pengantar">Ini adalah kata pengantar yang hanya ada satu pada dokumen</p>
<p>Ini tulisan</p>
</body>

Property dan Value

Property menentukan apa yang akan didesain. Bisa bentuk huruf (font-family), warna huruf (color), gambar latar belakang (background-image), atapun yang lainnya. Sedangkan value adalah nilai yang diterapkan pada property tersebut. Contoh

p {
color: red;
font-size: 12px;
}

Pada contoh di atas, property color menentukan warna huruf menjadi warna merah (red) dan property font-size menentukan ukuran huruf menjadi 12px.

Property sangat banyak jumlah nya yang ditujukan untuk berbagai macam kebutuhan,  berikut daftar beberapa property yang sering digunakan:

Font Properties:

font-family
font-style
font-weight
font-size

Color and Background Properties:

color
background-color
background-image
background-repeat
background-attachment
background-position

Text Properties

word-spacing
letter-spacing
text-decoration
vertical-alignment
text-transform
text-align
text-indent
line-height

Keuntungan paling utama dari CSS adalah kita bisa mengatur layer presentasi dari halaman web secara tersendiri tanpa bercampur dengan layer structure/content dari web kita. Sehingga proses development menjadi lebih manageable.

Demikian pengenalan CSS secara singkat. Mudah-mudahan bermanfaat. Wassalam.

3 thoughts on “Pengenalan 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