Apa itu CSS?
CSS merupakan singkatan dari Cascading Style Sheet.
CSS mendeskripsikan cara menampilkan elemen HTML pada layar atau media lain.
CSS menghemat banyak pekerjaan karena bisa mengendalikan beberapa halaman web secara bersamaan.
CSS menyimpan filenya pada file terpisah.
Mengapa mengunakan CSS?
CSS digunakan untuk mendefinisikan style atau gaya pada suatu halaman web untuk berbagai perangkat dan ukuran layar.
Contoh CSS
body {
background-color: yellow;
}
h1 {
color: red;
text-align: center;
}
p {
font-family: arial;
font-size: 14px;
}
CSS menyelesaikan masalah besar
HTML tidak pernah diperuntukan untuk menformat tampilan pada halaman web.
HTML digunakan untuk mendeskripsikan isi dari sebuah halaman web seperti:
<h1>Ini adalah sebuah judul</h1>
<p>Ini adalah sebuah paragraf</p>
Ketika tag <font> dan atribut warna ditambahkan pada HTML versi 3.2 maka dimulailah semua kekacauan dan mimpi buruk untuk developer (pengembang) web, dimana font dan warna ditambahkan pada setiap halaman web yang menyebabkan proses pengembangan web menjadi panjang dan lambat.
Untuk mengatasi masalah ini maka konsorsium web yaitu W3C membuat CSS.
CSS menghilangkan format style (gaya) halaman pada HTML.
Cara Mengunakan CSS
Pada saat browser menampilkan sebuah dokumen HTML maka browser akan membaca style CSS pada dokumen HTML tersebut dan menformat sesuai dengan aturan CSS.
Terdapat 3 cara untuk mengunakan atau menerapkan CSS pada dokumen HTML.
1. Inline CSS
2. Internal CSS
3. Eksternal CSS
Inline CSS
Pada cara ini aturan CSS dituliskan pada setiap elemen HTML yang ingin diformat atau di-style. Untuk lebih jelasnya, perhatikan contoh dibawah ini:
<html>
<body>
<h1 style="color:blue; text-align:center;" >Sebuah Judul</h1>
<p style="color:red;" >Contoh sebuah paragraf.</p >
</body>
</html>
Internal CSS
Pada cara internal ini aturan CSS ditulis di dalam dokumen HTML pada bagian head.
Contoh di bawah ini memperlihatkan sebuah dokumen HTML dengan CSS internal.
<html>
<head>
<style>
body {
background-color: black;
}
h1 {
color: yellow;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>Sebuah Judul</h1>
<p>Contoh sebuah paragraf.</p>
</body>
</html>
Eksternal CSS
Pada cara mengunakan eksternal CSS, file CSS terpisah dari file HTML dan disimpan tersendiri. Pada setiap dokumen HTML file CSS ini harus direferensikan pada bagian tag <head>.
Pada contoh berikut ini, file eksternal didefinisikan pada elemen <link> dalam tag <head> pada halaman HTML.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_utama.css">
</head>
<body>
<h1>Bagian Judul</h1>
<p>Ini adalah bagian paragraf.</p>
</body>
</html>
Sebuah file CSS eksternal bisa dibuat dengan editor teks dan disimpan dengan ektensi css. Pada file CSS eksternal ini hanya ada aturan CSS tidak boleh ada tag HTML.
Berikut adalah sebuah contoh file CSS eksternal.
body {
background-color: white;
}
p {
color: red;
margin-left: 10px;
}
Lebih dari satu Style CSS
Bila pada sebuah dokumen HTML ditemukan lebih dari satu aturan CSS maka yang digunakan adalah yang paling akhir dimuat/diload.
Perhatikan contoh berikut ini:
Misalkan pada file CSS eksternal style_utama.css ada pengaturan style untuk elemen <p> seperti berikut:
p {
color: blue;
}
Lalu pada halaman HTML terdapat CSS internal sebagai berikut:
p {
color: red;
}
Bila CSS internal didefinisikan setelah CSS eksternal maka emelen <p> akan berwarna merah, yang diperlihatkan pada contoh di bawah.
<head>
<link rel="stylesheet" type="text/css" href="style_utama.css">
<style>
h1 {
color: red;
}
</style>
</head>
Hal sebaliknya terjadi bila CSS internal didefinisikan sebelum CSS eksternal maka elemen <p> akan berwarna biru, yang diperlihatkan pada contoh di bawah.
<head>
<style>
h1 {
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="style_utama.css">
</head>