Pada halaman
Belajar HTML yang telah diterbitkan sebelumnya, kita telah belajar berbagai hal dasar terkait HTML. Hal ini seperti bagaimana cara membuat dokumen HTML sederhana, bentuk / struktur minimum dokumen HTML dan lain sebagainya. Pada halaman ini, kita akan belajar bagaimana menerapkan CSS untuk mengatur elemen-elemen HTML.
Persyaratan awal
Sintak / Format penulisan CSS
Sintak penulisan CSS
selektor {
properti1 : value;
properti2 : value;
propertiN : value;
}
selektor2 {
properti1 : value;
properti2 : value;
propertiN : value;
}
selektorN {
properti1 : value;
properti2 : value;
propertiN : value;
}
Keterangan
- Selektor
Elemen yang hendak diatur.
-
Properti
Hal apa yang hendak diatur terkait elemen (selektor) yang bersangkutan. Beberapa contoh properti yang tersedia adalah seperti width (lebar), height (tinggi), background (latar belakang), color (warna) dan masih banyak lagi.
-
Value
Nilai atau ketentuan yang diberikan untuk properti yang bersangkutan.
-
Blok kode
{...} merupakan Blok kode, semua konfigurasi didefinisikan didalam blok kode.
Contoh 1
Mengatur warna text pada semua elemen
p.
<p>Element p1</p>
<p>Element p2</p>
<div>Element div 1</div>
<div>Element div 2</div>
Elemen p1
Elemen p2
Elemen div 1
Elemen div 2
Pada kode CSS diatas, hanya terdapat 1 properti yaitu
color, jika hendak menambahkan properti lainnya, tambahkan properti selanjutnya didalam blok kode.
<p>Element p1</p>
<p>Element p2</p>
<div>Element div 1</div>
<div>Element div 2</div>
p {
color : white;
background : blue;
margin-bottom : 10px;
padding : 10px;
}
Elemen p1
Elemen p2
Elemen div 1
Elemen div 2
Kode diatas hanya mengatur elemen
p, tambahkan konfigurasi selanjutnya (selektor dan blok kode baru) jika hendak membuat konfigurasi untuk elemen-elemen lainnya.
<p>Element p1</p>
<p>Element p2</p>
<div>Element div 1</div>
<div>Element div 2</div>
p {
color : white;
background : blue;
margin-bottom : 10px;
padding : 10px;
}
div {
border : 1px solid black;
margin-bottom : 10px;
padding : 10px;
}
Elemen p1
Elemen p2
Elemen div 1
Elemen div 2
Sampai pada paragraf ini, anda sudah paham tentang bagaimana cara membuat konfigurasi CSS. Adapun lebih jauh tentang selektor dan properti akan kita bahas nanti. Untuk sekarang, kita akan fokus pada berbagai hal dasar.
Cara menerapkan CSS
Terdapat 3 metode yang bisa digunakan untuk menerapkan CSS, 3 metode ini adalah
Internal,
Eksternal dan
Inline.
Metode Internal
Penerapan CSS dengan metode Internal dilakukan dengan cara meletakkan kode CSS kedalam elemen
style dan menempatkannya di bagian
head.
CSS didalam elemen style
<style>
Kode CSS disini.....
</style>
Berikut adalah contoh penerapan CSS dengan metode Internal pada dokumen HTML.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<style>
h1 {
color : white;
text-align : center;
background : blue;
font-size : 30px;
}
div {
border : 1px solid #e0e0e0;
padding : 20px;
}
</style>
</head>
<body>
<h1>Belajar HTML</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam congue pellentesque viverra. Etiam aliquam nec
urna at rhoncus. Fusce non mattis velit.
Nullam dui elit, efficitur sed porta ut,
aliquet at erat
</div>
</body>
</html>
Belajar HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue pellentesque viverra. Etiam aliquam nec urna at rhoncus. Fusce non mattis velit. Nullam dui elit, efficitur sed porta ut, aliquet at erat
Metode Eksternal
Pada metode eksternal, kode CSS dibuat menjadi sebuah file (dengan format .css). URL file ini nantinya akan di-link dengan menggunakan elemen HTML
link yang ditempatkan di bagian
head.
CSS dengan elemen link
<link rel="stylesheet" href="URL file CSS..."></link>
Adapun proses linking dilakukan kurang lebih seperti berikut:
CSS Eksternal
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<link rel="stylesheet" href="http://example.com/file/maincss.css"></link>
</head>
<body>
<h1>Belajar HTML</h1>
</body>
</html>
Metode Inline
Pada metode inline, konfigurasi CSS langsung ditempatkan pada elemen yang bersangkutan melalui atribut
style.
Pada metode ini.
selektor dan
Blok kode tidak dibuat.
Inline CSS
<elemen style="properti1:value;properti2:value;propertiN:value;">
Content
</elemen>
Berikut adalah contoh penerapan inline CSS pada elemen
div
<div style="color:blue;text-align:center;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam congue pellentesque viverra. Etiam aliquam nec
urna at rhoncus. Fusce non mattis velit.
Nullam dui elit, efficitur sed porta ut,
aliquet at erat
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue pellentesque viverra. Etiam aliquam nec urna at rhoncus. Fusce non mattis velit. Nullam dui elit, efficitur sed porta ut, aliquet at erat
Sampai pada paragraf ini, anda sudah mengerti tentang bagaimana cara mengatur tampilan elemen-elemen HTML menggunakan CSS. Selanjutnya, kita akan membahas mengenai kelebihan dan kekurangan dari masing-masing metode diatas.
Kelebihan dan kekurangan metode Eksternal
Kelebihan
- Ukuran file HTML yang lebih kecil
Karena file CSS dibuat terpisah, ukuran kode HTML menjadi lebih kecil dan secara bersamaan membuat kode HTML menjadi lebih rapih dan terorganisir.
Kekurangan
- Membutuhkan proses load file CSS
Karena file CSS diletakkan terpisah dari HTML, browser memerlukan waktu untuk meload file CSS sebelum dapat merender HTML dengan benar. Terlebih lagi jika ada banyak file CSS eksternal yang diload, ini jelas akan membuat proses load halaman menjadi lama.
Pada prakteknya, banyak pemilik situs yang membuat konfigurasi terpisah untuk setiap bagian-bagian utama, hal ini seperti misalnya membuat konfigurasi khusus (file khusus) untuk bagian header (header.css), bagian sidebar (sidebar.css), bagian footer (footer.css) dan lain sebagainya. Konfigurasi yang dibuat terpisah ini dibuat untuk kemudahan proses
Debugging (Proses perbaikan atau penyesuaian dikemudian hari). Namun, karena konfigurasi ini dibuat terpisah, proses load file pada halaman jelas akan bertambah, kita perlu meload semua aset ini secara terpisah. Semakin banyak aset yang perlu diload, semakin lama pula waktu load yang dibutuhkan.
Load BEBERAPA CSS Eksternal
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<link rel="stylesheet" href="https://example.com/file/header.css"></link>
<link rel="stylesheet" href="https://example.com/file/sidebar.css"></link>
<link rel="stylesheet" href="https://example.com/file/footer.css"></link>
</head>
<body>
<!-- body -->
</body>
</html>
Untuk kasus seperti diatas, proses load akan sangat terasa jika itu adalah kunjungan pertama, untuk kunjungan-kunjungan selanjutnya (misal saat pengguna merefresh halaman atau membuka halaman lain yang masih menggunakan file-file css yang bersangkutan), waktu load akan lebih cepat, hal ini karena browser akan men-cache konfigurasi CSS yang bersangkutan.
Kelebihan dan kekurangan metode Internal
Keunggulan
-
Proses load halaman yang cepat
Dibandingkan dengan metode eksternal, penerapan internal memiliki keunggulan dari sisi kecepatan load halaman. Pada metode internal, karena CSS langsung ditempatkan pada dokumen HTML, browser tidak perlu meload file CSS terlebih dahulu, hal ini membuat load halaman lebih cepat dibandingkan dengan metode eksternal.
Kekurangan
- Ukuran file HTML yang besar
Sebuah situs umumnya memiliki konfigurasi CSS yang sangat banyak. Penerapan metode internal umumnya akan menempatkan semua konfigurasi pada satu tempat (hanya menggunakan satu elemen style dan menempatkan semua kode CSS didalamnya). Hal ini tentunya membuat kode HTML menjadi sangat panjang. Ukuran file HTML juga jelas akan lebih besar dibandingkan dengan metode eksternal sebelumnya.
- Proses debugging yang lebih sulit
Karena semua konfigurasi CSS ditempatkan pada satu tempat, hal ini akan membuat proses debugging menjadi lebih sulit. Pengembang mungkin memerlukan waktu lebih lama untuk menuju / menemukan bagian-bagian dalam CSS yang akan disesuaikan / diperbaiki.
- Browser tidak men-cache konfigurasi
Dengan menempatkan CSS langsung pada HTML, browser tidak dapat men-cache konfigurasi. Dengan kata lain, browser perlu membaca dan merender konfigurasi setiap kali halaman dimuat.
Kelebihan dan kekurangan motode Inline
Metode inline merupakan metode yang jarang sekali digunakan untuk mengatur konfiguasi utama. Ini lebih diperuntukkan untuk kebutuhan-kebutuhan kecil. Hal ini seperti misalnya mengatur warna text elemen tertentu pada postingan blog.
Kelebihan
- Load yang cepat seperti halnya metode Internal
Kekurangan
-
Ada banyak fitur CSS yang tidak dapat digunakan melalui metode inline, hal ini seperti selektor, pseudo, dan lain sebagainya.
-
Konfigurasi CSS hanya dapat digunakan oleh elemen yang bersangkutan. Hal ini tidak seperti pada metode internal dan eksternal yang dapat membuat konfigurasi untuk beberapa elemen sekaligus (dengan selektor).
Pada prakteknya, css inline hanya digunakan untuk kebutuhan instan. Hal ini seperti misalnya mengatur warna text elemen tertentu pada postingan, mengatur rataan text dan beberapa lagi lainnya. Untuk konfigurasi utama, metode yang digunakan adalah internal atau eksternal.
Perbandingan proses load pada metode Eksternal dan Internal
Anda mungkin akan bertanya tentang mana yang lebih optimal antara metode eksternal dan internal jika dilihat dari kecepatan loading halaman. Berdasarkan pengamatan pribadi, walaupun browser tidak men-cache konfigurasi internal, proses load konfigurasi internal lebih cepat dibandingkan konfigurasi eksternal. Terlebih untuk situs-situs berskala kecil seperti situs pribadi atau blog seperti blog wiBlogger ini.
Next:
Prioritas CSS: Bagaimana browser memilih mana konfigurasi yang akan digunakan - (Belum tersedia)
Kami akan mengupdate ketersediaan materi secara bertahap, Anda bisa berlangganan artikel kami melalui formulir
Email Subscription yang terdapat di bagian bawah blog ini untuk mendapatkan update materi-materi yang akan kami terbitkan selanjutnya.
