Latar belakang penggunaan CSS
Penggunaan CSS didasari oleh kebutuhan akan tampilan sebuah website. Sebagaimana diketahui bahwa selain isi, tampilan sebuah website merupakan faktor yang tidak kalah pentingnya. Tampilan website yang baik akan membuat pengunjung nyaman dalam membaca dan mengakses isi sebuah website. Hal ini tentu positif bagi perkembangan website tersebut.
Tata letak website yang baik merupakan susunan dari tiap-tiap bagian secara baik dan proporsional. Sebagai contoh saat kita mengatur jarak antar bagian melalui margin dan padding, juga saat mengatur penggunaan font, ukuran font dan warna font.
Cara Membuat CSS
Dalam membuat CSS ada empat hal utama yang perlu diketahui, yaitu:
- Selector, adalah bagian atau elemen website yang akan diatur stylenya.
- Deklarasi, merupakan pernyataan yang menetapkan style yang berisi Properti dan Nilai.
- Properti, adalah parameter tampilan yang akan kita atur.
- Nilai, merupakan ukuran yang itetapkan pada parameter properti.
p {
margin: 10px;
}
Penjelasan contoh diatas :
- p merupakan selector untuk elemen paragraf
- {...}, merupakan deklarasi, dalam hal ini berisi margin: 10px;
- margin, merupakan properti untuk mengatur jarak dengan elemen lain.
- 10px, merupakan nilai yang ditetapkan untuk properti margin.
p {
margin: 10px;
padding: 5px;
font-size: 10px;
}
Cara Penulisan CSS
Untuk menggunakan CSS ada tiga cara yang bisa dilakukan yaitu dengan cara Inline CSS, Embedded CSS dan External CSS.1. Inline CSS
Adalah penulisan CSS didalam elemen html secara langsung. Jadi dalam hal ini kita tidak memerlukan penulisan selector karena sudah langsung tertuju pada elemen yang dimaksud. Sebagai gantinya, kita menggunakan tag style="..." pada elemen tersebut.
Contoh penulisan Inline CSS:
<p style="margin:10px;">
Penjelasan dari kode diatas adalah, kita menetapkan properti margin sebesar 10px untuk elemen paragraf (p). Diantara tanda petik dua (") kita bisa menyisipkan beberapa deklarasi properti dan nilai sekaligus dengan cara masing-masing deklarasi tetap diakhiri dengan tanda titik koma (;).
2. Embedded CSS
Adalah penulisan CSS secara tersendiri namun berada dalam satu file html. Cara ini membutuhkan selector dalam penulisannya. Beberapa kode CSS ditulis didalam tag <style>...</style>. kita bisa menuliskan beberapa selector beserta deklarasi properti dan nilai didalam tag <style> ini.Contoh penulisan Embedded CSS dalam sebuah file html:
- <html>
- <head>
- <title>Contoh Embedded CSS</title>
- </head>
- <style>
- p {
- margin: 10px;
- }
- h1 {
- font-size: 15px;
- }
- </style>
- <body>
- <h1>Judul dengan font 15px</h1>
- <p>Ini adalah paragraf pertama</p>
- <p>Ini adalah paragraf kedua</p>
- </body>
- </html>
3. Eksternal CSS
Ini adalah cara paling efektif dan banyak dipakai oleh kebanyakan website saat ini. Dengan eksternal CSS kita menaruh kode-kode CSS didalam sebuah file tersendiri lalu membuat link didalam file html menuju file CSS yang telah dibuat. Cara ini lebih efisien dan mempermudah pekerjaan mendesain dan mengelola sebuah website.Contoh penulisan Eksternal CSS :
- Pertama kita membuat kode berikut ini pada file .css, lalu menyimpannya misalnya dengan nama style.css
- p {
- margin: 10px;
- }
- h1 {
- font-size: 15px;
- }
- <html>
- <head>
- <title>Contoh Embedded CSS</title>
- <link rel="stylesheet" type="text/css" href="style.css">
- </head>
- <body>
- <h1>Judul dengan font 15px</h1>
- <p>In adalah paragraf pertama</p>
- <p>In adalah paragraf kedua</p>
- </body>
- </html>
Kemudian pada bagian head dari file index.html kita taruh link menuju file css dengan kode <link rel="stylesheet" type="text/css" href="style.css">. Hasil tampilan dari contoh ini sama dengan contoh sebelumnya,
Keuntungan dari cara ini adalah kita bisa lebih mudah mengelola CSS untuk banyak halaman secara sekaligus. Selain itu proses membuka website untuk halaman kedua dans eterusnya menjadi lebih ringan karena tidak perlu loading ulang css.
Untuk membuat file CSS dapat menggunakan aplikasi teks editor untuk pemrograman web seperti pada pembuatan script HTML dan PHP.
0 komentar:
Posting Komentar