Pengertian Dasar Dari CSS

lebakcyber.net – Pengertian dasar dari CSS. CSS merupakan singkatan dari Caschading Style Sheet yang biasa digunakan oleh para desainer web untuk mendesain sebuah halaman web.

Dikutip dari halaman Wikipedia, CSS merupakan kumpulan kode yang digunakan untuk mendefinisikan desain dari bahasa markup, dan salah satu bahasa markup adalah HTML.

CSS juga dapat diartikan sebagai kumpulan kode program yang digunakan untuk mendesain atau mempercantik halaman website yang dibuat menggunakan HTML. Dimana dengan CSS, desainer web bisa merubah tampilan dari html yang dibuat seperti desain text, latar belakang dari hampir semua tag html dan juga gambar.

Fungsi dari CSS

Awal mula dibutuhkannya CSS untuk mendesain halaman suatu website adalah karena semakin kompleksnya halaman web yang dibuat. Pada saat HTML baru muncul pertama kali, desainer web pada saat ingin menambahkan warna pada teks yang ada biasanya langsung menuliskan kodenya di HTML tersebut.

Contohnya bisa dilihat melalui perintah dibawah ini dimana dulu sebelum ada CSS biasanya desainer web langsung menuliskan perintahnya di kode HTML tersebut :

<html>
<head>
  <title>Belajar CSS di Lebak Cyber</title>
</head>
<body>

<p><font color="blue">Ini adalah contoh tulisan teks dengan warna biru</font></p>
<p><font color="red">Ini adalah contoh tulisan teks dengan warna merah </font></p>

</body>
</html>

Nanti tampilannya akan seperti pada gambar dibawah ini :

Namun misalnya website yang sedang Anda buat memiliki 50 artikel seperti contoh diatas dan karena suatu hal, Anda ingin merubah warnanya menjadi kuning atau hijau, maka untuk melakukan hal tersebut akan dibutuhkan waktu yang lama karena harus merubahnya satu persatu disetiap halamannya.

Nah dengan menggunakan CSS, Anda bisa memisahkan tampilan dari konten yang ditampilkan. Untuk contoh yang sama seperti pada perintah HTML diatas, kita akan coba membuatnya dengan menggunakan CSS untuk merubah warnanya. Perintahnya seperti berikut ini :

<html>
<head>
  <title>Belajar CSS di Lebak Cyber</title>
  <style type="text/css">
    .warna1{
      color:blue;
    }
    .warna2{
      color:red;
    }

  </style>
</head>
<body>

<p><span class=warna1>Ini adalah contoh tulisan teks dengan warna biru</span></p>
<p><span class=warna2>Ini adalah contoh tulisan teks dengan warna merah </span></p>

</body>
</html>

Nanti tampilan yang dihasilkan akan sama seperti gambar sebelumnya, namun pada contoh ini kita sudah menggunakan perintah CSS untuk merubah warna pada teks yang ditampilkan

Pada contoh diatas bisa dilihat kalau tag<font> diganti fungsinya menjadi tag<span> dimana tag<span> sendiri merupakan tag yang tidak bermakna tapi bisa dilakukan kustomisasi menggunakan CSS. Selanjutnya tag<span> tersebut digabungkan dengan class=”warna” yang sebelumnya sudah dideklrasikan pada CSS.

Jadi inti dari tutorial Pengertian Dasar Dari CSS ini adalah dengan menggunakan CSS Anda bisa merubah tampilan dari suatu halaman web tanpa merubah isi dari halaman yang ditampilkan. Sampai jumpa pada tutorial CSS selanjutnya.

Lebak Cyber Tips dan Trik Komputer

Pengertian Dasar Dari CSS