CSS ( Cascading Style Sheets )

CSS adalah singkatan dari Cascading Style Sheets. Yang dimaksud CSS adalah kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML. Ada beberapa keuntungan dan kerugian dari CSS.

Dan keuntungan menggunakan CSS adalah jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.

Dan kekurangannya menggunakan CSS adalah tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

Dalam CSS juga ada beberapa syntax. Berikut ini adalah syntax-syntax yang ada di CSS. Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.

selector { property: value }

 

Format penulisan kalimat CSS:

h1 { color: red }

 

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat. Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur. Value adalah nilai dari pengaturannya. Contohnya adalah:

 

Contoh di atas menunjukkan: Selector: h1; Property: color;Value: red. Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

h1,h2,h3 { color: red }

 

Selector pun juga ada pengelempokannya. Kita dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

 

Yang perlu diperhatikan adalah penulisan h1,h2,h3 yang dipisahkan oleh koma.

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

 

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ). Contoh:

 

Maksud dari contoh di atas adalah, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}

 

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan valuesnya di indent. Supaya terlihat lebih rapih dan mudah untuk dibaca, tetapi tidak diharuskan. Contoh:

 

 

Comment pada CSS adalah dengan menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda. Contoh:

/* Tulis komentar anda di sini */

p

{

text-align: justify;

/* Tulis komentar anda di sini */

color: blue;

font-family: arial;

}

 

 

 

 

 

 

 

Implementasi dalam CSS ada Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:

  • Inline CSS

<P style=”color:blue”>
Isi paragraf.
</p>

 

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS. Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja. Contoh:

 

 

Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya. Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

  • Embedded CSS

Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Contoh:

<head>

<style type=”text/css” media=screen>

p {color:blue;}

</style>

</head>

 

 

 

 

 

 

Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat  menggunakan font berwarna biru.

  • External CSS

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini. Contoh:

  1. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
  1. p {font-family: arial; font-size: small;}
  2. h1 {color: red; }
  1. Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>

<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>

  • Import CSS

Kita bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import. Contoh:

@import “style.css”;

 

atau

 

@import url(“style.css”);

 

 

 

 

 

 

 

 

h1 {

color: red;

text-align: left;

font-size: 8pt

}

 

Penggunaan lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik. Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:

 

 

 

h1 {

text-align: right;

font-size: 20pt

}

 

Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:

 

 

 

color: red;

text-align: right;

font-size: 20pt

 

Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right. Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet. Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:

 

 

nama-class {property:value;}

Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.

taghtml.nama-class {Property:value;}

 

Cara penulisan Class Selector:

Untuk menempelkan class ke dalam tag HTML:

.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}

 

Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.

Penulisan kode CSS:

 

 

 

<div>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1>Tag H1 kiri akan berwarna biru</h1>

 

Pemakaian kode CSS:

 

 

 

 

Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam

 

Tag H1 kiri akan berwarna biru

Hasil:

 

 

 

 

 

#nama-ID {property:value;}

 

ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.

taghtml#nama-ID {Property:value;}

 

Cara penulisan ID Selector:

Untuk menempelkan ID selector ke dalam tag HTML:

Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.

CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Ini adalah beberapa macam font pada CSS.

  • Font Family

Kalau anda biasa menggunakan ms word atau aplikasi lainnya dimana anda bisa merubah jenis / tipe font, pasti anda sudah mengenal nama-nama font seperti: arial, verdana, times new roman dll. Tetapi kalau di CSS kita sebut tipe font ini Font Family.

property -> font-family
value -> nama-nama font, disarankan menggunakan hanya nama-nama font default

 

Cara penulisan:

h1 {
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}

 

 

 

Cara penulisan:

 

 

Ini adalah Heading 1 (H1) menggunakan font Verdana

Ini adalah Heading 2 (H2) menggunakan font Times New Roman

 

 

 

Hasil:

 

 

 

 

 

  • Font Size

CSS font size menentukan ukuran font pada bagian tertentu. Dengan menggunakan property ini, memudahkan kita untuk mengatur ukuran font berbeda-beda dalam satu halaman website.

Cara penulisan: property -> font-size
value -> Ada berbagai macam cara penulisan value sbb:

Menentukan ukuran font secara absolut:

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

Menentukan ukuran secara relatif:

  • larger
  • smaller

Menentukan berdasarkan ukuran pasti:

  • Menggunakan satuan ukuran px, misalnya: 10px, 12px. Angka negatif tidak diperbolehkan.

