Apa Itu CSS?

ullprasetio Januari 28, 2020


Apa itu CSS? ya.. Bagi para pemula yang baru terjun ke dunia pemrograman khususnya pemrograman web pasti akan menemukan istilah CSS. Hari ini mungkin hari keberuntungan kalian karena pada artikel kali ini akan membahas seputar CSS, seperti pengertian CSS, macam-macam CSS beserta contoh penulisannya.

Pengertian CSS

CSS adalah singkatan dari Cascading style sheets. Pengertian secara umum CSS adalah kumpulan perintah yang menjelaskan bagaimana elemen HTML ditampilkan.


Macam-macam CSS

Pada umumnya CSS dibagi menjadi 3 model, yaitu inline, embedded dan external. Yang membedakan hanya lokasi penulisan kode CSS tersebut. Berikut penjelasan lengkap dari ketiga macam CSS:

  • Inline style sheet

Penulisan kode CSS model inline adalah dengan langsung meletakan kodenya didalam tag HTML yang akan diubah. Dengan menambahkan atribut style, atribut sendiri adalah informasi tambahan yang dimasukan dalam sebuah tag.

Contoh penulisan:

<!DOCTYPE html>
<html>
  <head>
    <title>Inline style sheet</title>
  </head>
  <body>
    <h1 style="color:red; font-family:verdana;">Ini model inline style sheet</h1>
  </body>
</html>

  • Embedded / Internal style sheet

Model embedded style sheet atau tidak jarang juga disebut dengan internal style sheet karena penulisannya berada pada satu laman kode, yang membedakan antara model inline dan embedded adalah letak penulisannya. Penulisan model embedded ini diletakan diantara tag <head>...</head>

Contoh penulisan: 

<!DOCTYPE html>
<html>
<head>
  <title>Embedded style sheet</title>
  <style>
    p {
      color: blue;
      font-family: verdana;
    }
  </style>
</head>
<body>
  <h1 style="color:red; font-family:verdana;">Ini menggunakan model inline style sheet</h1>
  <p>Ini menggunakan model embedded atau internal style sheet</p>
</body>
</html>

  • External style sheet

Dan yang terakhir ada model external style sheet, kenapa bisa dinamakan demikain? yup.. Karena kode CSS-nya diletakan pada laman atau file berbeda. Cara ini lebih praktis daripada inline style sheet karena bisa menghemat ruang dan bisa digunakan berulang-ulang untuk laman web yang berbeda. Untuk menggunakan model ini kita perlu memanggil file yang berisi kode CSS dengan menggunakan tag <link href="(nama file css)"/>.


Buat 2 file, file pertama berikan nama ex.html dan file kedua berikan nama style.css dan tempatkan pada folder yang sama. Berikut baris kode untuk ex.html:

<!DOCTYPE html>
<html>
<head>
  <title>External style sheet</title>
  <link rel="stylesheet" type="text/css" href="style.css"/>
  <style>
    p {
      color: blue;
      font-family: verdana;
    }
  </style>
</head>
<body>
  <h1 style="color:red; font-family:verdana;">Ini menggunakan model inline style sheet</h1>
  <p>Ini menggunakan model embedded atau internal style sheet</p>
  <span>Ini menggunakan external style sheet</span>
</body>
</html>

Baris kode style.css:

span {
  color: brown;
  font-family: verdana;
}


Okeh, sampai disini pembahasan mengenai CSS, sampai jumpa diartikel selanjutnya dan terimakasih sudah mampir.

Baca juga: 15 Tag HTML Yang Sering Digunakan Dan Fungsinya


Tags:

Posting Komentar

0 Komentar