Hallo gaes berjumpa Kembali dengan saya ferry coder disini kita akan belajar css pemula setelah belajar html. Jadi buat kalian yang belum belajar html dipelajari dulu ya. Sebelumnya kita akan berkenalan dulu dengan CSS ini. CSS adalah bahasa Demi tampilan setelah html, dimana kedua duo ini Kagak Bisa kita pisahkan dalam pembuatan tampilan website. Apabila html Demi tag suatu konten maka css ini berfungsi Demi mempercantik tampilan html yang sudah kita susun tadi. Bayangkan Apabila website tanpa css bagaikan rumah tanpa cat Corak dan bentuk. Gambaranya seperti ini gaes, disini saya mengambil Surat keterangan dari web dunia coding itu sendiri ya.
Teladan di atas dalah Apabila website dunia coding tanpa css. Nah jelek banget kan gaes gambar diatas adalah gambarannya Apabila hanya menggunakan html. Dan yang dibawah ini ketika sudah menggunakan css.
Apa itu CSS ?
CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, Kategori dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira Definisi CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan Demi mengatur format / tampilan suatu halaman HTML.
Versi CSS
Sejak awal diperkanalan css Mempunyai beberapa versi:
- CSS 1 : adalah versi pertama (17 Desember 1996).
- CSS 2 : adalah versi ke-2 (mei 1998) .
- CSS 2.1 : (7 juni 2012).
- CSS 3 : (2012)
- CSS 4 : Tetap dalam pengembangan.
Buat yang bertanya perbedaanya yang Niscaya dari segi fiturnya yang berbeda.
Belajar CSS Metode Penggunaannya
Metode penggunaan css terdapat tiga Metode Merukapan external css, internal css, dan inline css.
Belajar CSS External
File css disimpan dengan exstensi .css kemudian nanti diimport atau dihubungkan ke dalam file HTML atau yang Ingin kita desain menggunakan css. Metode penggunaanya kurang lebih seperti ini.
Buat file disamping file html dengan nama kalo saya bisanya style.css. Kemudian kita sambung dengan mencantumkan syntax dibawah ini.
Pada atribut rel dan type di tag link diatas digunakan Demi mendefinisikan bahwa yang dipanggil atau dihubungkan adalah file stylesheet atau css. Kemudian atribut href digunakan Demi meletaklan letak file css. Sama seperti memanggil file di tag a Apabila file css terletak diluar folder maka Bisa menghubungkannya dengan memberikan titik.
Apabila file css terletak didalam sebuah folder. Biasanya kalo saya dan kebanyakan orang menamainya assets. maka Demi menghubungkannya.
link rel="stylesheet" type="text/css" href="https://duniacoding.id/blog/belajar-css-pemula/assets/style.css" />Belajar CSS Internal
Tag css diletakan Kagak diluar folder seperti external melainkan didalam file html itu sendiri. Metode penggunaanya seperti dibawah ini.
Internal css
kode css diletakan di tag style.
Belajar CSS Inline
Tag css ditulisakan langsung di tag htmlkita langsung. Kita menggunakan atribut nya Merukapan style. Metode pemakaianya sama seperti class. Kurang lebih seperti dibawah ini.
Inline css
Struktur Kode CSS
Struktur kode CSS Terdapat tiga bagian.
- Selektor;
- Blok Deklarasi;
- Properti dan nilainya;
Selektor CSS
Selektor adalah kata kunci Demi memilih element HTML yang akan kita atur.
h1 {
color: salmon;
}
Artinya kita menyeleksi elemen h1, Lampau diberikan Corak salmon. Selektor di css Bisa banyak Bisa tag, class, id, dan atribut Bisa atribut tag input Merukapan type dsb.
Contohnya
Berkenalan css
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis, obcaecati!
Hallo Boss Kuh
Blok Deklarasi
Blok deklarasi adalah tempat kita ,emulisakan atribut css Merukapan dibungkus dengan kurung kurawal { }
Properti dan Nilainya
Setiap properti harus diakhiri dengan titik koma. Apabila hanya terdapat satu properti, boleh Kagak menggunakan titik koma. Properti harus ditulis didalam blok deklarasi
Teladan
p{
color: pink;
}Nah mungkin Tamat sini dulu gaes pengenalan belajar cssnya semoga kalian tertarik dan semangat ya belajarnya. Apabila kalian kebingungan Bisa koemn di kolom komentar ya. See yu se