Pengenalan Singkat CSS

css gb1

Hello sob,

Pastinya developer web tidak bisa lepas dari CSS (Cascading Style Sheet), dimana CSS ini adalah baris kode yang digunakan untuk mengatur elemen di HTML, dengan tujuan memperkaya dan mempercantik tampilan website atau dengan kata lain CSS tugasnya adalah mengatur bagian presentasi nya.

Sebagai contoh jika sobat ingin mengatur pewarnaan dari Font maka CSS dapat melakukannya. 
Bukankan HTML pun bisa melakukan ini? 
Betul sobat, tapi dengan CSS maka pengaturan ini akan jauh lebih mudah dan kompleks. Serta pengaturan CSS dapat digunakan pada banyak lembar HTML, sehingga tidak diperlukan penulisan ulang per lembar HTML.

Berikut contoh perbedaan pengaturan warna font dengan CSS dan HTML, dimana outputnya sama:

A. HTML


B. CSS



Dan output keduanya adalah sama pada bagian "Makanan yang sangat enak adalah nasi goreng.", berikut hasilnya saat keduanya dijalankan:
css gb2
(gambar pengaturan dengan html)

css gb3
(gambar pengaturan dengan CSS)

Perhatikan pada baris kode berikut di file html yang ditambahkan CSS didalamnya:


<style type="text/css">
.warna{
font-family: Georgia, "Times New Roman", Times, serif;
color: #ff0000;
}
</style>

Baris kode diatas adalah pengaturan CSS nya, dimana selalu berada dalam tag <style type="text/css"> ...</style>. Dan perhatikan pada bagian " .warna" , disini ditentukan bahwa class="warna" mengalami modifikasi di jenis font nya dan warna nya.

Kemudian efek warna dan jenis font tadi dipanggil dengan class="warna" pada elemen <p>, seperti pada baris kode berikut:

<p class="warna">
Makanan yang sangat enak adalah nasi goreng.
</p>


Cara Penulisan CSS pada HTML

  • Internal, contohnya seperti diatas. Dalam halaman yang sama dengan elemen html yang diberi efek.
  • Eksternal, penulisannya dengan membuat file eksternal dengan format .css kemudian dipanggil di dalam file htmlnya. 
contoh buat file lat2.css dan tempatkan di folder yang sama dengan htmlnya , seperti berikut:


kemudian panggil ke filenya dengan baris kode berikut:

<link rel="stylesheet" href="lat2.css" />

dan letakkan di file html diantara tag <head>..... </head>sehingga menjadi seperti berikut:


Selamat Mencoba

Subscribe to receive free email updates:

0 Response to "Pengenalan Singkat CSS "

Post a Comment