Modul 4 CSS Lanjut

Block Elemen pada dasarnya sudah memiliki baris baru setelah dan sebelum elemennya.

Contoh Elemen: <h1>, <p>, <ul>, <table> 

HTML Inline Elements

Inline Elemen ditampilkan tanpa baris baru pada halaman.

Contoh Elemen: <b>, <td>, <a>, <img> Mengubah Elemen Block/Inline

Sebuah elemen HTML, dapat kita ubah perilakunya dengan menggunakan properti css display.

Contoh:
p { display: inline; }
img { display: block; }

HTML <div>

• Tag <div> merupakan block elemen pada HTML yang biasa digunakan sebagai kontainer / wadah dari sekumpulan elemen-elemen HTML lain di dalamnya.
• Tag <div> jika digunakan hanya pada HTML, tidak akan memiliki fungsi apa-apa. Kecuali, hanya sebagai elemen block yang akan menambahkan baris baru pada elemen di dalamnya
• Jika digunakan bersamaan dengan CSS, Tag <div> dapat berfungsi untuk mengatur style pada sekumpulan elemen HTML yang berada di dalamnya.
• Penggunaan lain untuk Tag <div> adalah sebagai cara untuk mengatur layout pada halaman.

HTML <span>

• Tag <span> merupakan inline elemen pada HTML yang biasa digunakan sebagai kontainer/ wadah dari teks
• Tag <span> tidak menciptakan baris baru pada elemen di dalamnya.

Berfungsi untuk mengatur ukuran (panjang & lebar) sebuah elemen.

Terdiri dari :

• Width
• Height

• Sebuah elemen HTML dapat kita anggap sebagai sebuah box/ kotak.
• Digunakan pada saat kita akan merancang tampilan sebuah website.
• Pada dasarnya berfungsi sebagai tempat yang membungkus isi dari elemen-elemen HTML.
• Tag yang biasanya digunakan untuk merancang tampilan adalah <div>, walaupun tag lain juga bisa menerapkan box model.
• Terdiri atas 4 bagian: Margin, Border, Padding, Content.

Area yang terletak di sekeliling border
Pelajari Property & Value pada CSS Margin disini.

Berikut ini adalah beberapa cara penulisan margin beserta keterangan-nya:

Contoh:

CSS padding properties digunakan untuk menentukan spasi antara border elemen dengan isi element
Pelajari Property & Value pada CSS Padding disini.

Cara penulisan-nya hampir sama dengan penulisan Margin.

Perbedaannya adalah padding tidak bisa diisi nilai negatif.

Contoh:

Digunakan untuk memanipulasi border pada sebuah elemen HTML.
Pelajari Property & Value pada CSS Border disini.

Contoh:

hasilnya seperti ini