ZenTutorials

Blog ini memuat artikel yang membahas tentang dunia teknologi informasi seperti Bahasa pemrograman, aplikasi dan internet.

populer android APPS

  1. apps
  2. apps
  3. apps
  4. apps

Populer android Games

  1. games
  2. games
  3. games
  4. games
  5. games

Selasa, 29 Januari 2019

Mengatur tinggi dan lebar di CSS

Seperti yang sudah di jelaskan sebelumnya di sesi pembelajaran div dan span, element HTML di secara garis besar di bagi menjadi dua yaitu element blog-line dan in-line.

element Block-line seperti <div>, <p> dan lain-lain, secara default lebarnya akan memenuhi element parentnya. Sedangkan untuk element yang bersifat In-line element seperti <span>, lebar element akan menyesuaikan kontent yang di muat tanpa terpengaruh oleh parent elementnya. Contoh element bock-line dan in-line sebagai berikut:

Contoh element block-line dan in-line

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

div {
background:cyan;
}

span {
background:cyan;
}
</style>
</head>
<body>

<div>ini adalah element HTML jenis block-line</div>
<br>
<span>ini adalah element HTML jenis in-line</span>

</body>
</html>


Preview

ini adalah element HTML jenis block-line

ini adalah element HTML jenis in-line

Perhatikan contoh dua elemnet di atas (div dan span), element div adalah element jenis block-line secara default lebarnya memenuhi parent elementnya yakni element body.

Element span adalah element jenis in-inline yang lebarnya mengikuti kontentnya.

Dengan CSS, kita dapat mengatur tinggi dan lebar element HTML sesui selera kita.


Property Width di CSS

Width di CSS adalah property yang di gunakan untuk mengatur ketinggian element HTML.

Contoh penggunaan property width sebagai berikut:

Contoh property width di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

.satu {
background:cyan;
width:100px;
}

.dua {
background:gray;
width:10em;
}

.tiga {
background:purple;
width:50%;
}
</style>
</head>
<body>

<div class="satu" >element 1</div>
<div class="dua" >element 2</div>
<div class="tiga" >element 3</div>

</body>
</html>


Preview

element 1
element 2
element 3

Perhatikan properti ini width:50%;, property width dengan satuan persen (%) artinya lebar element adalah persentase dari element induknya (parent element). misalnya, element body lebarnya 100% maka element div dengan class tiga lebarnya separuh dari element body.


Property height di CSS

Selain kita bisa menentukan lebar element HTML, dengan CSS kita juga bisa menentukan tinggi dari element HTML dengan property Height.

Contoh property height di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

.satu {
background:cyan;
width:100px;
height:100px;
}

.dua {
background:gray;
width:10em;
height:10em;
}

.tiga {
background:purple;
width:50%;
height:50px;
}
</style>
</head>
<body>

<div class="satu" >element 1</div>
<div class="dua" >element 2</div>
<div class="tiga" >element 3</div>

</body>
</html>


Preview

element 1
element 2
element 3

Admin ZenTutorials di Januari 29, 2019
Label: Bahasa pemrograman, CSS

Tidak ada komentar:

Posting Komentar

#Tanggapi artikel ini dengan berkomentar.
#Dilarang keras, komentar Spam, berbau SARA, PORNOGRAFI, PELECEHAN DAN UJARAN KEBENCIAN.
#Terimakasih di awal bagi yang berkomentar.

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)

Postingan Populer

  • else if di JAVA
    Pengkondisian atau Statement else IF ? Kondisional else IF sering di gunakan ketika ada lebih dari satu kondisi yang perlu di uji. struct...

Halaman

  • Beranda
  • Belajar Bahasa markup HTML
  • Belajar Bahasa pemrograman JavaScript
  • Belajar bahasa pemrograman PHP
  • Belajar bahasa pemrograman JAVA
  • Belajar Style CSS
  • Belajar bahasa pemrograman C++

Label

  • Bahasa pemrograman
  • C++
  • CSS
  • HTML
  • JAVA
  • PHP

tentang saya dan profesi saya

  1. About me
  2. Contact form
  3. Disclaimer
  4. Policy privacy
  5. TOS
Copy right