Langsung ke konten utama

Pengenalan Dasar CSS

Pengenalan Dasar CSS

Css merupakan bahasa kedua setelah HTML yang harus dipahami oleh developer. Karena CSS sangat penting untuk web developer.

Apa itu CSS?

CSS adalah singkatan dari "Cascading Style Sheet". Sesuai namanya css mempunyai fungsi sebagai style sheet language yang berarti bahasa pemograman untuk web design. Dengan kata lain, CSS merupakan sebuah bahasa untuk mengatur tampilan web sehingga terlihat menarik dan indah. Dengan css kita dapat mengatur layout(tata letak), warna, font, garis, dll.

Variasi atau Versi CSS

CSS pertama kali dikenalkan oleh Hakon Wium Lie. Sejak awal pengenalan CSS memiliki beberapa versi:

  1. CSS1 : adalah versi pertama (17 Desember 1996)
  2. CSS2 : adalah versi kedua ( Mei 1998)
  3. CSS2.1 : ( 7 Juni 2011)
  4. CSS3 : (2012)
  5. CSS4 
Versi-versi tersebut telah banyak perbedaan dan pengurangan.

Struktur Code atau Sintaks Dasar CSS

Struktur code css terdiri dari 3 bagian, yaitu:
  1. Selektor 
  2. Blog Deklarasi
  3. Properti dan nilainya
Selektor : merupakan kata kunci untuk memilih elemen HTML yang akan kita atur. 
Contoh:

Artinya: Kita memilih semua elemen <h1>, lalu diberikan text red (merah). Selektor dapat berupa tag, class, id, dan, atributt.
Contoh:

Blog Deklarasi : merupakan tempat kita menuliskan atribut-atribut CSS yang akan diberikan kepada selektor.
Contoh:

Artinya: kita telah mengatur ukuran font pada tag <p> sebesar 20px. Blog deklarasi diawali dengan tanda { dan diakhiri }.

Properti dan nilainya : merupakan sekumpulan aturan yang akan diberikan kepada elemen yang akan dipilih. Setiap properti harus diakhiri dengan titik koma (;). Apabila hanya terdapat satu properti, boleh tidak menggunakan titik koma. Properti harus ditulis didalam blog deklarasi.
Contoh:


Cara Penulisan Kode CSS dalam HTML:

Dalam penulisan css dapat dilakukan dengan tiga cara, yaitu:
  1. Internal
  2. External
  3. Inline
-. Internal CSS adalah kode yang ditulis didalam tag <style>. Tag <style> biasanya ditulis didalam tag <head>. Bisa juga ditulis didalam body, namun banyak yang menulis didalam head.
Contoh:

-. External CSS adalah kode yang ditulis terpisah oleh HTML. External CSS ditulis disebuah file khusus yang berekstensi .css . 
Contoh:
File css yang saya beri nama style.css :

Lalu kita perlu mengimport file tersebut menggunakan tag link: 

Penulisan pada html lengkapnya sbb:

-. Inline CSS adalah kode yang ditulis langsung pada atribut elemen html. Setiap atribut memiliki elemen style, disanalah inline css ditulis. 
Contoh:


Berikut adalah pengenalan CSS dasar.

Referensi :

Komentar

Postingan populer dari blog ini

Cara Menyisipkan Media (Video, Audio, dan Gambar) dengan HTML

Cara Menyisipkan Media (Video, Audio, dan Gambar) Pada sebuah halaman web, pasti ada video, audio dan juga gambar bukan?.  Mengapa demikian? karena video dapat membuat sebuah blog menjadi semakin menarik. Video juga dapat memperbanyak pengunjung sehingga blog kita semakin berkembang. Apalagi jika blog itu sendiri dilengkapi dengan gambar ataupun audio yang baik. Secara otomatis pengunjung akan tertarik bahkan penasaran dengan blog kita sendiri sehingga mereka akan terus-menerus melihat atau mengupdate isi dari blog kita. Namun, lebih baik memposting video, gambar, atau audia yang bermanfaat bagi semua orang. Oleh karena itu, ada cara tersendiri untuk memasukkan gambar, audio, ataupun video itu. Disini saya akan memposting cara memasukan video, gambar, dan audio dalam HTML. Dalam proses ini kita akan  menggunakan Sublime. Menyisipkan Gambar: Gunakan <img src=””> dalam memanggil media gambar, misalnya seperti ini: https://snag.gy/yT0mOb.jpg merupakan s...