Kuasai kamus SEO dengan pahami setiap istilah serta artinya di sini.

Cascading Style Sheet (CSS)

Terakhir diperbarui: Aug 25, 2023

https://cmlabs.co/id-id/seo-terms/css-adalah

Link copied!

Apa itu CSS?

CSS adalah singkatan dari cascading style sheet merupakan bahasa yang digunakan untuk mengatur tampilan visual (front-end) situs web. CSS dikembangkan pada tahun 1996 oleh World Wide Web Consortium (W3C) untuk mengatur format halaman HTML.

CSS memungkinkan Anda untuk membangun situs web dengan tampilan menarik dan memberikan pengalaman baik bagi pengguna. Hal tersebut dikarenakan CSS dapat digunakan untuk mengatur style pada dokumen HTML atau bahasa markup lainnya seperti mengatur gaya huruf, ukuran, warna, spacing, membuat tombol, dan style lainnya.

Fungsi CSS

Pada dasarnya, fungsi CSS adalah untuk membuat tampilan dokumen HTML atau bahasa markup menjadi lebih menarik dan bervariasi. Selain itu, ada pula fungsi CSS lainnya yaitu:

Menyediakan Tampilan Responsif

Salah satu fungsi CSS adalah dapat menyediakan tampilan responsif untuk segala ukuran layar, baik desktop maupun seluler. CSS memiliki property seperti max-width dan min-width untuk mengatur tampilan sesuai ukuran layar. Dengan begitu, situs web Anda bisa memberikan pengalaman pengguna yang lebih baik.

Mempersingkat Waktu Loading

Selain itu, fungsi CSS adalah membuat halaman web dapat memberikan respon yang lebih cepat. Dengan CSS Anda bisa meminimalkan jumlah kode yang ditulis karena style CSS bisa diterapkan pada beberapa halaman web sekaligus. Hal tersebut menyebabkan ukuran file menjadi lebih kecil dan halaman web dapat dimuat lebih cepat.

Memudahkan Pengelolaan Kode

Penggunaan CSS memudahkan Anda dalam melakukan pengelolaan kode. Misalnya, Anda ingin mengganti jenis font yang digunakan di suatu website. Anda tidak perlu mengubah satu per satu font, namun cukup edit kode CSS terkait jenis font dan perubahan tersebut akan berlaku di seluruh halaman HTML.

Jenis-Jenis CSS

Berdasarkan cara penulisannya, CSS dibagi menjadi tiga jenis yaitu internal, external, dan inline CSS. Simak pembahasan jenis-jenis CSS di bawah ini:

Internal CSS

Internal CSS adalah kode CSS yang dituliskan di dalam bagian <head> dokumen HTML. Anda dapat menambahkan kode CSS dengan menuliskan tag <style> pada header HTML tersebut. Namun, internal CSS kurang efisien karena dapat memperlambat performa website dan membuat ukuran file menjadi lebih besar.

External CSS

External CSS adalah penulisan kode CSS yang terpisah dengan dokumen HTML. Biasanya kode CSS akan disimpan dalam file ekstensi .css, kemudian dapat diimpor melalui tag <link> yang terdapat pada bagian <head>. Pada tag <link> tersebut, Anda hanya perlu menuliskan atribut rel="stylesheet" dan atribut href yang berisi direktori tempat file ekstensi .css disimpan.

External CSS banyak digunakan dalam pengembangan website karena dapat mempercepat waktu loading. Selain itu, external CSS juga membuat kode program lebih rapi dan ukuran file menjadi lebih kecil.

Inline CSS

Inline CSS adalah menuliskan kode CSS sebagai atribut pada elemen HTML. Anda bisa menambahkan style yang berbeda sesuai kebutuhan tiap elemen. Akan tetapi, penggunaan inline CSS juga kurang efisien karena style hanya dapat digunakan pada satu elemen saja. Anda perlu menambahkan style CSS tersendiri untuk elemen lainnya.

Contoh Sintaks CSS

Berikut adalah beberapa cara mengaplikasikan sintaks CSS dalam dokumen HTML. Perhatikan source code di bawah ini:

Contoh Internal CSS

Pada internal CSS, Anda dapat menambahkan tag style dan properti CSS di bagian <head> dokumen HTML. Dalam kode berikut ini terdapat internal CSS untuk mengatur style pada paragraf dan H1.

<!DOCTYPE html>
<html>
  <head>
    <title>Panduan CSS</title>
    <style>
      body {
        background-color:lightblue;
      }
      h1 {
        color:white;
        text-align:center;
      }
      p {
        font-family:Arial;
        font-size:30px;
      }
    </style>
  </head>
  <body>
    <h1>Panduan CSS</h1>
    <p>Belajar HTML & CSS</p>
  </body>
</html>

cmlabs

Output Internal CSS

Contoh External CSS

Untuk menggunakan external CSS, Anda harus menambahkan referensi ke file CSS eksternal di dalam tag <link> pada bagian <head> dokumen HTML. Cara untuk memanggil file eksternal CSS adalah dengan menuliskan atribut href=”direktori file CSS” di dalam tag <link>. Perhatikan contoh kode HTML dan file mystyle.css berikut.

Kode HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Panduan CSS</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
    <h1>Panduan CSS</h1>
    <p>Belajar HTML & CSS<p>
  </body>
</html>

cmlabs

Kode CSS yang disimpan dalam file mystyle.css

<style>
  body {
    background-color:lightgreen;
  }
  h1 {
    color:blue;
    text-align:center;
  }
  p {
    font-family:Calibri;
    font-size:20px;
  }
</style>

cmlabs

Output External CSS

Contoh Inline CSS

Pada inline CSS, Anda dapat menambahkan atribut style dan properti CSS dalam atribut HTML. Perhatikan kode berikut untuk mengatur style pada paragraf dan H1 dengan inline CSS.

<!DOCTYPE html>
<html>
  <head>
    <title>Panduan CSS</title>
  </head>
  <body>
    <h1 style=color:orange;text-align:center;>Panduan CSS</h1>
    <p style=font-family:TimesNewRoman;font-size:40px;>Belajar HTML & CSS</p>
  </body>
</html>

cmlabs

Output Inline CSS