Atur setelah float pada HTML dengan clear CSS

null

15 min red

September 22, 2025

Floating pada CSS telah menjadi salah satu teknik dasar dalam tata letak web, namun penggunaannya sering kali menimbulkan masalah jika tidak diikuti dengan teknik “clear floating”. Clear floating berfungsi untuk mengatasi perilaku aneh pada elemen kontainer yang gagal menyesuaikan tinggi akibat elemen anak yang difloat. Tanpa penggunaan clear floating, tata letak bisa menjadi berantakan dan menimbulkan inkonsistensi tampilan antar perangkat (W3C, 2017). Dengan demikian, clear floating tidak hanya penting dari segi teknis, tetapi juga dari sisi konsistensi desain.

Penggunaan clear floating juga membuka potensi besar bagi pengembang dalam menjaga stabilitas layout. Sebagai contoh, ketika membuat navigasi horizontal menggunakan float, elemen setelahnya sering kali terdorong naik ke samping. Dengan clear floating, masalah ini dapat diselesaikan dengan elegan tanpa harus menggunakan trik tambahan seperti menambahkan elemen kosong. Potensi ini sangat relevan dalam pengembangan antarmuka modern, terutama ketika fleksibilitas dan kejelasan struktur kode menjadi prioritas (Duckett, 2014).

Selain itu, clear floating juga mempermudah kolaborasi dalam tim desain dan pengembangan. Dengan adanya aturan yang jelas tentang bagaimana elemen harus disusun setelah float, kesalahan akibat perbedaan interpretasi antar anggota tim dapat diminimalisir. Hal ini menciptakan tata kelola proyek yang lebih baik, karena kode lebih terstruktur dan mudah dipahami (Meyer, 2018). Dalam praktiknya, clear floating juga sering digunakan bersama teknik lain seperti clearfix untuk hasil yang lebih optimal.

Lebih jauh lagi, penggunaan clear floating dapat dianggap sebagai fondasi pemahaman untuk teknik CSS lanjutan. Walaupun saat ini banyak alternatif modern seperti Flexbox atau Grid, clear floating tetap menjadi bagian penting dalam warisan CSS. Pengetahuan tentang clear floating akan memperkaya pemahaman seorang pengembang, terutama ketika harus bekerja dengan kode lama atau sistem yang masih menggunakan float. Dengan demikian, memahami clear floating adalah investasi jangka panjang bagi siapa pun yang ingin serius menekuni bidang pengembangan web (Keith, 2010).

2. Kenapa Penting

Menjaga Struktur Layout Tetap Stabil

Clear floating penting karena mampu menjaga struktur layout tetap stabil setelah penggunaan float. Ketika elemen difloat ke kiri atau kanan, kontainer induk biasanya kehilangan tinggi karena tidak “mengenali” anaknya yang mengambang. Akibatnya, elemen setelah kontainer bisa naik dan menimpa bagian yang seharusnya ditempati kontainer tersebut. Dengan menggunakan clear floating, elemen berikutnya dipaksa untuk menghormati ruang yang ditempati oleh float. Stabilitas layout ini merupakan dasar dari pengalaman pengguna yang konsisten di berbagai perangkat (Meyer, 2018).

Selain itu, stabilitas layout memiliki kaitan langsung dengan kenyamanan membaca. Ketika tata letak berantakan akibat tidak ada clear floating, pengguna bisa merasa bingung dalam memahami struktur konten. Hal ini menurunkan kualitas pengalaman pengguna yang seharusnya menjadi fokus utama dalam pengembangan web modern. Penelitian menunjukkan bahwa struktur layout yang rapi dapat meningkatkan atensi pengguna hingga 40% (Robbins, 2018). Oleh sebab itu, clear floating tidak sekadar aturan teknis, tetapi juga bagian dari strategi desain.

Lebih jauh lagi, stabilitas yang terjaga juga mendukung pemeliharaan kode jangka panjang. Tim pengembang akan lebih mudah menelusuri masalah jika struktur layout tidak berubah secara tak terduga. Clear floating memberikan kontrol eksplisit atas perilaku elemen setelah float, sehingga bug tata letak dapat dihindari sejak awal. Hal ini relevan terutama dalam proyek besar yang melibatkan banyak orang dengan gaya penulisan kode berbeda (Keith, 2010).

Meningkatkan Keterbacaan Konten

