Pengenalan Dasar CSS untuk Pemula (dan Tips Belajar CSS)
CSS adalah bahasa kedua setelah HTML yang harus dipelajari seorang web developer.
- Halaman landing page yang menarik
- Template atau tema blog
- Mengubah PSD (Desain web) menjadi HTML
- dan sebagainya
- Apa itu CSS?
- Struktur dasar CSS;
- Cara Menuliskan CSS di HTML;
- Tips Belajar CSS
Apa itu CSS
CSS (Cascade Style Sheet) meruapakan sebuah bahasa untuk mengatur tampilan web sehingga terlihat lebih menarik dan indah.
Dengan CSS, kita dapat mengatur layout (tata letak), warna, font, garis, dan lain-lain.
CSS pertama kali diperkenalkan oleh Håkon Wium Lie pada tahun 1994.
Variasi atau Versi CSS
Sejak awal diperkenalkan CSS memiliki beberapa variasi:
- CSS 1 : adalah versi pertama (17 Desember 1996)
- CSS 2 : adalah versi ke-2 (Mei 1998)
- CSS 2.1 : (7 juni 2011)
- CSS 3 : (2012)
- CSS 4 : masih dalam pengembangan.
Apa bedanya dari setiap versi 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:
- Selektor
Selektor adalah kata kunci untuk memilih elemen HTML yang akan kita atur.
Contohnya :
h1 {
color: red;
}
/* 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
p {
font-size: 18px;
}
- Properti dan Nilainya
properti: "nilai";
Setiap properti harus diakhiri dengan titik koma (;
). Apabila hanya terdapat satu properti, boleh tidak menggunakan titik koma.
Contoh:
blockquote {
background: pink;
}
Jangan tulis seperti ini:
background: pink;
p {
}
Cara Menulis kode CSS dalam HTML
Penulisan kode 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>
. Perhatikan contoh berikut ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Penulisan kode CSS</title>
<style type="text/css">
p { color: red }
</style>
</head>
<body>
<p>Sebuah contoh paragraf yang sudah diberikan oleh kode CSS</p>
</body>
</html>
Hasilnya, elemen <p>
akan berwarna merah :
- Inline CSS
- Eksternal CSS
Komentar
Posting Komentar