Daftar Isi

Pengenalan CSS

PETIK.NET | CSS (Cascading Style Sheets) adalah teknologi yang digunakan untuk mengatur tampilan halaman web. Dengan CSS, Anda dapat mengubah tampilan elemen HTML seperti teks, gambar, dan tata letak dengan mudah. Hal ini memberikan kemampuan untuk membuat tampilan web yang menarik dan profesional.

Menambahkan CSS ke HTML

Setelah membuat dokumen HTML, langkah selanjutnya adalah menambahkan CSS untuk mengatur tampilan halaman web. Anda dapat menambahkan CSS ke HTML dengan menggunakan tag < style > atau dengan menggunakan file eksternal CSS.

Contoh penggunaan tag < style >:

<!DOCTYPE html>
<html>
<head>
	<title>Contoh CSS Internal</title>
	<style>
		body {
			background-color: lightblue;
			font-family: Arial;
		}
		
		h1 {
			color: white;
			background-color: black;
			padding: 20px;
			text-align: center;
		}
		
		p {
			font-size: 20px;
			line-height: 1.5;
			padding: 10px;
			margin: 0;
		}
	</style>
</head>
<body>
	<h1>Contoh Penggunaan CSS Internal</h1>
	<p>Ini adalah contoh paragraf menggunakan CSS internal.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Contoh CSS Internal</title>

<style>

body {

background-color: lightblue;

font-family: Arial;

}

h1 {

color: white;

background-color: black;

padding: 20px;

text-align: center;

}

p {

font-size: 20px;

line-height: 1.5;

padding: 10px;

margin: 0;

}

</style>

</head>

<body>

<h1>Contoh Penggunaan CSS Internal</h1>

<p>Ini adalah contoh paragraf menggunakan CSS internal.</p>

</body>

</html>

Selector dan properti CSS

Selector CSS digunakan untuk menentukan elemen mana yang akan diatur tampilannya. Properti CSS digunakan untuk menentukan bagaimana tampilan elemen tersebut.

Contoh selector dan properti CSS:

/* selector */
h1 {
	color: red;
	font-size: 30px;
}

/* properti */
background-color: blue;

/* selector */

h1 {

color: red;

font-size: 30px;

}

/* properti */

background-color: blue;

Mengatur font, warna, dan background

Dengan CSS, Anda dapat mengatur font, warna, dan background untuk membuat tampilan halaman web yang menarik.

Contoh pengaturan font, warna, dan background:

/* font */
body {
	font-family: Arial, sans-serif;
	font-size: 16px;
}

/* warna */
h1 {
	color: red;
	background-color: yellow;
}

/* background */
body {
	background-image: url('gambar.jpg');
	background-repeat: no-repeat;
	background-position: center;
}

/* font */

body {

font-family: Arial, sans-serif;

font-size: 16px;

}

/* warna */

h1 {

color: red;

background-color: yellow;

}

/* background */

body {

background-image: url('gambar.jpg');

background-repeat: no-repeat;

background-position: center;

}

Mengatur marging, padding, dan border

Anda dapat mengatur margin, padding, dan border pada elemen HTML dengan CSS. Margin digunakan untuk memberikan jarak antara elemen dengan elemen lainnya, sedangkan padding digunakan untuk memberikan jarak antara konten elemen dengan border. Border digunakan untuk membuat garis atau bingkai pada elemen.

Contoh pengaturan margin, padding, dan border:

/* margin */
p {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 50px;
	margin-right: 50px;
}

/* padding */
div {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
}

/* border */
img {
	border-style: solid;
	border-width: 1px;
	border-color: black;
}

/* margin */

p {

margin-top: 20px;

margin-bottom: 20px;

margin-left: 50px;

margin-right: 50px;

}

/* padding */

div {

padding-top: 10px;

padding-bottom: 10px;

padding-left: 20px;

padding-right: 20px;

}

/* border */

img {

border-style: solid;

border-width: 1px;

border-color: black;

}

Menata layout dengan display, position, dan float

Dengan CSS, Anda dapat menata layout halaman web dengan menggunakan properti display, position, dan float. Display digunakan untuk menentukan tampilan elemen, apakah elemen tersebut ditampilkan sebagai blok atau inline. Position digunakan untuk menentukan posisi elemen, sedangkan float digunakan untuk mengatur tata letak elemen secara horizontal.

Contoh pengaturan layout dengan display, position, dan float:

/* display */
p {
	display: block;
}

span {
	display: inline;
}

/* position */
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: white;
}

#content {
	position: absolute;
	top: 100px;
	left: 50px;
}

/* float */
img {
	float: left;
	margin-right: 10px;
}

/* display */

p {

display: block;

}

span {

display: inline;

}

/* position */

#header {

position: fixed;

top: 0;

left: 0;

width: 100%;

background-color: white;

}

#content {

position: absolute;

top: 100px;

left: 50px;

}

/* float */

img {

float: left;

margin-right: 10px;

}

Dengan menggunakan CSS, Anda dapat mengatur tampilan halaman web dengan lebih fleksibel dan mudah. Anda dapat mengubah warna, font, tata letak, dan elemen lainnya dengan mudah. Dengan menguasai CSS, Anda dapat membuat tampilan halaman web yang menarik dan profesional.

Kesimpulan

Demikianlah artikel mengenai Mengelola Stylesheet dengan CSS, mulai dari pengenalan CSS, menambahkan CSS ke HTML, selector dan properti CSS, mengatur font, warna, dan background, mengatur margin, padding, dan border, serta menata layout dengan display, position, dan float.

Semoga artikel ini bermanfaat bagi Anda yang ingin mempelajari CSS. Jangan ragu untuk mencoba dan bereksperimen dengan CSS untuk membuat tampilan halaman web yang menarik dan profesional.

Dapatkan Berita dan Informasi Terbaru dengan mengikuti kami di Google News