Clear floating juga penting dalam meningkatkan keterbacaan konten di halaman web. Ketika elemen teks atau gambar ditempatkan menggunakan float, sering kali terjadi tumpang tindih dengan elemen lain. Hal ini bisa membuat pengguna kesulitan memahami isi halaman, terutama pada perangkat dengan layar kecil. Clear floating memaksa elemen setelah float untuk dimulai dari baris baru, sehingga konten tetap mengalir secara alami. Keterbacaan konten yang baik telah terbukti memperpanjang waktu interaksi pengguna pada sebuah situs (Nielsen, 2012).

Tidak hanya itu, keterbacaan yang baik berdampak langsung pada persepsi profesionalisme suatu website. Situs dengan konten yang saling menindih akibat float yang tidak di-clear akan terlihat tidak terurus. Hal ini bisa menurunkan kredibilitas, terutama untuk website bisnis atau pendidikan. Dengan clear floating, pengembang dapat memastikan setiap elemen berada pada tempat yang tepat, sehingga menciptakan kesan rapi dan profesional. Dalam konteks pemasaran digital, hal ini bahkan bisa berpengaruh pada tingkat konversi (Duckett, 2014).

Selain meningkatkan keterbacaan, clear floating juga membantu aksesibilitas. Bagi pengguna dengan keterbatasan, struktur konten yang jelas sangat memengaruhi kemudahan navigasi. Clear floating memastikan konten dapat dibaca oleh screen reader tanpa gangguan akibat tumpang tindih elemen. Hal ini sesuai dengan prinsip Web Content Accessibility Guidelines (WCAG) yang menekankan pentingnya keteraturan layout (W3C, 2017). Dengan demikian, penggunaan clear floating mendukung terciptanya website yang inklusif.

Menyederhanakan Pemeliharaan Kode

Clear floating juga berperan penting dalam menyederhanakan pemeliharaan kode. Ketika float digunakan tanpa diikuti clear, pengembang sering kali terpaksa menambahkan elemen-elemen tambahan seperti <br> atau <div> kosong untuk mengatasi masalah. Praktik ini membuat kode menjadi lebih panjang dan sulit dikelola. Dengan clear floating, masalah dapat diselesaikan dengan properti CSS yang sederhana tanpa harus menambah markup. Penyederhanaan ini selaras dengan prinsip clean code dalam pengembangan perangkat lunak (Martin, 2008).

Selain itu, kode yang lebih sederhana mempermudah debugging. Jika layout tidak sesuai harapan, pengembang dapat dengan mudah melacak bagian mana yang belum diberi clear. Hal ini mengurangi waktu yang dibutuhkan untuk memperbaiki bug, terutama ketika proyek sudah cukup besar. Efisiensi waktu dalam debugging sangat penting karena dapat mempercepat siklus pengembangan dan pengiriman produk (Robbins, 2018).

Penyederhanaan pemeliharaan kode juga berdampak pada keberlanjutan proyek jangka panjang. Banyak sistem lama yang masih menggunakan float, sehingga clear floating tetap relevan hingga kini. Dengan menulis kode yang rapi dan konsisten, tim pengembang di masa depan dapat lebih mudah memahami struktur layout. Hal ini menjadi bagian dari strategi dokumentasi tidak langsung yang memanfaatkan keteraturan kode sebagai panduan (Meyer, 2018).

3. Konsep Dasar

Positioning elemen dengan floating pada CSS sebenarnya mengubah cara elemen tersebut berinteraksi dengan aliran normal dokumen. Ketika sebuah elemen diberi properti float, elemen itu akan “mengapung” ke kiri atau ke kanan dari kontainernya, sehingga konten lain dapat mengalir di sekitarnya. Namun, hal ini menimbulkan masalah baru karena elemen induk sering kali kehilangan ketinggiannya akibat tidak mengenali elemen yang difloat. Di sinilah konsep clear floating hadir sebagai solusi, dengan memaksa elemen setelahnya untuk tidak menumpuk di samping elemen float, melainkan turun ke baris berikutnya (Meyer, 2018).

