Skip to content

Pesona Informatika

Belajar programming, tech tips, dan catatan teknik informatika

Menu
  • Home
  • Android
  • Programming
    • Belajar Python
    • Belajar c++
    • Kumpulan contoh program Java
    • Belajar CSS Pemula Dari Awal
    • Belajar JavaScript
    • Belajar ReactJS
  • Operating System
  • Tips&Trick
  • Other Notes
Menu

Belajar CSS (13. Display)

Posted on

Display Dalam CSS

Properti display sangat penting karena display merupakan property CSS yang mengontrol layout.
Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk sebagian besar elemen adalah blok atau inline.
ex.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<p>Display normal karena belum kita atur css nya</p>
	<ul>
		<li><a href="/html/default.asp" target="_blank">HTML</a></li>
		<li><a href="/css/default.asp" target="_blank">CSS</a></li>
		<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
	</ul>
</body>
</html>

hasil

kemudian kita atur menjadi deretan menu secara horizontal

<!DOCTYPE html>
<html>
<head>
	<style>
		li {
			display: inline;		
		}
	</style>
</head>
<body>
	<p>Display kita atur menjadi menu horizontal</p>
	<ul>
		<li><a href="/html/default.asp" target="_blank">HTML</a></li>
		<li><a href="/css/default.asp" target="_blank">CSS</a></li>
		<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
	</ul>
</body>
</html>

hasil

tag <li> secara default akan membuat baris baru, kode diatas merupakan contoh mengubah tampilan tag <li> yang secara default merupakan elemen block kita ubah menjadi inline. Begitupun sebaliknya, kita dapat mengubah element yang secara default inline menjadi block.

Contoh elemen blok:
<div>
<h1-h6>
<p>
<form>
<header>
<footer>
<section>

Contoh elemen inline:
<span>
<a>
<img>

Semoga bermanfaat.

Written by @akhi_syabab

Akhi Syabab
Akhi Syabab

Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency

Like our page, please… :D

Pesonainformatika

Sebuah site  untuk menyimpan dan dokumentasi apapun yang kami pelajari yang berhubungan dengan teknologi komputer khususnya pemrograman dan tentang perkuliahan.

©2023 Pesona Informatika | Design: Newspaperly WordPress Theme
Go to mobile version