Sebelumnya, kita dapat membuat struktur halaman website seperti paragraf, heading, image, list, dan sebagainya menggunakan HTML. Namun untuk membuat tampilan website yang baik dan nyaman digunakan oleh user, kita juga harus melakukan styling seperti merubah warna background dan text.
Untuk melakukan styling pada halaman website yang sudah dibuat, kita dapat menggunakan CSS. Apabila HTML digunakan untuk menentukan struktur website, maka CSS digunakan untuk menentukan styling pada website tersebut. Misalnya :
- Menentukan warna background dan text
- Membuat border atau garis tepi pada suatu element HTML
- Menentukan layout website
- Membuat website menjadi responsive
CSS memiliki struktur penulisan seperti berikut
/* struktur penulisan : */
selector {
property: value;
}
/* contoh : */
p {
color: blue;
}
Langkah pertama untuk membuat styling pada CSS, yaitu menentukan element apa yang ingin kita terapkan style, dimana element tersebut kita tulis pada bagian selector
. Pada contoh diatas, kita akan menerapkan style pada element <p>
atau paragraf.
Untuk mengetahui jenis - jenis selector, bisa mengunjungi link berikut
https://www.w3schools.com/css/css_selectors.asp
Langkah kedua, setelah menentukan element apa yang ingin kita terapkan style, selanjutnya kita menentukan property
atau bagian apa yang ingin kita style dari element tersebut. Pada contoh diatas, kita akan mengubah color
atau warna text dari element p
catatan : kita dapat menuliskan lebih dari satu property pada satu selector
Terakhir, kita dapat menuliskan nilai dari property
pada bagian value
. Pada contoh diatas, kita akan memberikan warna blue
pada property color
. Sehingga semua element <p>
yang ada pada website akan berubah menjadi berwarna biru.
catatan : masing - masing
property
memilikivalue
yang berbeda - beda yang dapat dipelajari pada topik - topik selanjutnya
Untuk menerapkan CSS pada file HTML yang sudah kita buat, kita dapat menggunakan salah satu dari cara berikut
Setiap element HTML, pasti memiliki attribute style
. Kita dapat langsung menuliskan CSS pada attribute style
tersebut. Contohnya :
<!-- index.html -->
<html>
<head>
<title>Contoh penulisan CSS</title>
</head>
<body>
<h1 style="color:red">judul ini akan berwarna merah</p>
<p style="color:blue">text ini akan berwarna biru</p>
</body>
</html>
Pada contoh diatas, kita menuliskan CSS secara langsung pada element <p>
dan <h1>
menggunakan attribute style
. Kelemahan dari cara ini adalah struktur website akan terlihat kotor karena terdapat CSS pada setiap elementnya.
Selain ditulis pada masing - masing element, CSS juga dapat dituliskan pada satu tag khusus bernama <style>
yang berada di dalam tag <head>
. Contohnya :
<!-- index.html -->
<html>
<head>
<title>Contoh penulisan CSS</title>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
<body>
<h1>judul ini akan berwarna merah</p>
<p>text ini akan berwarna biru</p>
</body>
</head>
</html>
Dengan menggunakan cara ini, struktur website akan terlihat lebih rapi. Dimana semua struktur website berada di dalam tag <body>
sedangkan semua styling terdapat pada tag <style>
.
Sejauh ini, dengan menggunakan cara kedua, kita bisa fokus melihat struktur website di dalam tag <body>
, sedangkan styling berada di dalam tag <style>
. Namun, bagaimana apabila CSS yang kita tulis sudah memiliki puluhan hingga ratusan baris ? hal ini akan menyebabkan file HTML akan besar dan susah untuk dilihat.
Maka dari itu, kita perlu memisah CSS pada file khusus berformat .css
. Sehingga pada file .html
hanya berisi struktur website saja, sedangkan style nya berada pada file .css
. Contohnya :
<!-- index.html -->
<html>
<head>
<title>Eksternal css</title>
<!-- untuk mengimport file css pada html menggunakan <link> -->
<link href="index.css" rel="stylesheet" />
</head>
<body>
<h1>judul ini akan berwarna merah</p>
<p>text ini akan berwarna biru</p>
</body>
</html>
/* index.css */
h1 {
color: red;
}
p {
color: blue;
}
Pada contoh diatas, kita membuat struktur website pada file index.html
, sedangkan style nya berada pada file index.css
catatan : Pastikan
index.html
danindex.css
berada pada folder yang sama. Apabilaindex.css
berada pada folder yang berbeda, kita perlu menuliskan nama foldernya juga. misalnya<link href="namaFolder/index.css" rel="stylesheet" />