tutorial css

Berkenalan Dengan CSS (Cascading Style Sheets)

Berkenalan Dengan CSS (Cascading Style Sheets) – CSS merupakan bahasa kedua yang wajib dikuasi oleh web developer setelah HTML.

Pada artikel kali ini kita akan lebih mengenal apa itu css, cara penulisan, property, dan lain sebagainya.

Berikut beberapa hal yang kan kita pelajari dalam artikel berkenalan dengan CSS (Cascading Style Sheets).

  1. Pengertian CSS
  2. Fungsi CSS
  3. Cara Penulisan CSS
  4. Syntax CSS
  5. Contoh Penggunaan CSS

 

 

Pengertian CSS

Cascading Style Sheets atau lebih dikenal sebagai css adalah bahasa yang digunakan untuk memberikan efek tampilan terhadap sebuah halaman website.

Dikutip dari situs w3.org, css adalah bahasa yang digunakan untuk menggambarkan penyajian atau tampilan halaman Web, termasuk warna, tata letak, dan font. Ini memungkinkan seseorang untuk menyesuaikan tampilan ke berbagai jenis perangkat, seperti layar besar (desktop), layar sedang (tablet), layar kecil (mobile), atau printer.

CSS tidak bergantung pada html dan dapat digunakan dengan bahasa markup berbasis xml apa pun. Pemisahan css dari html membuatnya lebih mudah untuk mempertahankan tampilan situs, berbagi lembar gaya di seluruh halaman, dan menyesuaikan halaman ke berbagai kondisi layar. Ini disebut sebagai pemisahan struktur (konten) dari presentasi.

 

Fungsi CSS

CSS (Cascading Style Sheets) berfungsi untuk memanipulasi atau mempercantik tampilan dari sebuah halaman web.

HTML tanpa css akan terlihat sederhana bahkan sangat sederhanya. Maka dari itu dibutuhkan css untuk mempercantik halaman web yang sudah dibuat dengan html. Istilah kerennya html for content, and css for presentation.

Perhatikan contoh halaman web berikut:

dengan-tanpa-css

 

Gambar 1 ( disebelah kiri ) merupakan tampilan dari halaman depan situs ngodeinweb yang lengkap dengan pengaturan css, sehingga terlihat rapi dan lebih menarik.

Sedangkan gambar 2 ( disebelah kanan ) merupakan tampilan dari halaman depan situs ngodeinweb tanpa menggunakan css.

 

Penulisan CSS

Cara penulisan css yang pertama adalah penulisan secara inline. Cara ini menempatkan langsung kode css pada tag html.

Contoh :

 

Kemudian penulisan css yang kedua adalah secara embed ( Internal ). Jika penulisan css secara inline yaitu langsung pada tag html, maka untuk menulis kode secara embed kode css ditempatkan pada bagian head html yaitu diantara tag <head> . . .  </head>.

Namun perlu diperhatikan bahwa penulisan css secara embed memerlukan tag tambahan, yaitu tag <style> . . </style> dan semua kode css berada diantara tag tersebut.

Contoh :

 

Cara penulisan css yang ke tiga yaitu secara eksternal, yaitu dengan cara memisahkan kode css dengan html. Kode css ditulis pada file dengan ekstensi dot css ( .css ).

Misalnya saya memiliki sebuah file html dengan nama index ( index.html ) dan kode css dengan nama file style ( style.css ). Nah file ini ( index.html ) nantinya akan saya link-kan dengan file style.css. Saya akan membahasnya pada tutorial selanjutnya.

 

Syntax CSS

Secara garis besar, syntax css tidak terlalu rumit. Yaitu terdiri dari selector, property, dan value dari property. Berikut ilustrasi syntax css yang dikutip dari w3school.

Berkenalan Dengan CSS (Cascading Style Sheets)

Contoh :

Contoh Penggunaan CSS

Saya akan mencontohkan penggunaan css yang sederhana, yaitu merubah warna text. Saya memiliki sebuah text di dalam tag heading h2 yaitu ‘Mudah Belajar CSS’. Text tersebut memiliki warna default hitam, kemudian saya akan mencoba merubahnya menjadi warna merah. Saya akan menggunakan penulisan css secara internal.

See the Pen on CodePen.

 

Sekian untuk berkenalan dengan CSS (Cascading Style Sheets) kali ini, lanjut ke tutorial cara penulisan kode css.

Leave a Reply

Your email address will not be published. Required fields are marked *