Hallo gaes berjumpa lagi 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 untuk tampilan setelah html, dimana kedua duo ini tidak bisa kita pisahkan dalam pembuatan tampilan website. Jika html untuk tag suatu konten maka css ini berfungsi untuk mempercantik tampilan html yang sudah kita susun tadi. Bayangkan jika website tanpa css bagaikan rumah tanpa cat warna dan bentuk. Gambaranya seperti ini gaes, disini saya mengambil referensi dari web dunia coding itu sendiri ya.
Contoh di atas dalah jika website dunia coding tanpa css. Nah jelek banget kan gaes gambar diatas adalah gambarannya jika 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, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Versi CSS
Sejak awal diperkanalan css memiliki 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 : masih dalam pengembangan.
Buat yang bertanya perbedaanya yang pasti dari segi fiturnya yang berbeda.
Belajar CSS Cara Penggunaannya
Cara penggunaan css terdapat tiga cara yaitu 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. Cara 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.
<link rel="stylesheet" type="text/css" href="style.css" />Pada atribut rel dan type di tag link diatas digunakan untuk mendefinisikan bahwa yang dipanggil atau dihubungkan adalah file stylesheet atau css. Kemudian atribut href digunakan untuk meletaklan letak file css. Sama seperti memanggil file di tag a jika file css terletak diluar folder maka bisa menghubungkannya dengan memberikan titik.
<link rel="stylesheet" type="text/css" href="../style.css" />
Jika file css terletak didalam sebuah folder. Biasanya kalo saya dan kebanyakan orang menamainya assets. maka untuk menghubungkannya.
link rel="stylesheet" type="text/css" href="assets/style.css" />Belajar CSS Internal
Tag css diletakan tidak diluar folder seperti external melainkan didalam file html itu sendiri. cara penggunaanya seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal css</title>
<style>
h1{
color: salmon;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>kode css diletakan di tag style.
Belajar CSS Inline
Tag css ditulisakan langsung di tag htmlkita langsung. Kita menggunakan atribut nya yaitu style. Cara pemakaianya sama seperti class. Kurang lebih seperti dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline css</title>
</head>
<body>
<h1 style="color: salmon;">Hello World</h1>
</body>
</html>Struktur Kode CSS
Struktur kode CSS ada tiga bagian.
- Selektor;
- Blok Deklarasi;
- Properti dan nilainya;
Selektor CSS
Selektor adalah kata kunci untuk memilih element HTML yang akan kita atur.
h1 {
color: salmon;
}
Artinya kita menyeleksi elemen h1, lalu diberikan warna salmon. Selektor di css bisa banyak bisa tag, class, id, dan atribut bisa atribut tag input yaitu type dsb.
Contohnya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Berkenalan css</title>
<style>
/* Selector dengan tag */
h1 {
color: salmon;
}
/* selector dengan class */
.hello {
font-size: 20px;
}
/* Selector dengan id */
#hello {
font-size: 20px;
}
/* selector dengan Atribut */
input[type=date] {
background: salmon;
}
</style>
</head>
<body>
<h1 style="color: salmon;">Hello World</h1>
<p class="hello">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis, obcaecati!</p>
<h3 id="hello">Hallo Boss Kuh</h3>
<input type="date" name="tanggal" placeholder="Input kan tanggal">
</body>
</html>Blok Deklarasi
Blok deklarasi adalah tempat kita ,emulisakan atribut css yaitu dibungkus dengan kurung kurawal { }
Properti dan Nilainya
Setiap properti harus diakhiri dengan titik koma. Apabila hanya terdapat satu properti, boleh tidak menggunakan titik koma. Properti harus ditulis didalam blok deklarasi
Contoh
p{
color: pink;
}Nah mungkin sampai sini dulu gaes pengenalan belajar cssnya semoga kalian tertarik dan semangat ya belajarnya. Jika kalian kebingungan bisa koemn di kolom komentar ya. See yu se
