CASCADING STYLE SHEET (CSS) DASAR : PENDAHULUAN

CSS merupakan kepanjangan dari Cascade Style Sheet. Dengan CSS kita bisa memberikan style seperti warna, ukuran, posisi ke dalam elemen-elemen HTML yang pernah kita buat. Menurut www.w3.org/style/CSS CSS adalah mekanisme sederhana yang mengatur gaya/style pada halaman web.

Cascading Style Sheet :

  • Aturan yang digunakan untuk menampilkan elemen/tag HTML.
  • Dibuat terpisah dengan HTML.
  • Bertujuan untuk memisahkan konten dan style.
  • Satu CSS dapat digunakan untuk banyak halaman HTML.
  • Satu halaman HTML dapat terlihat berbeda jika menggunakan CSS yang berbeda pula.
Anatomy CSS

Anatomy CSS : selector { property : value ; }

Selector adalah sebuah bagian dari CSS yang digunakan untuk memilih memanipulasi elemen spesifik pada HTML. Elemen HTML dipilih berdasarkan tag, id, class bahkan pola/pattern. Semakin komplek struktur HTML, selector juga semakin kompleks/spesifik.

Property kurang lebih mempunyai 350 lebih jenis property. Anda bisa kunjungi dan pelajari https://developer.mozilla.org/en-US/docs/Web/CSS/Reference atau https://css.tricks.com/almanac

Contoh : h1 { color : blue ; }, artinya Anda ingin membuat seluruh tulisan yang ada di dalam halaman h1, berubah warnanya menjadi biru.

Contoh jika propertynya lebih dari satu :

h1 {

     font-family: “Courier New”;

     text-align: center;

     font-size: 30px;

     color: blue;

}

Penempatan CSS
  1. Embed : <style><style>, kita bisa simpan di dalam file yang sama. Kemudian kita simpan di bagian head HTML dengan menggunakan tag <style>
  2. Inline : <p style=”color: light blue;”>…</p>, kita bisa simpan di dalam file yang sama, tapi kita gunakan attribute dari HTML yang namanya style.
  3. Eksternal : <link rel=”stylesheet” href=”style.css”>, kita buat file HTML dan CSS secara terpisah. Kemudian kita hubungkan anatara HTML dan CSS menggunakan tag <link rel>

 

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *