Tutorial dasar css

Melanjutkan pembahasan sebelumnya yaitu Pengenalan dasar css, kali ini kita akan membahas dua tehnik penggunaan css.

Kita ketahui bahwa penggunaan css ada dua type diantaranya adalah Internal dan Eksternal, dan yang Internal terbagi lagi menjadi dua.

1. Internal css

  • Inline css
    Script css yang dituliskan langsung pada tag yang bersangkutan.
  • Embedded css
    Script dituliskan diantara tag head, pada halaman html itu sendiri

Dari keterangan singkat diatas, kita akan uraikan sedikit lebih detail tentang css internal, baik yang inline maupun yang embedded.

Perlu di ingat kembali, dalam bahasan Pengenalan dasar html ↗ kita telah menyinggung sedikit tentang “Attribut”, yaitu informasi tambahan yang memiliki “Name” dan “Value”.


Dan di pembahasan kali ini, “Attributakan selalu dipakai dalam penulisan css, baik itu yang Internal maupun yang eksternal.

1A. CSS Internal inline.
Contoh:

<p style="font-family:tahoma">Contoh css Internal Inline</p>

Dalam contoh penulisan css internal inline di atas, di sebutkan bahwa “p” memiliki “attribut” css yang di tentukan.
Nilai dari “attribut” tersebut adalah: “style” sebagai “Name”, dan “font-family: tahoma” adalah “Value” dari attribut tersebut.

Lalu bagaimana jika kita ingin menambahkan banyak perintah pada “Value” attribut css kita?
Bisa, Anda hanya perlu menambahkan “titik koma (;)” di akhir tiap perintah.

Contoh:

<p style="font-family:tahoma; color:green;">Contoh css Internal Inline</p>

Dari contoh diatas, Value, memiliki dua perintah diataranya adalah font-family (jenis huruf), dan color (warna huruf), dan perhatikan di tiap akhir perintah value selalu di akhiri dengan titik koma (;).

 Catatan : 

Penggunaan Inline css memanglah mudah dan praktis, jika halaman website yang kita desain hanya memiliki sedikit baris saja, namun akan membuat kita sedikit repot jikalau harus mengulang beberapa baris yang memiliki perintah css yang sama.

Perhatikan contoh di bawah.

<p>Paragraf tanpa CSS</p>
<p style="font-family:tahoma; color:green;">Paragraf dengan jenis huruf tahoma dan warna green</p>
<p style="color:red;">Paragraf warna huruf red</p>
<p style="font-family:tahoma; color:green;">Paragraf dengan jenis huruf tahoma dan warna green</p>

Dari contoh diatas, kita ingin pada line ke 2 dan ke 4, memiliki jenis huruf dan warna yang sama, maka mau tidak mau kita harus mengetikan perintah yang sama.
Inilah yang menjadikan salah satu kelemahan inline css, kita harus dipaksa mengetik ulang perintah untuk baris yang sama.

1B. CSS Internal embedded
Dalam pembahasan Css internal embedded kali ini, kita akan dikenalkan dengan “selector” ada tiga selector yang paling sering digunakan, diantaranya adalah “selector tag”, “selector class” dan “selector id”.

Apa itu selector ?
Selector adalah penghubung antara tag css dengan tag html yang bersangkutan.

  • Selector tag
    Adalah selector yang memiliki nama yang sama antara element html dan css.
  • Selector class
    Adalah selector yang menggunakan nama “class” yang penulisan pada css nya di tandai dengan awalan “titik” (.)
  • Selector id
    Adalah seletor yang menggunakan nama “id” yang penulisan pada css nya ditandai dengan awalan “tanda pagar” (#)

Contoh internal embedded css:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Internal Embedded Css</title>
	
<!-- Kode css -->

<style>
h3 {
	color: maroon; 
	font-family: tahoma;
}
.c1 {
	font-family: sans-serif;
}
#c2 {
	font-family: tahoma; 
	color: #0000ff;
}
</style>

<!-- Akhir kode CSS -->

</head>
<body>

	<h3>BELAJAR EMBEDDED CSS</h3>

	<p class="c1">
		Paragraf ini menggunakan selector class
	</p>


	<p id="c2">
		Paragraf ini menggunakan selector id
	</p>

</body>
</html>

Perhatikan contoh script, dalam css diatas, menerangkan:

SelectorKeterangan
h3Merupakan selector tag, seluruh h3 yang ada dalam dokumen html akan di format sesuai value h3 yang ada pada css
c1Merupakan selector class, seluruh tag dalam dokumen html yang memiliki attribut nama c1 akan di format sesuai value pada css c1
c2Merupakan selector id, seluruh tag dalam dokumen html yang memiliki attribut nama c2 akan di format sesuai value pada css c2


2. Eksternal css

Eksternal css sebenarnya penggunaannya sama seperti dengan internal embedded css, hanya saja cara penulisan css dan dokumen html dipisah.

Dalam eksternal css, css ditulis dalam file yang diberi nama dengan extensi .css (dot css), contoh: “style.css
Penulisan eksternal css Tidak pelu di awali dengan <style> dan di akhiri dengan </style>.

Css dapat di gunakan oleh dokumen html dengan cara memanggil css tersebut kedalam dokumen html.
Perhatikan contoh dibawah penulisan file css, dan cara dokumen html memanggil untuk digunakannya.

h3 {
	color: maroon; 
	font-family: tahoma;
}
.c1 {
	font-family: sans-serif;
}
#c2 {
	font-family: tahoma; 
	color: #0000ff;
}

Diatas adalah contoh Penulisan eksternal css, yang Saya beri nama style.css. (hanya sebagai contoh, Anda bisa menggunakan nama sesuai kebutuhan anda)

Dan dibawah ini adalah script dokumen html yang memanggil file css untuk di gunakan dalam dokumen html.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Eksternal Css</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

	<h3>BELAJAR EMBEDDED CSS</h3>

	<p class="c1">
		Paragraf ini menggunakan selector class
	</p>

	<p id="c2">
		Paragraf ini menggunakan selector id
	</p>

</body>
</html>

Perhatikan “line nomor 6” pada script dokumen html diatas.

Pada line nomor 6 itulah cara dokumen html memanggil file eksternal css untuk digunakan dalam dokumen html.

 Bahan latihan 

Biasakan untuk menulis dan latihan koding, agar Anda terbiasa, berikut dibawah referensi buat Anda belajar html dan css:

Membuat website pertama dengan HTML dan CSS
Membuat website dengan togle menu
Membuat website dengan sliding menu
Modal Dialog hanya dengan CSS
CSS Button Cantik
Membuat menu Dropdown dengan CSS


Semoga dapat dipahami dan selamat belajar. Berikutnya silahkan gunakan halaman latihan koding css untuk memperlancar Anda dalam menuliskan script css.

Mungkin Anda Menyukai