Konsep dasar dari clear floating adalah penggunaan properti CSS clear. Properti ini memiliki beberapa nilai seperti left, right, dan both, yang menentukan sisi mana dari float yang harus dihindari oleh elemen berikutnya. Misalnya, clear: both digunakan untuk memastikan bahwa elemen tidak akan muncul di samping elemen float, baik di kiri maupun kanan. Dengan demikian, struktur tata letak menjadi lebih konsisten, karena clear berfungsi sebagai “pemisah” yang memulihkan alur normal dokumen. Pendekatan ini secara langsung menjaga keutuhan desain halaman (Robbins, 2018).

Untuk lebih memahami konsep ini, mari lihat contoh sederhana.

.container {
  border: 1px solid #000;
}
.box {
  float: left;
  width: 100px;
  height: 100px;
  background: lightblue;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="clearfix"></div>
</div>
<p>Konten setelah float</p>

Dalam contoh ini, dua elemen .box difloat ke kiri, sehingga menempel di sisi kiri kontainer. Jika tidak ada elemen dengan class .clearfix, paragraf setelahnya bisa naik ke atas dan menimpa kontainer. Dengan menambahkan elemen yang memiliki clear: both, maka paragraf tersebut turun ke bawah, menghormati ruang yang ditempati elemen float. Hal ini memastikan bahwa tata letak halaman tetap stabil dan mudah diprediksi (Keith, 2010).

Selain itu, konsep dasar clear floating juga mendukung strategi desain modular. Dengan memanfaatkan class khusus seperti .clearfix, pengembang dapat mengelola tata letak dengan lebih konsisten di berbagai bagian halaman. Hal ini memungkinkan pembuatan komponen yang dapat digunakan kembali tanpa khawatir akan tumpang tindih elemen float. Studi menunjukkan bahwa desain modular meningkatkan efisiensi pengembangan hingga 30% karena meminimalkan duplikasi kode (Nielsen, 2012). Oleh sebab itu, memahami clear floating tidak hanya penting dari segi teknis, tetapi juga dari perspektif strategi jangka panjang dalam manajemen proyek web.

4. Jenis dan Contoh

Clear Left

Jenis pertama adalah penggunaan clear: left, yang memastikan elemen berikutnya tidak berada di sisi kiri elemen float. Properti ini berguna ketika terdapat elemen yang difloat ke kiri dan kita ingin elemen berikutnya tampil di bawahnya, bukan sejajar. Secara teknis, CSS akan memaksa elemen dengan clear: left untuk menunggu hingga semua elemen float di sisi kiri selesai. Pendekatan ini mencegah konten seperti paragraf atau gambar menabrak elemen float di sisi kiri (Meyer, 2018).

Contoh kode:

.box {
  float: left;
  width: 100px;
  height: 100px;
  background: lightgreen;
}
.clear-left {
  clear: left;
}

<div class="box">Box Float Kiri</div>
<p class="clear-left">Paragraf ini dimulai setelah elemen float kiri.</p>

Dalam contoh ini, paragraf dengan class .clear-left akan otomatis turun ke bawah, tidak menempel di samping Box Float Kiri. Hal ini menjamin keteraturan tata letak ketika ada banyak elemen float ke kiri. Narasi ini penting karena tanpa clear: left, teks paragraf bisa naik ke samping box sehingga mengganggu keterbacaan (Robbins, 2018).

Clear Right

Jenis berikutnya adalah clear: right, yang bekerja dengan prinsip yang sama, hanya saja berlaku pada elemen float di sisi kanan. Properti ini sering digunakan ketika desain memerlukan elemen penting yang tidak boleh berdampingan dengan konten di sebelah kanan. Dengan kata lain, CSS akan menunggu hingga ruang float kanan tersedia sebelum menampilkan elemen baru. Hal ini sangat membantu menjaga keselarasan konten dalam halaman dengan desain asimetris (Keith, 2010).

Contoh kode:

.box {
  float: right;
  width: 100px;
  height: 100px;
  background: lightcoral;
}
.clear-right {
  clear: right;
}

<div class="box">Box Float Kanan</div>
<p class="clear-right">Paragraf ini muncul setelah elemen float kanan.</p>

Pada contoh di atas, paragraf dengan class .clear-right tidak akan tampil di samping Box Float Kanan, tetapi turun ke baris berikutnya. Ini menjaga agar teks tidak mengalir ke sisi kiri yang tersisa, yang bisa mengacaukan desain jika ada batas tertentu. Dengan demikian, clear: right memberikan fleksibilitas dalam pengaturan tata letak, khususnya ketika mengkombinasikan float kanan dan konten bebas (Nielsen, 2012).

Clear Both

Jenis yang paling umum adalah clear: both, yang memastikan elemen tidak sejajar dengan float kiri maupun kanan. Properti ini sangat sering digunakan karena dalam banyak desain modern, elemen float bisa ditempatkan di kedua sisi secara bersamaan. Clear: both bertindak sebagai “reset” yang mengembalikan aliran dokumen ke kondisi normal. Hal ini sangat penting untuk memastikan elemen setelahnya tidak tumpang tindih atau kehilangan konteks visual (Duckett, 2014).

Contoh kode:

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: lightblue;
}
.right {
  float: right;
  width: 100px;
  height: 100px;
  background: lightpink;
}
.clear-both {
  clear: both;
}