Menentukan ukuran berdasarkan persen:

  • h1 {
    font-size: 14px;
    }
    h2 {
    font-size: 12px;
    }

     

    Menentukan ukuran lebih besar atau lebih kecil sebesar x% dari ukuran font dari element sebelumnya (parent element). Misalnya: 110% atau 80%.

Contoh penulisan:

 

 

Ini adalah Heading 1 (H1) menggunakan ukuran pasti 14px

Ini adalah Heading 2 (H2) menggunakan ukuran pasti 12px

 

 

 

Hasil:

 

 

 

 

 

  • Font Style

CSS font style menentukan kemiringan font di bagian tertentu.

Ada 3 macam style yaitu:

  • normal : default; browser menampilkan font secara normal
  • Italic : browser menampilkan font miring
  • oblique : browser menampilkan font oblique.

Perbedaan italic dan oblique:

Jenis font biasanya memiliki font set miring yang disebut italic. Misalkan, untuk font Trebuchet MS, akan terdapat 2 set font yaitu trebuchet MS true type (normal) dan trebuchet MS italic (miring). Sementara pada penggunaan style oblique, yang dibunakan adalah Trebuchet MS true type yang di miringkan pada saat ditampilkan. Jadi untuk beberapa font, tidak akan tampak perbedaan nyata antara penggunaan style italic dan oblique.

property -> font-style

value -> normal, italic, oblique

 

Cara penulisan:

 

 

 

 

h1 {font-size: 14px;
font-style: italic;
}
h2 {
font-size: 12px;
font-style:oblique;
}

 

Contoh penulisan:

 

 

 

 

 

Ini adalah Heading 1 (H1) menggunakan style italic

Ini adalah Heading 2 (H2) menggunakan style oblique

 

 

 

Hasil:

 

 

 

 

 

  • Font Variant

property -> font-variant

value -> small-caps

 

Properti font variant digunakan untuk menampilkan font dalam huruf kapital kecil. Jadi semua huruf non kapital akan berubah menjadi huruf kapital, tetapi ukuran nya tetap sama. Perlu diketahui, tidak semua jenis font dapat menggunakan properti ini.

Cara penulisan:

 

h1 {font-size: 14px;
font-variant: small-caps;
}

 

Contoh penulisan:

 

 

Ini adalah Heading 1 (H1) menggunakan properti font variant

 

 

Hasil:

 

 

 

 

  • Font Weigth

Properti font weight digunakan untuk mengatur ketebalan font.

Cara penulisan:

property -> font-weight

value ->
normal
bold – tebal
bolder – lebih tebal
lighter – lebih tipis
100
200
300
400 – normal
500
600
700 – bold
800
900

h1 {

font-size: 14px;
font-weight: bold;
}
h2 {
font-size: 14px;
font-weight:100;
}

 

Contoh penulisan:

 

 

 

 

 

 

Ini adalah Heading 1 (H1) menggunakan font weight bold

Ini adalah Heading 2 (H2) menggunakan font weight 100

 

Hasil:

 

 

 

 

 

 

  • Font Color

Properti color digunakan untuk menentukan warna font. Sebenarnya properti color bukan lah bagian dari properti font.

Cara penulisan: property -> color

value ->
nama warna – contoh: red, black, white
hexadesimal – contoh: #ff0000
RGB – contoh: rgb(0, 220, 98)

h1 {font-size: 14px;
color: red;
}
h2 {
font-size: 14px;
color: #0000ff;
}

 

 

 

Contoh penulisan:

 

 

 

Ini adalah Heading 1 (H1) menggunakan warna merah

Ini adalah Heading 2 (H2) menggunakan warna biru

 

Hasil:

 

 

 

 

Contoh program sederhana CSS :

 

 

Didalam program CSS diatas, kita bisa melihat variasi bentuk dan ukuran tulisan yang biasanya kita definisikan di HTML kini berada di CSS dengan struktur yang lebih rapi dan sederhana dibandingkan jika kita harus menuliskannya di HTML.

Langkah selanjutnya hanyalah kita harus menjalankan file html yang telah kita buat dibrowser yang kita miliki. File html tersebut akan langsung memanggil dan manjalankan fungsi yang telah dideklarasikan di file CSS. Berikut ini adlah output yang akan keluar dari program yang telah kita tuliskan

 

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