loading...

CSS Dasar: Perkenalan

CSS (Cascading Style Sheet) merupakan mekanisme sederhana yang mengatur gaya atau style (contoh: warna, ukuran, posisi, dsb) pada halaman web. (ref: www.w3.org)

Sebelum adanya CSS, memodifikasi tampilan masih menggunakan HTML secara utuh. Namun hal ini tidaklah efektif ketika akan dihadapkan dengan semakin banyaknya elemen HTML yang akan digunakan. Oleh karena itu, kehadiran CSS bertujuan untuk memisahkan konten dan style. Satu CSS dapat digunakan untuk banyak halaman HTML dan satu halaman HTML akan terlihat lebih menarik jika menggunakan CSS.  

Struktur CSS

CSS terdiri dari dua komponen: selector dan declaration. Selector berfungsi memberitahu browser pada elemen yang mana CSS bekerja. Sedangkan, declaration merupakan aturan CSS yang terdiri dari property dan value.


AturanPenulisan CSS

Ada dua cara yakni :

1. Internal Style: penulisannnya menjadi satu dengan dokumen HTML 

<!DOCTYPE html>
<html>
<head>
	<title>Internal Style</title>
	<style type="text/css">
		h1 {font-size: 20px; color: blue;}
	</style>
</head>
<body>
	<h1>Belajar CSS</h1>
	<p></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Inline Style</title>
</head>
<body>
	<h1 style="font-size: 20px; color: blue;">Belajar CSS</h1>
</body>
</html>


2. External Style: file CSS tersendiri atau terpisah dari dokumen HTML

<!DOCTYPE html>
<html>
<head>
	<title>External Style</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Belajar CSS</h1>
</body>
</html>

 

Gimana ? Mudaah kan ? Asyik kan?

Yok bereksperimen.. Let's Code! 

1 Comments

  • 19 Feb 2021 15:36:24

    Terimakasih, artikel nya sangat mengedukasi.

Leave a comment