Home » Teknologi,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 di gunakan untuk mengatur dan memanipulasi tampilan sebuah website.

Cascading Style Sheet (CSS) berfungsi untuk mengatur tata letak sebuah halaman web. Hal yang dapat di lakukan 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 di lakukan 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 di antara elemen <head>, dan CSS external di tulis secara terpisah dengan file HTML, di mana file CSS di simpan dengan extensi .css, dan untuk menggunakannya pada file HTML di gunakan 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 di mana bagian declaration terdiri dari nama property dan value. Sedangkan  selector merupakan nama dari elemen pada bahasa HTML atau nama yang di tentukan 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 menggunakan id selector. penulisan nama selector id di tandai dengan simbol “#” di depan nama selector. 

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

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

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

Cascading Style Sheet Inline

Berikut adalah contoh penggunaan CSS inline yang di gunakan 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, di mana kode CSS di letakkan di dalam elemen <head> di definisikan 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 di tulis 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 di antara 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 di gunakan untuk membuat warna latar belakang halaman web menjadi warna powderblue.
  • Baris 4-6 merupakan kode yang di gunakan untuk membuat setiap heading 1 menjadi berwarna biru.
  • Baris 7-9 merupakan kode yang di gunakan 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 di gunakan untuk memanggil kode CSS yang di simpan 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