Konsep Dasar CSS

Assalamualaikum Wr.Wb.
Bertemu lagi dengan saya di Virtual Akademik. Pada kesempatan kali ini saya akan membahas mengenai konsep dasar dari CSS. 
Gambar Konsep Dasar CSS
CSS, atau Cascading Style Sheets, adalah bahasa yang digunakan pengembang web untuk memberi gaya pada konten HTML di halaman web. Jika Anda tertarik untuk memodifikasi warna, jenis font, ukuran font, bayangan, gambar, pemosisian elemen, dan banyak lagi, CSS adalah alat yang tepat.
Meskipun CSS adalah bahasa yang berbeda dari HTML, tapi bisa dimungkinkan  untuk menulis kode CSS secara langsung dalam file HTML. Hal ini dimungkinkan karena element <style>.
Elemen <style> memungkinkan Anda menulis kode CSS antara tag pembuka dan penutupnya. Untuk menggunakan elemen <style>, ia harus ditempatkan di elemen <head>
Contoh 1:
<head>
      <style>

      </styel>
</head>

Contoh 2:
<head>
     <style>
      h1{
      background-color:#FFF;
      }
     </style>
</head>

Meskipun elemen <style> memungkinkan Anda untuk menulis kode CSS dalam file HTML, Campuran HTML dan CSS ini dapat menghasilkan kode yang sulit dibaca dan dipelihara. Sudah umum bagi pengembang untuk menambahkan sejumlah besar gaya CSS khusus ke halaman web. Bila semua kode CSS tersebut ditempatkan di dalam elemen <style> dalam file HTML, Anda berisiko melakukan dua hal berikut:  
  1. Membuat file HTML besar yang sulit dibaca dan dipelihara (oleh Anda dan pengembang lainnya). Secara keseluruhan, ini bisa menghasilkan alur kerja yang tidak efisien.
  2. Mempertahankan perbedaan yang jelas antara struktur halaman web (HTML) dan styling halaman web (CSS).
Untungnya, solusi berikut akan membantu Anda menghindari pembuatan file HTML besar yang digabungkan dalam kode CSS, yaitu menggunakan file CSS. File HTML dimaksudkan hanya berisi kode HTML. Demikian pula, file CSS hanya berisi kode CSS saja. Anda bisa membuat file CSS dengan menggunakan ekstensi nama file .css, seperti: style.css. Dengan file CSS, Anda bisa menulis semua kode CSS yang dibutuhkan untuk menata halaman tanpa harus mengorbankan keterbacaan dan kemampuan pemeliharaan file HTML Anda.

Setelah anda memisahkan file HTML dengan file CSS, file HTML harus tahu persis di mana kode CSS disimpan, jika tidak, styling tidak dapat diterapkan pada halaman web. Untuk menerapkan styling ke halaman web, kita harus menghubungkan file HTML dan file CSS bersama-sama.
Anda dapat menggunakan elemen <link> untuk menautkan file HTML dan CSS secara bersamaan. Elemen <link> harus ditempatkan di dalam kepala file HTML. Ini adalah tag penutup diri dan membutuhkan tiga atribut berikut:
  1. Href - seperti elemen jangkar, nilai atribut ini harus berupa alamat, atau path, ke file CSS.
  2. Tipe - atribut ini menjelaskan jenis dokumen yang Anda tautkan (dalam kasus ini, file CSS). Nilai atribut ini harus diset ke text / css.
  3. Rel - atribut ini menggambarkan hubungan antara file HTML dan file CSS. Karena Anda menghubungkan ke stylesheet, nilainya harus disetel ke stylesheet. 
Saat menautkan file HTML dan file CSS bersama-sama, elemen <link> akan terlihat seperti berikut:
Itulah penjelasan tentang konsep dasar CSS. saya akan melanjutkan konsep dasar CSS ini di artikel selanjutnya, sekaligus dengan beberapa contohnya. Jika dirasa artikel ini bermanfaat untuk anda silahkan klik "Like" dan "Share", agar saya dapat terus mengupdate artikelnya.
Terima Kasih
Wassalamualaikum Wr.Wb.

Share this

Related Posts

Previous
Next Post »