Tutorial Belajar CSS Part 1: Pengertian CSS, Apa yang dimaksud dengan CSS?

CSS atau Cascading Style Sheets merupakan bahasanya desainer web. Namun sebenarnya apa yang dimaksud dengan CSS? Kita akan membahas pengertian CCS dalam artikel ini.


Pengertian CSS

Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS adalahkumpulan kode yang digunakan untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini salah satunya adalah HTML.

Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.

CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang saling melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web tersebut. Istilahnya, “HTML for content, CSS for Presentation”.


Fungsi dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman web yang semakin kompleks. Pada awal kemunculan HTML, kita bisa membuat suatu paragraf bewarna merah dengan menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
      <title>Test Tag Font HTML</title>
</head>

<body>
  <p>
    CSS merupakan bahasanya <font color="red">desainer web</font>.
    Namun sebenarnya, apa itu CSS?
  <br />
    <font color="red">CSS </font> adalah kumpulan kode yang digunakan
    untuk mendefenisikan desain dari bahasa markup,
    <font color="red">salah satunya adalah HTML</font>.
  <br />
    Dengan CSS kita bisa mengubah desain dari
    <font color="red">text, warna, gambar dan latar belakang</font>
    dari (hampir) semua kode tag HTML.
  </p>
</body>
</html>

Contoh HTML tanpa CSS

Saya menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut berwarna merah. Hal ini tidak salah, dan semuanya berjalan sesuai keinginan. Untuk sebuah artikel yang memiliki 5 paragraf, kita tinggal copy-paste tag <font color=”red”> pada kata-kata tertentu.

Namun setelah website tersebut memiliki katakanlah 50 artikel seperti diatas, dan karena sesuatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.

Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk paragraf yang sama, berikut kode HTML bila ditambahkan kode CSS:

<!DOCTYPE html>
<html>
<head>
   <title>Test Background Color CSS</title>
   <style type="text/css">
     .warna {
       color: red;
     }
   </style>
</head>
 
<body>
    <p>
      CSS merupakan bahasanya <span class=warna>desainer web</span>.
      Namun sebenarnya, apa itu CSS?
    <br />
      <span class=warna>CSS </span>adalah kumpulan kode
      yang digunakan untuk mendefenisikan desain dari bahasa markup,
      <span class=warna>salah satunya adalah HTML</span>.
    <br />
      Dengan CSS kita bisa mengubah desain dari
      <span class=warna>text, warna, gambar dan latar belakang</span>
      dari (hampir) semua kode tag HTML.
    </p>
</body>
</html>

Contoh HTML dengan CSS

Dalam contoh CSS diatas, saya mengubah tag <font> menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna, namun bisa di kostumasi menggunakan CSS. Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class berguna untuk memasukkan kode CSS pada tag <style> di bagian head. (Lebih lanjut tentang tag <span>, telah kita bahas di tutorial belajar HTML lanjutan: pengertian tag span dan div)

Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red menjadi color:blue, dan seluruh tag yang memiliki class=”warna” akan otomatis berubah menjadi biru.

CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi dari halaman. Dalam tutorial selanjutnya, kita akan membahas Cara Menginput Kode CSS ke Halaman HTML.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Tutorial Terkait:

22 Comments

  1. ariyanto
    22 Jul 14
    • m ihsan fauzi
      23 Jul 14
    • Andre
      21 Aug 14
  2. fahmi
    21 Aug 14
    • Andre
      21 Aug 14
  3. Khodiri
    16 Nov 14
  4. Awal Rifan Fathony
    27 Jun 15
  5. Ricky Rachmanto
    19 Jul 15
    • Andre
      22 Jul 15
  6. Hendi
    18 Apr 16
  7. tayat
    21 Apr 16
  8. Tatang
    11 Jun 16
  9. jack
    05 Nov 16
  10. muhammad ramadhan iskandar
    10 Feb 17
  11. Levi
    10 Sep 17
    • Andre
      13 Sep 17
      • Levi
        17 Sep 17
  12. Arsalim
    16 Oct 17
    • Andre
      17 Oct 17
  13. ruslan permana
    24 Oct 17

Add Comment