CSS adalah kependekkan dari Cascading Style Sheet. CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Kita hanya perlu menulis markup untuk situs.
Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.
HTML dan CSS memiliki keterikatan yang erat, karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan. Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website.
Dengan menggunakan CSS kita dapat menciptakan sebuah format template pada setiap halaman web dengan sangat mudah dan dinamis.
Di dalam halaman web terdapat terdapat beberapa elemen HTML yang kesemuanya itu dapat dikendalikan dengan menggunakan sebuah bahasa script CSS, dalam pengaturannya biasanya style disimpan di dalam sebuah file yang bernama style sheet.css. Style sheet ini dapat juga berupa file maupun embeded bersama tag HTML itu sendiri.
Kelebihan CSS
Untuk mengetahui website yang menggunakan CSS dan yang tidak sangatlah mudah. Kita pasti pernah membuka website, tapi sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS pada situs tersebut tidak dapat di-load dengan benar atau situs sama sekali tidak memiliki CSS, umumnya situs seperti ini hanya menerapkan HTML.
Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati kita harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.
Dengan CSS, kita dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.
Dengan CSS, kita tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Kita tidak membuang-buang waktu, kode yang digunakanpun lebih singkat dan error dapat diminimalisir.
Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan kita untuk menerapkan berbagai macam style pada satu halaman HTML.
Cara Kerja CSS
Dengan menggunakan CSS kita dapat menghemat pekerjaan pengaturan web, karena HTML hanya mengijinkan untuk pengaturan halaman per-elemen saja.
Jadi jika kita membuat sebuah web yang besar kita akan dipersulit dengan pengaturan halaman baik itu warna background, jenis text, maupun ukuran text.
Dengan adanya kesulitan di atas, maka CSS telah memberi solusi. Jika mengggunakan CSS, cukup sekali saja dalam menentukan sebuah bentuk Lay Out halaman web kita yang kemudian semua halaman akan dihubungkan dengan file CSS yang telah kita buat.
Selain itu kita juga diberikan kemudahan dalam mengelola web, jadi kapan pun kita dapat mengganti tampilan halaman dengan hanya merubah file dokumen Style sheet yang telah kita buat.
Syntax pada CSS
Syntax pada CSS terdiri dari tiga bagian, yaitu selector, property dan value.
Contoh :
Selector
Bagian selector untuk menentukan pada elemen/tag HTML apa style tersebut diterapkan. Selector adalah elemen/tag HTML yang ingin diberi style. Selector dapat berupa nama id elemen atau nama class.
Kita dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>.
Jika tag HTML yang ingin diberi style memiliki ID, kita dapat menuliskan nama ID tersebut dengan diawali tanda kress (#).
Contoh :
Jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama class
Contoh :
Jika kita hanya menuliskan satu selector, seperti contoh kode CSS sebelumnya (pada h1, maka seluruh tag h1 yang terdapat dalam file HTML akan memiliki style yang sama.
Bagaimana jika kita hanya ingin memberi style pada tag h1 yang hanya terdapat di dalam Class isiberita (.isiberita). Maka penulisan selectornya seperti berikut :
Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag h1 yang hanya terdapat di dalam class isiberita (atau – h1 yang merupakan child dari class isiberita).
Kitapun dapat memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya ketika kita memiliki dua atau lebih tag dengan warna background yang sama, dari pada menuliskan kode seperti ini :
kita dapat menggabungkan selector dengan menambahkan tanda koma pada nama tag yang ingin diberi style.
Property dan Value
- Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir dan lain sebagainya
- Untuk memberikan nilai/value pada property kita gunakan tanda titik dua ( : )
- Setiap property diakhiri dengan titik koma (;), jika tidak mengakhirinya maka browser tidak akan mengetahui maksud dari property tersebut
- Property-property pada CSS sangat mudah dimengerti karena lebih mirip bahasa kita sehari-hari.
- Misalnya untuk merubah warna text kita gunakan property color, untuk merubah warna background kita gunakan property background-color, untuk merubah ukuran huruf kita gunakan property font-size.
- Property dapat diisi dengan jenis warna, ukuran, perataan margin dll, sedangkan value diisi dengan nilai dari property nya, misalnya red untuk warna merah
- Setiap akhir penulisan property dan value diakhiri dengan tanda titik koma (semicolon)
- Tanda ini juga digunakan sebagai pemisah antar satu property dengan property lain.
- Jika kita ingin menetapkan lebih dari satu property, maka property harus dipisahkan dengan titik koma (semicolon).
- Berikut ini adalah contoh yang menampilkan pendefinisian elemen paragraph agar rata tengah serta warna text nya adalah hitam :
- Agar definisi style lebih mudah dibaca, maka kita dapat menuliskannya dengan bentuk berikut :
- Jika value lebih dari sebuah kata, maka harus diapit dengan tanda kutip ganda diantara value. Contoh :
Teknik penulisan dokumen Style sheet
Di dalam HTML dikenal tiga macam teknik dalam penulisan dokumen Style sheet, yaitu:
- Inline style (inside an HTML element)
- Internal style sheet (inside the <head> tag)
- External Style Sheet
Inline style (inside an HTML element)
Inline Style adalah sebuah metode penulisan CSS langsung pada komponen tag HTML. Akan tetapi cara ini kurang begitu digunakan karena proses penulisannya yang langsung dituliskan di dalam elemen HTML sehingga mempersulit apabila kita memiliki dokumen HTML yang begitu banyak.
Jadi dengan metode ini kita harus meletakkan efek-efek yang kita inginkan di dalam setiap tag HTML yang kita inginkan.
Teknik penulisannya adalah sebagai berikut:
<tag STYLE=definisi_style…> teks </tag>
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>
Penulisan CSS dengan Inline Style
</title>
</head>
<body>
<h1 style="color:blue">
Belajar CSS Dasar
</h1>
</body>
</html>
CSS diletakan di <h1 style=”color:blue”>.
Internal style sheet (inside the <head> tag)
Internal Style Sheet atau sering juga disebut Embedding Style Sheet adalah sebuah metode penulisan dokumen Style CSS pada satu halaman HTML, dokumen ini diletakkan bercampur dengan tag HTML yang dibaca diantara tag <head> dan </head>.
<style type=”text/css”>
…definisi style…
</style>
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan Internal Style</title>
<style type="text/css">
#tulisan{
color: blue;
}
.box{
background: red;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">
<h1 id="tulisan">Belajar CSS Dasar</h1>
</div>
</body>
</html
Tag <h1 id=”tulisan”>Belajar CSS Dasar</h1> </div> akan memanggil css dengan id tulisan (#tulisan).
External Style Sheet
External Style Sheet atau juga kita dapat menyebutnya dengan istilah Linking Style Sheet. Kita sebut External karena pada teknik ini kita menuliskan semua efek style di dalam sebuah dokumen tersendiri yang kita panggil dengan menggunakan Link.
Teknik pemanggilannya kita deklarasikan di dalam tag head.
<link rel=”stylesheet” type=”text/css” href=”css_file.css”>
Contoh :
File html dengan file name contoh_css_ekternal.html
<!DOCTYPE html>
<html>
<head>
<title>Penulisan CSS dengan External Style</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<h1 id="tulisan">Belajar CSS Dasar</h1>
</div>
</body>
</html>
File css dengan file name style.css
#tulisan{
color: blue;
}
.box{
background: red;
padding: 10px;
}
Pada contoh diatas tag <link rel=”stylesheet” type=”text/css” href=”style.css”>akan memanggil css yang terletak pada file style.css.
