CSS (Cascade Style Sheet) adalah sebuah bahasa pemrograman yang berfungsi untuk memeberikan desain pada web kita agar terlihat menarik dan tidak flat. Dengan menggunakan CSS kita dapat mengatur sebuah tampilan tata letak pada sebuah website kita. Dan kita bahkan bisa mengubah komponen pada sebuah html agar terlihat lebih menarik.
CSS ditemukan oleh Hakom Wium Lie pada tahun 1994. CSS sendiri sudah memiliki beberapa versi.
- 17 Desember 1996 -> CSS 1 merupakan versi pertama
- 2 Mei 1998 -> CSS 2 merupakan versi kedua
- 7 Juni 2011 -> CSS 2.1
- 2012 -> CSS 3
Dan sekarang CSS 4 sedang dalam masa pengembangan.
Mari kita coba terapkan CSS pada website kita. Pertama kita siapkan folder direktori untuk menyimpan file kita. Dan buat dua buah file dengan nama index.html dan style.css.
Dan copy kan kode dibawah ini dan taruh pada index.html.
<!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"> <link rel="stylesheet" href="style.css"> <title>CSS</title> </head> <body> <h1>Ini Judul</h1> <p>Lorem ipsum dolor sit amet.</p> </body> </html>
Jika sudah, pergi ke file style.css untuk memberikan sentuhan pada heading 1 dan paragraf diatas.
body {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
background-color: aqua;
width: 200px;
padding: 20px;
border-radius: 10px;
margin: 50px auto;
}
p {
text-align: center;
}
Ini tampilan sebelum diberi style pada file css kita.
Dan ini sesudah diberi style.
Penjelasan Kode
body {
margin: 0;
padding: 0;
}
Kode diatas untuk mengatur body dari html agar tidak memberikan ruang atau jarak pada website kita.
h1 {
text-align: center;
background-color: aqua;
width: 200px;
padding: 20px;
border-radius: 10px;
margin: 50px auto;
}
Selanjutnya kita mengatur H1. Pada text-align kita berikan value agar teks berada tepat ditengah. Dengan memberikan background dengan warna aqua maka background dari H1 akan berubah. Dan kita atur width nya menjadi 200px agar nantinya background dari H1 tidak melebar. Margin disana berfungsi agar elemen H1 tepat berada ditengah.
Berikut adalah cara penulisan style pada CSS.
Itulah tutorial untuk menggunakan CSS untuk pemula, semoga dapat menjadi pandangan untuk kita yang ingin belajar mengenai CSS ini. Sekian tutorial kali ini, sampai berjumpa lagi di tutorial lainnya.
