wiblogger

Modul CSS: Belajar CSS dari NOL bersama wiBlogger.com

Belajar CSS dari nol

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>
p {
   color : red;
}

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: CSS Selektor

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.

Bagikan ke:

Tambahkan komentar untuk:

Modul CSS: Belajar CSS dari NOL bersama wiBlogger.com
Berlangganan Artikel
Kami akan mengirimkan berbagai referensi blogging pilihan langsung ke alamat email anda. Pastikan juga anda melakukan konfirmasi pada email yang bersangkutan untuk mengaktifkan layanan. Panduan bagaimana cara berlangganan artikel bisa anda baca disini.
×
Jangan tampilkan lagi