Home » CSS » Tutorial Dasar CSS: Pengertian dan Pengenalan CSS untuk Pemula

Tutorial Dasar CSS: Pengertian dan Pengenalan CSS untuk Pemula


CSS adalah singkatan dari Cascading Style Sheets, merupakan salahsatu bahasa yang tak pernah lepas dari seorang desainer web. CSS pertama kali diperkenalkan oleh Håkon Wium Lie pada tahun 1994.

CSS merupakan kumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup, salah satunya adalah HTML.

CSS adalah bahasa kedua setelah HTML yang harus dikuasai seorang web developer. Pengetahuan tentang CSS sangatlah penting, karena dengan CSS kita bisa membuat halaman yang menarik.

Jika bahasa HTML merupakan kerangka-kerangka isi sebuah web, maka CSS-lah yang akan mempercantik kerangka-kerangka tadi sehingga lebih enak dipandang. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.

Cara Memasukkan Kode CSS ke Halaman HTML

Ada beberapa cara untuk memasukkan style CSS kedalam HTML. Secara garis besar, terdapat 3 cara yaitu; Inline Style, Internal Style Sheets, dan External Style Sheets.

1. Inline Style

Inline Style adalah cara memasukkan langsung kode CSS ke dalam tag HTML dengan menggunakan atribut style. Perhatikan contoh penggunaan Metode Inline Style dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Ayo Kita Belajar CSS</title>
</head>
<body>
<p>Perhatikan contoh dibawah ini. Saya akan membuat teks yang <span style="font-weight:bold; color:blue;">Tebal</span> dan huruf <font color="red">berwarna merah</font>.</p>
<h2 style="background-color:black; color:white" >
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>

Pada contoh diatas, terdapat penerapan tag <span> dan tag <font> untuk merubah gaya text menjadi tebal atau berwarna merah.

kemudian terdapat juga tag <h2> yang disisipi atribut style untuk menerapkan kode CSS pada tag tersebut.

Penggunaan CSS seperti ini cukup praktis untuk menghias halaman website. Namun jika halaman yang kita buat cukup banyak, tentu metode ini sangat merepotkan, sehingga metode ini sangat tidak disarankan.

2. Internal Style Sheets

Cara yang kedua untuk memasukkan kode CSS ke HTML adalah dengan Metode Internal Style Sheets. Metode ini juga disebut sebagai Embedded Style Sheets. Pada metode ini, kode CSS dituliskan secara terpisah dari tag HTML namun masih dalam satu halaman HTML.

Atribut style dikumpulkan pada pada sebuah tag <style>. Tag style ini ditulis pada bagian <head> dari halaman HTML.

Perhatikan contoh berikut:

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS: Inline Style CSS</title>
<style type="text/css">
h2 {
background-color:black;
color:white;
}
.style1 {
font-weight:bold;
color:blue;
}
.style2 {
color:red;
}
</style>
</head>
<body>
<p>Perhatikan contoh dibawah ini. Saya akan membuat teks yang <span class="style1">Tebal</span> dan huruf <font class="style2">berwarna merah</font>.</p>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>

Dalam contoh diatas, terdapat atribut class pada tag <font> dan <span>. Atribut class ini berfungsi memanggil kode CSS yang sudah diformat dalam tag <style> di bagian header halaman. Dalam satu halaman HTML ini, setiap ingin menampilkan teks dengan huruf tebal dengan warna biru, cukup dengan memanggil class=”style1″.

Selain itu, terdapat juga style untuk tag <h2>. Jadi, setiap ada tag <h2> dalam satu halaman HTML ini, maka tampilan yang akan muncul adalah teks dengan warna putih dan background hitam.

Penggunaan metode Internal Style Sheets sudah lebih baik dan efisiens dibandingkan dengan metode Inline Style. Karena pada cara ini, kode HTML dan tag-tagnya sudah terpisah.

Namun, Metode ini masih memiliki kekurangan, yaitu jika dalam sebuah website terdapat banyak halaman atau file HTML, maka kode CSS harus di copy ke seluruh file HTML yang akan kita buat, hal ini tentu akan merepotkan dalam membangun untuk pertama kali atau dalam proses maintenance.

3. External Style Sheets

Cara terbaik untuk memasukkan kode CSS ke HTML adalah dengan Metode External Style Sheets. Metode ini tidak jauh berbeda dengan metode Inline Style Sheets, hanya saja kode CSS yang sudah dituliskan dipisahkan kedalam sebuah file tersendiri dengan ekstensi .css. Setiap halaman yang membutuhkan kode CSS ini, cukup dengan ‘memanggil’ file CSS tersebut.

Coba perhatikan contoh pada metode Inline Style Sheets diatas. Kemudian pindahkan isi dari tag <style> kedalam halaman baru, kemudian simpan file tersebut kedalam folder yang sama dengan file HTML. Simpan file tersebut dengan nama: style.css

Isi dari file style.css :

h2 {
background-color:black;
color:white;
}
.style1 {
font-weight:bold;
color:blue;
}
.style2 {
color:red;
}

Sedangkan langkah untuk memanggil file CSS tadi dapat dilakukan dengan cara tag <link> atau @import.

Contoh dengan menggunakan tag <link>, dimana file CSS tersimpan dalam satu folder dengan file HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS: Inline Style CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Perhatikan contoh dibawah ini. Saya akan membuat teks yang <span class="style1">Tebal</span> dan huruf <font class="style2">berwarna merah</font>.</p>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>

Contoh dengan menggunakan @import, dimana file CSS tersimpan dalam satu folder dengan file HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar CSS: Inline Style CSS</title>
<style type="text/css">
@import url(style.css);
</style>
</head>
<body>
<p>Perhatikan contoh dibawah ini. Saya akan membuat teks yang <span class="style1">Tebal</span> dan huruf <font class="style2">berwarna merah</font>.</p>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>

Pada metode ini, kita menggunakan atribut href pada tag <link>, yang akan berisi alamat dari file style.css

Dari ketiga cara atau metode dalam memasukkan kode CSS kedalam file HTML, cara yang paling baik adalah cara yang terakhir, ‘External Style Sheets’ ini, karena seluruh halaman web dapat menggunakan file CSS yang sama. Begitu juga jika kita ingin melakukan perubahan pada seluruh tampilan halaman website, hanya perlu mengubah satu file CSS saja. Tentu hal ini lebih praktis dibandingkan dengan dua cara lainnya.

Demikian, selamat mencoba.

Berita Terbaru