Mengenal Apa Itu CSS Untuk Pemula

Mengenal Apa Itu CSS Untuk Pemula – Bertemu lagi bareng kita Koding Budi yang senantiasa membahas seputar pemrograman. Dan kali ini Koding Budi berkesempatan untuk membahas Mengenal Apa Itu CSS Untuk Pemula.

CSS atau Cascading Style Sheets adalah bahasanya desainer web. Tetapi sebenarnya apakah yang dimaksud dengan CSS? Kita akan mengulas pengertian CCS dalam artikel ini.

Pengertian CSS

Dalam bahasa bakunya, seperti di kutip dari wikipedia, CSS ialah “kumpulan kode yang dipakai untuk mendefenisikan desain dari bahasa markup” , dimana bahasa markup ini diantaranya ialah HTML.

Untuk pemahaman bebasnya, CSS ialah kumpulan kode program yang dipakai untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita dapat merubah desain dari text, warna, gambar serta latar belakang dari (hampir) semua kode tag HTML.

CSS umumnya selalu dikaitkan dengan HTML, sebab keduanya memang sama-sama melengkapi. HTML ditujukan untuk membuat struktur, atau konten dari halaman website. Sedangkan CSS dipakai untuk tampilan dari halaman website tersebut . Istilahnya, “HTML for content, CSS for Presentation”.

Fungsi dan Kegunaan CSS

Awal mula diperlukannya CSS dikarenakan kebutuhan akan halaman website yang makin kompleks. Pada awal munculnya HTML, kita dapat membuat suatu paragraf bewarna merah dengan menulis langsung kode itu didalam tag HTML, atau membuat latar belakang suatu halaman dengan warna biru. Contoh kode HTML untuk hal tersebut ialah seperti berikut:

<!DOCTYPE html>
<html>
<head>
      <title>Mengenal Apa Itu CSS Untuk Pemula</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>

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

Akan tetapi setelah web itu memiliki katakanlah 50 artikel seperti diatas, serta karena suatu hal anda ingin mengubah semua text merah tadi menjadi biru, maka diperlukan waktu yang lama untuk mengubah satu persatu, halaman per halaman.

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

<!DOCTYPE html>
<html>
<head>
   <title>Mengenal Apa Itu CSS Untuk Pemula</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>

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.

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.

You May Also Like

About the Author: admin

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *