Setelah belajar HTML, bahasa pemrograman yang perlu kita pelajari jika ingin menjadi web developer adalah CSS. Pada artikel ini saya akan membahas dasar CSS, mulai dari Definisi,Struktur, beserta cara menggunakannya dalam html.
Apa itu CSS?
Langkah awal dalam belajar dasar CSS adalah dengan mengetahui pengertian dari CSS itu sendiri. CSS (Cascading Style Sheets) merupakan sebuah bahasa untuk menyederhanakan proses pembuatan website dengan mengatur tampilan web sehingga terlihat lebih menarik. Dengan CSS, kita dapat mengatur tata letak, warna, font,kolom, garis, dan lain-lain. CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML maupun PHP.
Struktur Dasar CSS
CSS memiliki struktur kode dan sintaks dasar yang terdiri dari beberapa bagian penting yang terlihat pada gambar dibawah ini.
Struktur kode CSS terdiri dari beberapa bagian yaitu : Selektor,Deklarasi,Properti dan nilai
Block Selektor
Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita atur. Selector digunakan untuk mencari bagian web yang ingin di atur atau di-style. Selektor dapat berupa nama tag, class, id, dan atribut.
Contoh kode Selector :
/* h1 adalah selektor */
h1{
background-color: red;
}
Artinya: Kita memilih semua elemen <h1>, lalu diberikan warna teks red (merah).
Adapun Selektor nama tag, class, id, dan atribut dapat di lihat pada kode program dibawah ini.
/* Selektor dengan nama tag */
h2 {
color: blue
}
/* Selektor degnan class */
.bg-yellow {
backgound-color: yellow;
}
/* selektor dengan ID elemen */
#header {
background: grey;
}
/* Selektor dengan Atribut */
input[type=text]{
background: yellow;
}
Blok Deklarasi
Deklarasi block adalah tempat kita menuliskan atribut-atibut CSS yang akan diberikan ke pada selektor. Blok deklarasi dimulai atau dibuka dengan tanda kurung { lalu ditutup dengan }.
Contoh kode Deklarasi :
p {
font-size: 25px;
}
Artinya, kita akan mengatur ukuran font dari tag <p> sebesar 25px.
Properti dan Nilai (Value)
Property CSS adalah jenis elemen atau style yang akan diubah dari sebuah tag HTML. Properti harus ditulis di dalam blok deklarasi. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector. Jika selector digunakan misalnya untuk mencari seluruh tag <p>, maka property adalah “efek elemen yang ingin diatur dari tag p tersebut“, seperti ukuran text, warna, jenis font, dll.
Sedangkan Value CSS adalah nilai dari properti.
properti: "nilai";
Misalkan untuk property background-color digunakan untuk mengubah warna latar belakang dari sebuah selector, maka value atau nilainya dapat berupa red, yellow, atau black. Jika terdapat lebih dari satu properti dalam blok deklarasi, maka tiap properti tersebut harus dipisahkan dengan titik koma (;).
Contoh kode properti dan value
h1{
background-color: green;
color: yellow;
font-family: arial;
}
Cara menggunakan kode Dasar CSS dalam HTML
Cara menggunakan atau menulis kode dasar CSS di HTML dapat dilakukan di dalam tag <style>. Tag tersebut dapat ditulis di dalam tag <head> atau <body>. Kebanyakan orang menulisnya di dalam tag <head>. Untuk lebih jelas, perhatikan contoh berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Hello World CSS</title>
<style type="text/css">
p {
font-family: serif;
line-height: 2.5em;
font-size: 25px;
font-family: sans;
color: red;
};
</style>
</head>
<body>
<p>Hasil dari contoh paragraf berdasarkan oleh kode CSS</p>
</body>
</html>
Berdasarkan kode program diatas, maka kita akan mengatur line, warna, font, size pada elemen <p> sehingga hasilnya seperti tampak gambar dibawah ini.
Sekarang kita sudah berhasil menggunakan CSS dalam html. Adapun tambahan lainnya akan saya jelaskan secara ringkas dibawah ini.
Catatan tambahan belajar Dasar CSS
1. Kita dapat menulis kode CSS secara langsung dan hasilnya pun akan langsung diketahui melalui Inspect elemen, adapun caranya adalah sebagai berikut :
- Di Browser, buka halaman yang ingin di cek
- Lalu Klik kanan dan pilih Inspect Element
2. Gunakan Cheat Sheet untuk mencari halaman yang berisi contoh kode CSS, berikut langkah-langkahnya :
- Cari cheat sheet CSS di Google dengan kata kunci “CSS Cheat Sheet”
- Setelah itu download cheat sheet CSS nya. lalu di simpan
- Atau anda bisa menggunakan cheat sheet generator berikut ini lalu edit dan salin kode nya. Misalkan kita ingin mengatur background logo bisa dilihat pada gambar dibawah ini.
Begitulah pembahasan mengenai dasar CSS, mulai dari Definisi,Struktur, beserta cara menulis dan menggunakannya dalam html. Semoga mudah dipahami. Baca juga artikel selanjutnya yaitu Belajar CSS #2 Cara Memasukkan Penulisan CSS Ke Html
