Hallo, berjumpa kembali, sesi kali ini akan membawakan tentang tips properti Tutorial CSS: Pengenalan Dasar CSS untuk Pemula (dan Tips Belajar CSS) simak selengkapnya
CSS ialah bahasa kedua setelah yang harus dipelajari seorang web developer.
Pengetahuan tentang CSS sangatlah penting bagi seorang web developer, karena dengan CSS kita bisa:
- Halaman landing page yang menarik;
- Template atau tema blog;
- Mengubah PSD (Desain web) menjadi HTML;
- dan sebagainya.
Contohnya, bagaimana bentuk facebook minus CSS?
Mungkin bisa bagai ini:
Pada artike ini, kita akan membahas pengenalan dasar CSS, seperti:
- Apa itu CSS?
- Struktur dasar CSS;
- Cara Menuliskan CSS di HTML;
- Tips Belajar CSS
Mari kita mulai…
Apa itu CSS?
CSS (Cascade Style Sheet) meruapakan sebuah bahasa buat memanipulasi tampilan web sehingga terlihat bertambah menarik dan indah.
Dengan CSS, kita dapat memanipulasi layout (tata letak), warna, font, garis, dan lain-lain.
CSS pertama kali diperkenalkan oleh pada tarikh 1994.
Variasi atau Versi CSS
Sejak asal diperkenalkan CSS memiliki jumlah variasi:
- CSS 1: ialah adaptasi pertama (17 Desember 1996)
- CSS 2: ialah adaptasi ke-2 (Mei 1998)
- CSS 2.1: (7 juni 2011)
- CSS 3: (2012)
- CSS 4: lagi pada pengembangan.
Apa bedanya dari setiap adaptasi tersebut?
Tentunya ada penambahan dan pengurangan…
Struktur Kode atau Sintaks Dasar CSS
Struktur kode CSS terdiri dari tiga bagian:
- Selektor;
- Blok Deklarasi;
- Properti dan nilanya.
Contoh:
Mari kita bahas satu bagi satu…
Selektor
Selektor ialah kata kunci buat memilih anasir HTML yang akan kita atur.
Contohnya:
Artinya: Kita memilih semua anasir <h1>, arkian diberikan warna bacaan red (merah).
Selektor dapat berupa nama tag, class, id, dan atribut.
Contoh:
/* Selektor dengan nama tag */
h2
color: blue
/* Selektor degnan class */
.bg-yellow
backgound-color: yellow;
/* selektor dengan ID anasir */
#header
background: grey;
/* Selektor dengan Atribut */
input[type=text]
background: yellow;
Pembahasan bertambah pada tentang selektor dapat dibaca pada:
Blok Deklarasi
Blok deklarasi ialah tempat kita menuliskan atribut-atibut CSS yang akan diberikan ke pada selektor.
Contoh:
Artinya, kita akan memanipulasi barometer font dari tag <p> sebesar 18px.
Blok deklarasi dimulai atau dibuka dengan tanda kurung arkian ditutup dengan .
Properti dan Nilainya
Properti melahirkan atribut atau sekumpulan adat yang akan diberikan kepada elemen yang dipilih.
Setiap properti harus diakhiri dengan titik koma (;). Apabila hanya terdapat
satu properti, boleh tidak menggunakan titik koma.
Properti harus ditulis di pada blok deklarasi.
Contoh:
blockquote
background: pink;
Jangan tulis bagai ini:
Penulisan kode CSS di HTML dapat dilakukan di pada tag <style>. Tag tersebut dapat ditulis di pada tag <head> atau <body>.
Kebanyakan orang menulisnya di pada tag <head>. Perhatiakn sampel berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penulisan kode CSS</title>
<style type="text/css">
p color: red
</style>
</head>
<body>
<p>Sebuah sampel paragraf yang telah diberikan akibat kode CSS</p>
</body>
</html>
Hasilnya, anasir <p> akan berwarna merah:
Selain dengan aturan ini, ada dua aturan lagi yang bisa digunakan:
- Inline CSS
- Eksternal CSS
Silahkan baca di:
Tips Belajar CSS
Ada jumlah tips yang embuh abdi bagikan buat membantu teman-teman dalam berguru CSS:
Tips #1: Cara Menghapal Kode dan Properti CSS
Ada ratusan properti CSS yang harus diingat.
Apakah kita akan mampu menghapal semuanya?
Tergantung…
Jika kamu sering mengetik kode CSS minus copas, bisa jadi ingatanmu terhadap kode atau properti CSS akan semkkin kuat.
Tips #2: Gunakan Inspect Elemen
ada di setiap browser. Bisa dibuka dengan Klik kanan, arkian pilih Inspect Element.
Di inspect elemen, kita bisa menulis kode CSS secara langsung dan hasilnya pun akan langsung kita ketahui.
Tups #3: Gunakan Cheat Sheet
Cheat Sheet ialah jerambah yang berisi contekan kode CSS.
Tunggu dulu…
Contekan?
Apakah boleh?
Ya tentu saja boleh.
Ini kan bukan ujian.
Kamu bisa mencari cheat sheet CSS di Google dengan kata kunci “CSS Cheat Sheet”.
Silahkan di-download, arkian di-print.
Setelah itu bisa ditempel di depan meja atau ditaruh di atas meja.
Kapanpun butuh contekan, kita bisa melihatnya. 😏
Apa Selanjutnya?
Kita telah memahami hal dasar pada CSS seperti:
Stuktur Dasar CSS yang terdiri dari
- Selektor;
- Blok deklarasi;
- dan properti.
Cara menulis CSS di HTML.
Lalu barang apa selanjutnya?
Selanjutnya silahkan pelajari bertambah pada tentang dan latihan dengan jumlah properti yang sering digunakan.
Selamat belajar…
oke pembahasan tentang Tutorial CSS: Pengenalan Dasar CSS untuk Pemula (dan Tips Belajar CSS) semoga tulisan ini menambah wawasan salam
tulisan ini diposting pada label tips properti, tips beli properti, tips jualan properti, , tanggal 13-07-2021, di kutip dari https://www.petanikode.com/css-untuk-pemula/
