Pengertian CSS

CSS (Cascading Style Sheet) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letaknya, jenis huruf, warna, dan semua yang berhubungan dengan tampilan. Pada umumnya CSS digunakan untuk memformat halaman web yang ditulis dengan HTML atau XHTML.

Cara Menuliskan CSS

Ada dua cara yang bisa diterapkan untuk menggunakan CSS pada web. Cara yang pertama dengan mebuat CSS langsung didalam satu file HTML (internal/iniline styele sheet). Cara yang kedua dengan memanggil CSS tersebut dari file CSS tersendiri (external style sheet).
Contoh eksternal CSS :
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Kalau memakai internal CSS, semua kode CSS dan markup dimasukan dalam satu file yang sama, sedangkan jika memakai eksternal CSS diperlukan link untuk menghubungkan keduanya.
Contoh internal CSS :
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left: 20px;}
body {background-image: url("images.jpg");}
</style>
</head>

  • Inline
Penulisan dengan cara inline, artinya bahwa kode CSS tersebut dituliskan langsung dibagian program yang sedang dibuat.
<!DOCTYPE html>
<html>
<head>
<title>Bentuk Inline</title>
</head>
<body>
<p id="contoh1">Kalimat ini tidak menggunakan format CSS</p>
<p id="contoh2" style="font-size: 20pt">Kalimat ini menggunakan format CSS untuk ukuran font sebesar 20 point</p>
<p id="contoh3" style="font-size: 15pt">Kalimat ini menggunakan format CSS untuk ukuran font sebesar 15 point</p>
</body>
</html>

CSS dengan cara inline
  • Embedded
Penulisan dengan embedded artinya bahwa kode CSS tersebut dituliskan langsung, atau diletakan pada bagian atas program yang sedang dibuat. Pada bagian penggunaan, cukup menuliskan selector dari CSS tersebut disertai dengan parameter yang ada.
<!DOCTYPE html>
<html>
<head>
<title>Bentuk Penulisan Secara Embedded</title>
</head>
<style>
body {background: #ffffff; 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="contoh1">Judul Berukuran 18 point dan Warna Merah</h1>
<p id="contoh2">tag p di format dengan ukuran 12, tipe font arial, indensi 0.5 inch</p>
</body>
</html> 

CSS dengan cara embedded
  • Embedded Class
Penulisan dengan EmbeddedClass hampir sama dengan penulisan embedded, tetapi disini dalam penggunaannya menggunakan clausa class pada bagian text yang ingin ditampilkan.
<!DOCTYPE html>
<html>
<head>
<title>Bentuk Penulisan Secara Embedded dengan class</title>
</head>
<style>
p.coklat {font-size: 14pt; color: brown}
p.biru {font-size: 15pt; color: blue}
</style>
<body>
<p id="contoh1">Bentuk Standar Tanpa Style</p>
<p id="contoh2" class="coklat">Bentuk Class Coklat</p>
<p id="contoh3" class="biru">Bentuk Class Biru</p>
</body>
</html>

CSS dengan cara embedded class
  • Linked Style Sheet
Cara penulisan CSS berikutnya adalah dengan menuliskan kode CSS tersebut disebuah file yang terpisah. Kemudian memanggilnya dengan perintah link untuk menggabungkannya dengan program utama yang memanggil.
Contoh file HTML :
<!DOCTYPE html>
<html>
<head>
<title>Bentuk Linked Style Sheet</title>
<link rel="stylesheet" type="text/css" href="linked.css">
</head>
<body>
<h1 id="contoh1">Judul Berukuran 20 point dengan Warna Biru</h1>
<p id="contoh2">tag p di format dengan ukuran 14, tipe font arial, indensi 0.5 inch</p>
<p id="contoh3">Latar Belakang Warna Putih dengan Margin 0.5 inch</p>
</body>
</html> 

Contoh file CSS yang di simpan terpisah :
<style>
body {background: #0000ff; color: #ffff00; margin-left: 0.5in}
h1 {font-size: 20pt; color: #00008B}
p {font-size: 14pt; font-family: arial; text-indent: 0.5in}
</style>
Memanggil Linked CSS