Pengenalan Awal CSS

belajar HTML dan CSS untuk pemula

CSS atau Cascading Style Sheets merupakan bahasanya desainer web. Tetapi sebetulnya apa yang dimaksud dengan CSS? Kita akan mengulas pengertian CCS dalam artikel ini.

Pengertian CSS

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

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

CSS pada umumnya selalu dihubungkan dengan HTML, sebab keduanya memang saling melengkapi. HTML diperuntukkan bagi membuat struktur, atau konten dari halaman web. Sedangkan CSS dipakai untuk tampilan dari halaman web itu. Istilahnya, “HTML for content, CSS for Presentation”.

Kegunaan & Fungsi CSS

Awal mula diperlukannya CSS disebabkan kebutuhan akan halaman web yang kian lengkap. Di awal kemunculan HTML, kita dapat membuat suatu paragraf bewarna merah dengan menulis langsung kode itu didalam tag HTML, atau membuat latar belakang sebuah halaman dengan warna biru. Contoh kode HTML untuk hal tersebut yaitu sebagai berikut:

<!DOCTYPE html>
<html>
<head>
      <title>Test Tag Font HTML</title>
</head>
<body>
  <p>
    CSS merupakan bahasanya <font color="red">desainer web</font>.
    Tetapi sebetulnya, apa itu CSS?
  <br />
    <font color="red">CSS </font> ialah kumpulan kode yang dipakai
    untuk mendefenisikan desain dari bahasa markup,
    <font color="red">salah satunya ialah HTML</font>.
  <br />
    Dengan CSS kita dapat merubah desain dari
    <font color="red">text, warna, gambar dan latar belakang</font>
    dari (hampir) seluruh kode tag HTML.
  </p>
</body>
</html>

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

Tetapi sesudah website itu mempunyai katakanlah 50 artikel seperti diatas, dan sebab sesuatu hal kamu mau mengubah seluruh text merah tadi jadi biru, maka akan diperlukan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.

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

<!DOCTYPE html>
<html>
<head>
<title>Test Background Color CSS</title>
<style type="text/css">
.warna 
</style>
</head>
 
<body>
    <p>
      CSS merupakan bahasanya <span class=warna>desainer web</span>.
      Tetapi sebetulnya, apa itu CSS?
    <br />
      <span class=warna>CSS </span>ialah kumpulan kode
      yang dipakai untuk mendefenisikan desain dari bahasa markup,
      <span class=warna>salah satunya ialah HTML</span>.
    <br />
      Dengan CSS kita dapat merubah desain dari
      <span class=warna>text, warna, gambar dan latar belakang</span>
      dari (hampir) seluruh kode tag HTML.
    </p>
</body>
</html>

Pada contoh CSS diatas, saya merubah tag <font> jadi tag <span>. Tag <span> sendiri merupakan tag yang tidak berarti, tetapi boleh di kostumasi memakai CSS. Tag span saya tambahkan dengan atribut atribut class=”warna”. Atribut class berfungsi untuk memasukkan kode CSS pada tag <style> pada bagian head. (Lebih jauh tentang tag <span>, sudah kita bahas di tutorial belajar HTML lanjutan: pengertian tag span dan div)

Bila kita mau mengubah seluruh warna jadi biru, maka tinggal merubah isi dari CSS color: red jadi color:blue, dan seluruh tag yang mempunyai class=”warna” akan otomatis berubah jadi biru.

CSS memungkinkan kita mengubah tampilan dari halaman, tanpa merubah isi dari halaman. Dalam tutorial berikutnya, kita akan mengulas Cara Memasukkan Kode CSS ke Halaman HTML.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

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