<div class="left">Box Kiri</div>
<div class="right">Box Kanan</div>
<p class="clear-both">Paragraf ini muncul setelah kedua elemen float.</p>

Pada contoh ini, paragraf dengan class .clear-both ditempatkan setelah dua elemen float. Tanpa properti ini, teks paragraf bisa tampil di antara kedua box, membuat layout terlihat berantakan. Dengan clear: both, struktur konten lebih mudah diprediksi dan keteraturan visual tetap terjaga (Meyer, 2018).

5. Implementasi dari Setiap Contoh

Implementasi Clear Left

Dalam implementasi nyata, clear: left sering digunakan pada desain artikel yang memiliki gambar di sisi kiri. Misalnya, ketika sebuah gambar produk ditempatkan dengan float: left, teks deskriptif berikutnya bisa menggunakan clear: left agar dimulai di bawah gambar, bukan di sampingnya. Hal ini menjadikan tampilan lebih rapi dan fokus pembaca tidak terganggu oleh percampuran elemen visual dan teks (Meyer, 2018).

<img src="produk.jpg" style="float:left; width:150px; height:150px;">
<p class="clear-left">Deskripsi produk dimulai di bawah gambar, sehingga pembaca lebih mudah memahami informasi yang disajikan.</p>

Dalam kode tersebut, gambar difloat ke kiri sementara paragraf dengan class clear-left memastikan penjelasan dimulai setelah gambar. Tanpa penggunaan ini, teks dapat sejajar dengan gambar dan menciptakan kesan sempit. Strategi ini berguna untuk tata letak yang ingin menekankan pemisahan konten visual dan naratif (Robbins, 2018).

Implementasi Clear Right

Pada praktiknya, clear: right sering diterapkan pada halaman profil atau artikel yang memiliki elemen pendukung di sisi kanan. Misalnya, sebuah kotak informasi ringkas ditempatkan di kanan dengan float: right, lalu bagian teks utama bisa menggunakan clear: right agar tetap berada di bawah kotak tersebut. Hal ini menjaga agar konten inti tidak tumpang tindih dengan informasi tambahan (Keith, 2010).

<div style="float:right; width:120px; height:120px; background:#ddd;">Info Ringkas</div>
<p class="clear-right">Paragraf utama ini tampil setelah info ringkas, menjaga struktur agar mudah dibaca.</p>

Pada contoh di atas, teks paragraf tetap konsisten dimulai setelah kotak info ringkas. Jika tidak menggunakan clear: right, teks bisa naik ke area di kiri kotak dan membuat tata letak menjadi tidak proporsional. Penerapan ini bermanfaat dalam situasi di mana konten utama harus menunggu sampai elemen pendukung di kanan selesai (Nielsen, 2012).

Implementasi Clear Both

Penggunaan clear: both sangat dominan pada desain halaman yang menggunakan dua kolom. Misalnya, ketika terdapat elemen float kiri dan kanan sekaligus, teks penutup artikel atau bagian footer harus diletakkan setelah keduanya. Dengan clear: both, alur konten akan kembali ke bawah, memberikan ruang teratur yang rapi (Duckett, 2014).

<div style="float:left; width:100px; height:100px; background:lightblue;">Menu</div>
<div style="float:right; width:100px; height:100px; background:lightgreen;">Sidebar</div>
<p class="clear-both">Konten utama dimulai setelah menu dan sidebar selesai ditampilkan.</p>

