Kami menggunakan cookies

Situs ini menggunakan cookies dari cmlabs untuk memberikan dan meningkatkan kualitas layanannya serta menganalisis lalu lintas..

Dimana Anda dapat melihat hasil karya kami?
Tempat kecil membuat kombinasi, namun persilangan yang terjadi didalamnya tidak memberikan banyak kombinasi. Jadi, berhati-hatilah dalam membuat justifikasi, terutama SEO.

Cascading Style Sheet (CSS)

Terakhir diperbarui: Aug 25, 2023

Cascading Style Sheet (CSS)
Gambar sampul: Ilustrasi Cascading Style Sheet (CSS) yang berfungsi untuk mengatur tampilan visual muka website. Berikut pembahasan singkatnya.

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

Gambar 1: Hasil output internal CSS yang menampilkan judul “Panduan CSS” berwarna putih dan paragraf “Belajar HTML & CSS” memiliki ukuran font 30px dengan jenis font Arial dengan warna background biru muda.
Gambar 1: Hasil output internal CSS yang menampilkan judul “Panduan CSS” berwarna putih dan paragraf “Belajar HTML & CSS” memiliki ukuran font 30px dengan jenis font Arial dengan warna background biru muda.

 

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

Output external CSS yang menampilkan judul “Panduan CSS” berwarna biru dan paragraf “Belajar HTML & CSS” memiliki ukuran font 20px dengan jenis font Calibri dengan warna background hijau muda.
Gambar 2: Output external CSS yang menampilkan judul “Panduan CSS” berwarna biru dan paragraf “Belajar HTML & CSS” memiliki ukuran font 20px dengan jenis font Calibri dengan warna background hijau muda.

 

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

Hasil output dari kode program inline CSS di atas yaitu judul “Panduan CSS” berwarna oranye dan paragraf “Belajar HTML & CSS” memiliki ukuran font 40px dengan jenis font Times New Roman.
Gambar 3: Hasil output dari kode program inline CSS di atas yaitu judul “Panduan CSS” berwarna oranye dan paragraf “Belajar HTML & CSS” memiliki ukuran font 40px dengan jenis font Times New Roman.
Mitra kami yang berharga
Aliansi strategis ini memungkinkan kami untuk menawarkan kepada klien-klien kami berbagai solusi inovatif SEO dan pelayanan yang luar biasa. Pelajari Lanjut
cmlabs

cmlabs

Bagaimana pendapat Anda? Apakah Anda menyukai artikel ini?

Update Terkini

Permudah proses analisis dengan SEO Tools yang terpasang langsung di peramban Anda. Saatnya menjadi ahli SEO sejati.

Gratis di semua peramban berbasis Chromium

Pasang di peramban Anda sekarang? Jelajahi sekarang cmlabs chrome extension pattern cmlabs chrome extension pattern

Butuh bantuan?

Ceritakan tentang kebutuhan SEO Anda, tim marketing kami akan membantu menemukan solusi terbaik.

Berikut daftar tim kami secara resmi dan diakui, hati-hati terhadap penipuan oknum tidak bertanggung jawab yang mengatasnamakan PT cmlabs Indonesia Digital (cmlabs). Baca lebih lanjut
Marketing Teams

Agita

Marketing

Tanya Saya
Marketing Teams

Irsa

Marketing

Tanya Saya
Marketing Teams

Yuliana

Business & Partnership

Tanya Saya
Marketing Teams

Thalia

Business Development Global

Tanya Saya
Marketing Teams

Robby

Business Development ID

Tanya Saya
Marketing Teams

Dwiyan

Partnership

Tanya Saya
Marketing Teams

Rochman

Product & Dev

Tanya Saya
Marketing Teams

Said

Career & Internship

Tanya Saya

Mohon maaf, saat ini tool Mobile Friendly Test tidak dapat diakses karena sedang dalam tahap pemeliharaan sistem sampai pemberitahuan lebih lanjut.

Cek

Tetap up-to-date dengan tool baru kami, cmlabs Surge. Jelajahi tren & event populer!

Cek

Pendapat Anda Berharga! Beri masukan untuk Survei Plagiarism Checker kami?

Cek

Temukan tren bisnis Anda dengan mudah! Kalkulator proyeksi trafik adalah alat yang sempurna untuk membantu Anda memahami permintaan di sektor bisnis Anda. Pilih sektor Anda dan lihat proyeksi trafiknya sekarang!

Cek

Saat ini tidak ada notifikasi...