Pengertian CSS dan Contohnya

Setelah belajar HTML, langkah selanjutnya dalam belajar membuat website adalah belajar CSS. Berikut bahasan pengertian CSS dan contohnya yang AneIqbal sajikan secara ringkas dan padat.

Pengertian CSS

CSS punya kepanjangan Cascading Style Sheet.. CSS adalah kumpulan kode yang diperuntukkan untuk mengatur dan mendesain tampilan halaman web..

..jadi dengan CSS, kita bisa mendesain jenis huruf, warna huruf, ukuran huruf, perataan teks, gambar, background, dan banyak lainnya..

Cara kerja CSS adalah dengan menerapkan kode CSS pada tiap tag HTML yang ingin didesain tampilannya..

HTML dan CSS ini tak dapat dipisahkan, mereka selalu bersama karena saling terikat satu sama lain.. HTML untuk struktur dan konten halaman web.. sedangkan CSS untuk mendesain tampilannya..

HTML is for content. CSS is for presentation.

Contoh CSS ke tag HTML

Supaya lebih mudah dipahami, kita langsung praktikkan aja.. contohnya, kita ingin mendesain warna teks paragrafnya menjadi biru..

Kode CSS diapit oleh tag <style>.. ada cara lainnya juga untuk memasukkan kode CSS ke kode HTML.. tapi itu akan kita bahas selanjutnya..

Seperti ini kodenya:

<!DOCTYPE html>
<html>
  <head>
    <title>Belajar CSS</title>
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20p%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20blue%3B%0A%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />
  </head>

  <body>
    <p>Ini adalah paragraf pertama yang akan hurufnya berwarna merah karena diatur oleh kode CSS</p>

     <p>Ini adalah paragraf kedua yang akan hurufnya berwarna merah karena diatur oleh kode CSS</p>

     <p>Ini adalah paragraf ketiga yang akan hurufnya berwarna merah karena diatur oleh kode CSS</p>
  </body>
</html>

Lalu simpan dengan nama belajar-css.html di dalam folder belajar_css (buat dulu ya kalo belum ada).. Kemudian buka dengan web browser..

apa itu css
hasil dari contoh css

Seperti itulah jadinya.. teks paragraf warnanya menjadi biru karena diatur oleh kode CSS..

Begitulah pengertian CSS dan fungsinya ini.. sekarang udah tau kan..?

Next.. kita bahas cara penulisan CSS atau yang disebut dengan syntax..

Leave a Comment