Ads by Yasya El Hakim
CSS pada HTML

CSS Merupakan singkatan dari Cascading Style Sheets.
CSS dapat kita gunakan untuk menuntukkan bagaimana elemen HTML dapat terlihat pada layar.
Dengan menggunakan CSS, kalian bisa mengontrol Layout dengan mudah.
Kalian dapat menambahkan CSS kedalah HTML dengan menggunakan tiga cara:
  • Inline - Dengan menggunakan atribut style pada elemen HTML.
  • Internal - Dengan menggunakan elemen <style> pada bagian <head>.
  • External - Dengan menggunakan file CSS dari luar (Dari URL lain).

Hal yang paling umum dalam menggunakan CSS adalah menempatkan file CSS pada lokasi yang berbeda. Pada contoh-contoh sebelumnya, kami selalu menggunakan Inline CSS agar dapat mudah dipahami.

Tips: Kalian dapat mempelajari lebih lanjut tentang CSS pada Tutorial mendatang.

Inline CSS

Inline CSS dapat kita gunakan untuk membuat tampilan baru kedalam suatu elemen HTML.
Untuk menggunakan Inline CSS, kita dapat menggunakan atribut style.

Contoh

Berikut adalah contoh Inline CSS yang merubah warna teks dari elemen <h1> menjadi warna biru:
<h1 style="color:blue;">Heading</h1> 

Internal CSS

Internal CSS dapat kita gunakan untuk membuat tampilan baru kedalam suatu elemen HTML.
Untuk menggunakan Internal CSS, kita dapat memasukkan elemen <style> kedalam bagian <head> pada dokumen HTML.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>

<body>
<h1>Heading</h1>
<p>Paragraf.</p>

</body>
</html> 
See the Pen 49. HTML CSS Internal by Yasya El Hakim (@elhakimyasya) on CodePen.

External CSS

External CSS dapat kita gunakan untuk membuat tampilan baru pada berbagai jumlah halaman HTML.
Dengan menggunakan External CSS, kalian bisa mengubah tampilan keseluruhan halaman Web.
Untuk menggunakan Internal CSS, kita dapat memasukkan elemen <link> kedalam bagian <head> pada dokumen HTML.

Contoh

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Heading</h1>
<p>Paragraf.</p>

</body>
</html> 

External CSS dapat ditulis dan diedit dengan menggunakan Text Editor. File External CSS tidak boleh memiliki kode HTML dan harus disimpan dengan ekstensi .css.

Berikut contoh penulisan file style.css:
body {
  background-color: powderblue;
}

h1 {
  color: blue;
}

p {
  color: red;
}

Font CSS

Property color dapat kita gunakan untuk menentukan warna teks.
Property font-family dapat kita gunakan untuk menentukan jenis font.
Propery font-size dapat kita gunakan untuk menentukan ukuran font.

Contoh

<!DOCTYPE html>
<html>
<head>

<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}

p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}

</style>
</head>

<body>

<h1>Heading</h1>
<p>Paragraf.</p>

</body>
</html>
See the Pen 50. HTML CSS Fonts by Yasya El Hakim (@elhakimyasya) on CodePen.

CSS Border (Batas)

Property border dapat kita gunakan untuk membuat garis batas disekitar elemen HTML.

Contoh

p {
  border: 1px solid powderblue;
}

CSS Padding

Property padding dapat kita gunakan untuk menambahkan ruang antara teks dan Border (batas).

Contoh

p {
  border: 1px solid powderblue;
  padding: 30px;
}



CSS Margin

Property margin dapat kita gunakan untuk menambahkan ruang diluar border (batas).

Contoh

p {
  border: 1px solid powderblue;
  margin: 50px;
}

Atribut id

Untuk menentukan suatu tampilan pada elemen yang diinginkan, kalian bisa menambahkan atribut id kedalam elemen:
<p id="p01">Teks ini berbeda</p>

Untuk menentukan tampilan dari elemen diatas, kita bisa menggunakan kode CSS berikut:
#p01 {
  color: blue;
}

Catatan: Nama id harus unik (berbeda dengan yang lain), jadi fungsi dari id adalah untuk mempermudah dalam menyeleksi suatu elemen HTML.

Atribut Class

Untuk menentukan suatu tampilan pada elemen yang diinginkan, kalian bisa menambahkan atribut class kedalam elemen:
<p class="paragaraf">Teks ini berbeda</p>

Untuk menentukan tampilan elemen diatas, kita bisa menggunakan kode CSS berikut:
p.paragraf {
  color: red;
}

Referensi External

CSS External dapat kita gunakan dengan menyertakan URL lengkap kedalam dokumen HTML.

Contoh

Berikut adalah contoh CSS External:
<link rel="stylesheet" href="https://www.namawebsite.com/html/style.css">

Contoh berikut akan mengarah kedalam folder html pada dokumen HTML:
 <link rel="stylesheet" href="/html/style.css"> 

Contoh berikut akan mengarah kedalam folder yang sama pada dokumen HTML:
<link rel="stylesheet" href="style.css">

Kalian dapat mempelajari tentang File Path pada bagian selanjutnya

Ringkasan

  • Gunakan atribut style untuk menggunakan Inline CSS.
  • Gunakan elemen <style> untuk menentukan Internal CSS.
  • Gunakan elemen <link> untuk merujuk ke External CSS.
  • Letakkan elemen <style> dan <link> didalam elemen <head>.
  • Gunakan property color untuk menentukan warna teks.
  • Gunakan property font-family untuk menentukkan jenis font.
  • Gunakan property font-size untuk menentukan ukuran font.
  • Gunakan property border untuk menentukan garis batas.
  • Gunakan property padding untuk memberikan ruang tambahan didalam border (garis batas).
  • Gunakan property margin untuk memberikan ruang tambahan diluar border.

Sebelumnya: Tutorial Lengkap HTML: Warna pada HTML - Bagian 12
Selanjutnya: Tutorial Lengkap HTML: Link pada HTML - Bagian 14
Daftar Isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya