Langsung ke konten utama

Pengertian css dan kodenya css

Pengertian CSS

Oke pertama-tama saat mulai belajar CSS kamu tentu harus paham betul pengertiannya. Sebenarnya apa itu CSS? CSS adalah singkatan dari Cascading Style Sheets. Jika diterjemahkan ke bahasa Indonesia secara harfiah, CSS berarti “lembar penataan menurun”. Namun secara konteks, Cascading Style Sheets adalah kumpulan perintah yang digunakan untuk menjelaskan tampilan sebuah halaman situs web dalam mark-up language. Mark-up language atau bahasa markah adalah bahasa pemrograman yang biasanya digunakan membuat website.
author Ahmad Muhardian · update terakhir 20 Jan 2017

3 Cara Penulisan Kode CSS dalam HTML

#  # 
Penulisan kode CSS dalam HTML dibagi menjadi tiga cara, internal, inline, dan eksternal. Pembagian ini berdasarkan letak kode CSS tersebut ditulis.

1. Internal CSS

Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal CSS juga dikenal dengan sebutan Embeded CSS.
Tag <style> biasanya ditulis di dalam tag <head>. Bisa juga ditulis di dalam <body>, namun lebih banyak ditulis di dalam <head>.
Contoh:
<!DOCTYPE html>
<html>
<head>
  <title>Contoh Internal CSS</title>
  <!-- penulisan internal css dalam tag head -->
  <style type="text/css">
    p{
      font-family: serif;
      line-height: 1.75em;
      font-size: 18px;
    }
    i { 
      font-family: sans;
      color: orange;
    }
  </style>
</head>

<body>
  <!-- penulisan internal css dalam tag body -->
  <style type="text/css">
    h2 { 
      font-family: sans;
      color: #333;
    }
  </style>
  <h2>Ini judul artikel</h2>
  <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>

2. Eksternal CSS



Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis disebuah file khusus yang berekstensi .css.



Sebagai contoh, saya akan membuat sebuah file bernama style-ku.css. Berikut ini cuplikan isi file style-ku.css




p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}






Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya. Ada beberapa cara memasukkan kode CSS dari berkas eksternal:



Pertama menggunakan tag <link>




<link rel="stylesheet" type="text/css" href="style-ku.css">






Atau bisa juga bisa menggunakan @import




<style type="text/css">
@import "style-ku.css";
</style>






Penulisan pada HTML versi lengkapnya seperti ini:




<!DOCTYPE html>
<html>
<head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="style-ku.css">
</head>

<body>
    <h2>Ini judul artikel</h2>
    <p>Ini adalah paragraf yang memuat isi artikel. Paragraf ini hanya untuk percobaan saja. Percobaan untuk mendemokan <i>internal css</i>. Seperti namanya, <i>inline CSS</i> adalah kode CSS yang ditulis langsung dalam file HTML.</p>
</body>
</html>






Hasilnya pun akan sama seperti contoh internal CSS, karena kode CSS-nya sama. Hanya saja berbeda tempat penulisannya

Komentar

Posting Komentar