Belajar CSS bagaimana menentukan ukuran lebar dan tinggi elemen

Karena ini jelas keterkaitannya dengan pembuatan, pengeditan dan kustomisasi template blogger, maka saya ingin membuat ruang pelajaran CSS. Terlebih dahulu saya ingin kembali menjelaskan apa itu CSS. 

1. CSS adalah bahasa yang kita gunakan untuk mendesain dokumen HTML.
2. CSS inilah yang membentuk tampilan bagaimana elemen HTML harus akan terlihat di halaman yang di buka oleh pembaca, pengunjung atau pengguna.

Jadi jelas HTML tanpa CSS akan tampak sangat membosankan: Tidak ada bentuk lurus, lengkung, bundar. Tidak ada warna merah, kuning, hijau, jingga, indigo hingga pelangi yang berwarna warni. Tanpa CSS semua halaman web yang dimiliki oleh semua orang akan tampak sama, monoton dan ugly. Tidak ada gerakan animasi yang berpendar pendar.

Dan tidak seperti HTML, walaupun ia adalah inti dari WEB, HTML bukanlah murni bahasa pemrograman, HTML hanyalah bahasa markup, sedangkan CSS bersama Javascript yang juga sering kita pergunakan di dalam membuat atau mengedit template  adalah bahasa front end, bahasanya para desainer WEB! Ops saya terlalu bersemangat ya...

CSS untuk membentuk elemen template 

Baik mari kita mulai. Tapi mengapa ini penting saya ajukan sebagai artikel pada blog ini adalah karena blog ini dinamakan 'editblogtema' artinya ia berada pada koridor bahasa bahasa itu. Dan ketika membuat, mengedit atau mengkustomisasi sebuah template mau tidak mau kita harus menggunakannya.

Misalnya ketika kita ingin menentukan tinggi, lebar sebuah elemen berupa kolom bagaimanakah kita menentukan ukuran yang tepat?

Misalnya CSS memiliki properti yang dinamakan width dan height:

<style>

div {

  height: 50px;

  width: 50%;

  background-color: pink;

}

</style>

<div>elemen div ini memiliki tinggi 200px dan lebarnya 50%.</div>

Ketika di tampilkan secara visual:

See the Pen CSS height and width for elements by Sufyan Yaan (@sufyan-yaan) on CodePen.

Ada banyak cara dalam mendeklarasikan tinggi dan lebar dengan efek yang berbeda menggunakan CSS, contoh:

height:115px;

width:115px

Itu adalah ukuran yang sempurna untuk bujur sangkar, bukan? Akan tetapi kita dapat menggunakan penulisan berikut untuk kondisi template tertentu, misalnya menyesuaikannya agar elemen ikut responsif:

height:115px;

width:auto

Ya itu dia: AUTO, CSS menggunakan sintaks ini (bahasa manusia yakni bahasa inggris) tidak terbatas hanya itu ia juga menggunakan beberapa cara untuk menentukan warna dengan cara yang sama, contohnya:

color: #000; (hitam), dapat di tulis langsung sebagai berikut: color: black;

Kembali ke ukuran tinggi dan lebar, bagaimana sih menentukan ukuran yang benar? Saya hanya akan memberikan contoh pada menu footer yang kami buat di bawah halaman template blog ini:

See the Pen height and weight elemen with css (2) by Sufyan Yaan (@sufyan-yaan) on CodePen.

Perhatikan pengaturan CSSnya:

.navbar { overflow: hidden; 

background-color: #CCCCFF; 

position: relative; 

bottom: 0; 

width:50%; 

Karena saya mematok Width: 50%; maka lebar navigasi tersebut hanyalah 50% dari lebar halaman. Dan karena halaman bersifat responsif, 50% itu berlaku untuk:

Halaman desktop (misalnya 50% dari lebar 1400px;)

Halaman mobile/hape (misalnya 50% dari lebar 450px;)

Begitu sederhana, bukan? Kita dapat bereksprimen ketika menentukan dan bermain ukuran menggunakan CSS.

Oke, next kita akan membahas: perbedaan margin, padding hingga trik membuat flex dalam bahasa CSS!

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: