Cascading Style Sheet (dikutip dari w3.org) merupakan mekanisme sederhana yang berfungsi untuk mengatur gaya/style pada halaman web, contoh yang dapat diatur style nya seperti warna, ukuran, posisi dan lainnya. Khususnya bagi halaman html suatu web merupakan bagian halaman yang harus di percantik. Jika tidak maka tampilan suatu web akan hanya berisikan konten tulisan dan link-link bacaan saja tanpa ada gambar, layout, list, tabel atau bentuk data yang menarik.
Saat pembuatan konten halaman web yang kita inginkan, pastinya harus terpisahkan antara pembatan html dan css yang akan di buat tampilannya agar proses saat kita menghias html malah semakin ribet jika tidak di pisahkan oleh halamn konten htmlnya sendiri.
Dalam pembuatan tampilan menarik dan menggunakan CSS, kita harus tahu terlebih dahulu tentang anatomi dari CSS. Sama seperti anatomi dari html, CSS mempunyai anatomi yaitu : selector, property, dan value. Jika di ibaratkan dituliskan untuk membuat suatu komponen CSS maka akan begini strukturnya : selector { property: value; }.
Mari kita contohkan dengan contoh lain. Misal saya tuliskan :
h1 { color: blue; } berarti artinya h1 merupakan selector, color sebagai property, dan blue sebagai value.
Kita buat contoh yang lain seperti :
h1 {
font-family: “Courier New”;
text-align: center;
font-size: 50px;
color: red;
}
Jadi jika kita bahas dengan suatu teori maka selector merupakan bagian dari css yang dapat memilih dan mengubah suatu elemen pada html. Elemen html beragam si seperti tag, id, class, h1, p dan masih banyak lainnya. Perlu diingat kalau struktur html kita semakin kompleks maka struktur css nya juga akan lebih semakin kompleks dari struktur html nya sendiri.
Nah untuk property dan value ada banyak kosa kata yang banyak dari property dan value, dan itu dapat di cari di google karena jika di share di artikel ini pastinya akan terlalu panjang artikel ini.
Langsung saja kita belajar cara menempatkan css agar halaman kerja css dapat dipisahkan dengan halaman kerja html.
Cara yang dapat kita lakukan (btw saya pakai halaman kerja visual studio code ya) yaitu :
- kita siapkan dua file yang bernama xxx.html dan xxx.css
- setelah itu kita ketikkan struktur tag halaman kerja html yang standar seperti <!doctype html>, html, head dan body
- kemudian tambahkan <title></title> setelah tag head
- lalu dibawah title kita tambahkan <link rel=”stylesheet” type=”text/css” href=””>
- jika sudah maka halaman kerja html dan css akan tersambung dan jika kita akan menambhakan css langsung saja ke halaman css dengan memasukkan property dan value saja
Nah untuk permulaan pasti bisa ya dipraktekkan jadi untuk kita memanipulasi css dapat dengan mudah nantinya. Selamat belajar dan sampai jumpa dengan tema berikutnya. ( will )