Home » Website » 3 Konsep Dasar CSS Yang Harus Dipahami Sebelum Membuat Website

3 Konsep Dasar CSS Yang Harus Dipahami Sebelum Membuat Website

Daftar Isi

Pengertian Cascading Style Sheet (CSS)

CSS merupakan singkatan dari Cascading Style Sheet yang digunakan untuk mengatur dan memanipulasi tampilan sebuah website.

Cascading Style Sheet (CSS) berfungsi untuk mengatur tata letak sebuah halaman web. Hal yang dapat dilakukan dengan CSS yaitu mengatur warna, jenis tulisan, ukuran tulisan, jarak antara elemen, posisi elemen, penggunaan background gambar atau warna, serta dapat mengatur tampilan website berdasarkan perangkat tertentu (responsive), dan sebagainya.

Untuk menggunakan bahasa CSS pada dokumen HTML dapat dilakukan dengan tiga cara yaitu inlineinternal, dan external. Perbedaan dari ketiganya terletak pada cara penulisannya. Dimana, CSS inline di tulis langsung pada elemen HTML dengan menambahkan atribut “style”. Selanjutnya, CSS internal di tulis pada halaman yang sama dengan menggunakan elemen <style> yang di letakkan diantara elemen <head>, dan CSS external di tulis secara terpisah dengan file HTML, dimana file CSS di simpan dengan extensi .css, dan untuk menggunakannya pada file HTML digunakan elemen <link> dengan menambahkan dua atribut yaitu “rel” untuk menyatakan tipe file relasi dan “href” di isi dengan URL dari file CSS external.

Sebelum Anda mempelajari lebih lanjut bahasa CSS, mari kita lihat bagaimana syntax dari penulisan kode CSS itu sendiri. Terdapat dua bagian dalam penulisan kode CSS yaitu selector dan declaration dimana bagian declaration terdiri dari nama property dan value. Sedangkan  selector merupakan nama dari elemen pada bahasa HTML atau nama yang ditentukan sendiri oleh penggunanya dengan menggunakan id atau class. Berikut adalah format syntax kode CSS.

Sumber: https://www.w3schools.com/css/css_syntax.asp

Berikut adalah contoh penulisan kode CSS dengan selector dari nama elemen dasar.

				
					p {
  text-align: center;
  color: red;
}
				
			

Berikut adalah contoh penulisan kode CSS dengan menggunaka id selector. penulisan nama selector id ditandai dengan simbol “#” di depan nama selector.

				
					#para1 {
  text-align: center;
  color: red;
}
				
			

Berikut adalah contoh penulisan kode CSS dengan menggunaka class selector. Penulisan nama selector class ditandai dengan tanda “.” di depan nama selector.

				
					.center {
  text-align: center;
  color: red;
}
				
			

Cascading Style Sheet Inline

Berikut adalah contoh penggunaan CSS inline yang digunakan pada heading dan paragraph untuk mengatur warna pada sebuah tulisan.

				
					<!DOCTYPE html>
<html>
<body>
	<h1 style="color:blue;">Judul berwarna biru</h1>
	<p style="color:red;">Paragraph berwarna merah</p>
</body>
</html>
				
			

Cascading Style Sheet Internal

Berikut adalah contoh penggunaan CSS internal, dimana kode CSS diletakkan didalam elemen <head> didefinisikan dengan elemen <style>. Dimana, kode berikut mengatur warna background pada halaman web, mengatur warna tulisan pada heading dan paragraph.

				
					<!DOCTYPE html>
<html>
<head><style>body{background-color:powderblue}h1{color:blue}p{color:red}</style></head>
<body>
	<h1>Ini adalah heading berwarna biru</h1>
	<p>Ini adalah paragraph yang berwarna merah</p>
</body>
</html>
				
			

Cascading Style Sheet Eksternal

Penggunaan CSS external pada HTML ditulis secara terpisah dengan kode HTML. File CSS di simpan dengan nama file styles.css sedangkan file HTML di simpan dengan nama file css.html dan selanjutnya di relasikan dengan menggunakan tag yang di letakkan diantara tag.

Untuk mempraktekkan bagaimana menggunakan CSS eksternal ikuti langkah-langkah berikut:

1. Ketikkan kode CSS berikut ini dan simpan dengan nama file styles.css

				
					body {
	background-color: powderblue;
}
h1 {
	color: blue;
}
p {
	color: red;
}
				
			

Keterangan:

  • Baris 1-3 merupakan kode yang digunakan untuk membuat warna latar belakang halaman web menjadi warna powderblue.
  • Baris 4-6 merupakan kode yang digunakan untuk membuat setiap heading 1 menjadi berwarna biru.
  • Baris 7-9 merupakan kode yang digunakan untuk membuat setiap paragraf berwarna merah.

2. Selanjutnya ketikkan kode HTML berikut ini dan simpan dengan nama file index.html

				
					<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>Ini adalah heading</h1>
	<p>Ini adalah paragraf</p>
</body>
</html>
				
			

Keterangan:

  • Baris 4 merupakan kode yang digunakan untuk memanggil kode CSS yang disimpan pada file style.css sehingga kode tersebut dapat mengatur warna latar halaman web, mengatur warna tulisan pada elemen heading menjadi warna biru, dan mengatur warna tulisan paragraf menjadi warna merah.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments