Berkenalan dengan CSS (Cascading Style Sheet) si pasangan HTML

0
377
  1. Penjelasan CSS (Casscading Style Sheet)

Css merupakan singkatan dari Cascading style sheet. Css digunakan untuk membuat tampilan dari sebuah website menjadi lebih indah dan enak untuk dilihat. Jadi si pengguna dari website yang dibuat akan lebih nyaman untuk menggunakan website tersebut. Css selalu dikaitkan dengan HTML. Karena dalam membuat sebuah website HTML berfungsi untuk membuat struktur dari website tersebut dan CSS berperan untuk mengubah struktur website yang membosankan tadi menjadi tampilan yang lebih menarik, contohnya kita bisa memberi warna, mengatur jarak antar konten, dan lain-lain. Hal ini sesuai dengan pengertian css  dari wikipedia yaitu:

“ Cascading Style Sheet (CSS) is a style sheet language used for describing the look and formating of document written in a markup language”

Tentunya css bukan hanya digunkan untuk HTML saja, namun css juga bisa digunkan untuk bahasa-bahasa markup lainnya, seperti SVG (Scalable Vector Graphics) dan XML (Extensible Markup Language). CSS memiliki kata Cascading atau Cascade yang berarti Mengalir kebawah, atau bisa dimakanakan sesutau yang mengalir dari atas kebawah. Karena css akan mengksekusi code dari atas kebawah, jadi jika ada penulisan selektor yang sama pada satu file css di baris yang berbeda, maka css  akan menampilkan hasil perintah yang terakhir dieksekusi. Misalnya dalam kumpulan kode css baris pertama tedapat perintah untuk mengubah <h1> menjadi warna hitam dan dibaris kelima ada perintah yang sama yaitu mengubah warna <h1> menjadi warna putih. Maka yang akan ditampilkan adalah text heading 1 (<h1>) menjadi warna putih. Selain itu cascading juga memiliki aturan untuk memilih style atau perintah mana yang harus diprioritaskan. Berikut urutan aturannya dari yang paling diprioritaskan:

  • User style
  • Inline Style
  • Embedded style dan External Style
  • Web browser style

 

  1. Aturan Dalam Penulisan Css

Dalam penulisan css teridiri dari 4 element, yaitu Selector, Declaration, Properti dan Values. Contoh dari implementasi 4 elemen diatas adalah seperti ini:

Lalu manakah yang menjadi selektor, declaration, properti dan values nya? Berikut penjelasannya.

  • “p” sebagai selector, fungsinya untuk mencari bagian dari kode html yang akan di style.
  • Lalu yang termasuk di bagian declaration adalah kode yang ada diantar kurung pembuka dan penutup yang berisi beberpa properti dan value.
  • “font-size” dan “color” adalah contoh dari properti, di css terdapat banyak sekali property.
  • “red” dan “15px” adalah merupakan sebuah value.

Lalu maksud dari kode css diatas adalah akan mencari paragraf lalu mengubah warna nya menajdi merah dan ukuran text dirubah menjadi 15px.

Cara penulisan Kode CSS ada 3 cara, yaitu Inline style, Internal Style, dan Exsternal Style.

a. Inline Style

Dengan metode penulisan ini , kita langsung menuliskan kode css langsung di kode HTML yang di tuliskan dalam attribut HTML yaitu attribut style. Contohnya:

Bila ingin mendeklarasikan lebih dari satu property dan value tinggal kita pisahkan dengan semikolom (;). Contohnya:

b. Internal Style

Pada metode yang ini, kita menuliskan seluruh kode css didalam tag <head> dan dibungkus dengan tag <style>. Contohnya:

Dengan metode ini kita lebih mudah untuk mengedit kode css kita, jadi kita juga lebih mudah untuk mendesain website kita.

c. External Style

Dengan metode ini kita menulis kode css di file yang berbeda. Jadi kita membuat sebuah file yang formatnya adalah .css yang isi didalamnya semaunya adalah kode css. Lalu bagaimana cara kita menghubungkan dengan file yang ingin menggunkan kode css tersebut. Cara menghubungkannya ada 2 cara yaitu dengan tag <link> dan Perintah @import. Namun pada kali ini kita akan membahas cara yang pertama yaitu dengan tag <link>. Contohnya:

Pertama-tama kita akan buat sebuah file dengan nama contohnya style.css yang isi nya adalah:

Lalu tugas kita selanjutnya menghubungkan file css tersebut ke file yang ingin menggunakan kode cssnya. Contohnya:

Pada attribut href isikan dangan tujuan ke file css kita. Bila file css nya didalam sebuah folder maka tulis juga alamat folder tersebut, contohnya:

Dengan metode eksternal style ini tentu kode kita akan lebih bersih dan rapi, jadi ketika suatu saat kita ingin memperbaiki tampilan website kita juga akan menjadi lebih mudah.

Mungkin sampai disini dulu perkenalan kita dengan Css, semoga bisa bermanfaat buat saya dan temen-temen semua, sampai jumpa di kelanjutan blog selanjutnya. Salam Koding!!!

 

 

 

 

 

 

 

 

 

 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.