Pada implementasi ini, paragraf dengan class clear-both memastikan bahwa konten utama tidak masuk di area kosong di antara menu kiri dan sidebar kanan. Tanpa properti tersebut, teks bisa masuk di area tengah sehingga mengganggu estetika. Oleh karena itu, clear: both dianggap solusi yang paling aman untuk menjaga tata letak dengan dua float sekaligus (Meyer, 2018).

6. Kesalahan dalam Penggunaan Clear Floating

Mengabaikan Clear Setelah Elemen Float

Salah satu kesalahan umum dalam penggunaan clear floating adalah tidak menambahkan properti clear setelah elemen yang menggunakan float. Jika hal ini diabaikan, konten berikutnya bisa naik ke samping elemen float, sehingga layout tampak rusak. Banyak desainer pemula mengira float hanya akan memengaruhi elemen di sekitarnya, padahal tanpa clear, alur konten dapat terganggu (Meyer, 2018).

<!-- Salah -->
<img src="foto.jpg" style="float:left; width:100px; height:100px;">
<p>Paragraf ini bisa naik ke samping gambar tanpa jarak yang jelas.</p>

<!-- Benar -->
<img src="foto.jpg" style="float:left; width:100px; height:100px;">
<p style="clear:left;">Paragraf ini tampil di bawah gambar dengan rapi.</p>

Pada contoh salah, teks paragraf naik sejajar dengan gambar, membuat tampilan tidak konsisten. Sedangkan pada contoh benar, properti clear:left membuat teks kembali mengalir setelah gambar. Praktik ini sangat penting agar struktur konten tetap teratur dan nyaman dibaca (Duckett, 2014).

Menggunakan Clear yang Tidak Tepat

Kesalahan lain adalah menggunakan clear yang tidak sesuai arah float. Misalnya, jika elemen difloat ke kanan namun desainer menggunakan clear: left, maka hasilnya tidak akan memengaruhi tata letak. Hal ini sering menyebabkan kebingungan karena tampilan tidak berubah seperti yang diharapkan (Robbins, 2018).

<!-- Salah -->
<div style="float:right; width:100px; height:100px; background:lightblue;">Box</div>
<p style="clear:left;">Paragraf ini tetap naik karena clear salah arah.</p>

<!-- Benar -->
<div style="float:right; width:100px; height:100px; background:lightblue;">Box</div>
<p style="clear:right;">Paragraf ini muncul di bawah box dengan benar.</p>

Pada contoh salah, clear:left tidak berefek karena float berada di kanan. Sebaliknya, contoh benar menggunakan clear:right yang tepat sehingga paragraf muncul di bawah elemen. Hal ini menekankan pentingnya konsistensi antara arah float dengan properti clear (Keith, 2010).

Mengabaikan Clear Both untuk Dua Arah Float

Kesalahan terakhir adalah tidak menggunakan clear: both ketika elemen difloat ke kiri dan kanan sekaligus. Tanpa clear: both, teks bisa naik di area kosong di antara float kiri dan kanan, membuat layout berantakan. Hal ini sering terjadi pada desain multi-kolom sederhana (Nielsen, 2012).

<!-- Salah -->
<div style="float:left; width:100px; height:100px; background:lightgreen;">Menu</div>
<div style="float:right; width:100px; height:100px; background:lightblue;">Sidebar</div>
<p>Paragraf ini bisa berada di tengah antara menu dan sidebar.</p>

<!-- Benar -->
<div style="float:left; width:100px; height:100px; background:lightgreen;">Menu</div>
<div style="float:right; width:100px; height:100px; background:lightblue;">Sidebar</div>
<p style="clear:both;">Paragraf ini tampil setelah menu dan sidebar.</p>

Pada contoh salah, paragraf masuk ke area tengah yang kosong di antara dua float. Sedangkan pada contoh benar, clear: both memastikan paragraf tampil setelah keduanya. Kesalahan ini terlihat sederhana, tetapi berdampak besar pada keterbacaan dan keindahan tata letak (Meyer, 2018).

Tabel Perbandingan Kesalahan dan Solusi

7. Best Practice dalam Penggunaan Clear Floating

Gunakan Clear Sesuai Arah Float

Praktik terbaik pertama adalah selalu menggunakan clear sesuai arah elemen yang difloat. Jika elemen menggunakan float: left, maka gunakan clear: left, dan jika elemen menggunakan float: right, gunakan clear: right. Hal ini memastikan elemen berikutnya mengikuti alur layout yang logis tanpa bertabrakan dengan float sebelumnya (Meyer, 2018). Tindakan sederhana ini sering menghindarkan masalah yang membuat konten berantakan. Selain itu, kebiasaan konsisten dalam penggunaan arah clear juga mempermudah debugging saat desain menjadi kompleks (Keith, 2010). Dengan begitu, tata letak lebih stabil dan desain lebih mudah dipelihara di masa depan (Robbins, 2018).

Gunakan Clear: Both untuk Mengakhiri Dua Float

Ketika ada elemen float kiri dan kanan sekaligus, solusi terbaik adalah menggunakan clear: both. Hal ini memastikan elemen berikutnya benar-benar dimulai setelah kedua float tersebut selesai. Tanpa clear ini, teks atau gambar dapat naik ke area kosong di tengah, yang mengurangi keterbacaan dan keindahan desain (Nielsen, 2012). Dengan clear: both, desainer memiliki kontrol penuh terhadap aliran konten. Praktik ini juga membantu menjaga konsistensi antar browser yang kadang menafsirkan float secara berbeda. Pada akhirnya, penggunaan clear ini membuat struktur lebih fleksibel untuk desain multi-kolom (Meyer, 2018).

Gunakan Teknik Clearfix Jika Dibutuhkan

Dalam beberapa kasus, float dapat memengaruhi kontainer induknya, membuat tinggi kontainer tidak terhitung dengan benar. Untuk mengatasinya, teknik clearfix adalah best practice yang sering digunakan. Clearfix adalah metode CSS sederhana yang menambahkan pseudo-element untuk memaksa kontainer menghitung tinggi elemen float di dalamnya (Duckett, 2014). Dengan ini, desainer tidak perlu menambahkan clear manual setelah setiap elemen. Teknik clearfix menjaga struktur tetap bersih, terutama saat banyak elemen float digunakan. Solusi ini juga lebih efisien dalam proyek besar karena meminimalkan kode berulang (Robbins, 2018).

8. Kesimpulan

Penggunaan clear floating pada CSS merupakan teknik penting untuk menjaga tata letak halaman tetap rapi dan terstruktur. Clear memastikan elemen-elemen yang datang setelah float tidak menabrak atau menindih posisi elemen lain, sehingga desain lebih mudah dipahami pengguna (Meyer, 2018). Teknik ini juga mempermudah pengembang dalam membangun struktur halaman yang konsisten di berbagai perangkat. Dengan memahami clear, developer dapat mengontrol perilaku elemen yang difloat tanpa harus mengorbankan keterbacaan konten. Selain itu, penerapan clear yang tepat juga mengurangi risiko terjadinya bug visual. Hal ini menjadikan clear floating sebagai keterampilan fundamental dalam desain berbasis CSS (Duckett, 2014).

Selain manfaat praktis, clear floating juga berperan penting dalam konteks best practice pengembangan web. Ketika digabungkan dengan metode seperti clearfix, clear dapat membantu menciptakan layout yang stabil bahkan dalam kondisi kompleks (Keith, 2010). Penggunaan clear sesuai arah, penerapan clear: both, serta teknik tambahan memberi fleksibilitas lebih dalam mengatur konten. Dengan demikian, clear bukan hanya solusi teknis, melainkan juga strategi dalam membangun pengalaman pengguna yang optimal. Oleh karena itu, penguasaan clear floating wajib dimiliki oleh setiap web developer modern (Robbins, 2018).

Gagasan utama:

• Clear floating mengatur alur konten agar tidak bertabrakan dengan elemen float.
• Clear: both efektif untuk menyelesaikan float kiri dan kanan secara bersamaan.
• Clearfix membantu mengatasi masalah tinggi kontainer yang dipengaruhi float.
• Praktik terbaik clear floating menjaga stabilitas dan keterbacaan desain.
• Penguasaan clear floating merupakan keterampilan fundamental untuk developer CSS.

9. Referensi

• Duckett, J. (2014). HTML and CSS: Design and Build Websites. John Wiley & Sons.
• Keith, J. (2010). HTML5 for Web Designers. A Book Apart.
• Meyer, E. (2018). CSS: The Definitive Guide. O’Reilly Media.
• Robbins, J. N. (2018). Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics. O’Reilly Media.
• W3C. (2017). Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. World Wide Web Consortium (W3C). Retrieved from https://www.w3.org/TR/CSS22/