Setelah kita belajar bahasa pemprograman server PHP dengan framework codeigniter yang ada pada link Belajar membuat website MVC codeigniter dan halaman pertamamu. Maka pada kesempatan kali ini, admin akan membahas tentang pembuatan layout website dengan CSS (Cascading Style Sheet).
Apa itu CSS?, CSS merupakan aturan untuk mengatur beberapa komponen (object) yang ada didalam halaman website sehingga akan lebih terstuktur dan mudah untuk diatur.
CSS lahir pada tahun 1996 yang diciptakan oleh Hakon Wium Lie seorang CTO dari perusahaan pencipta browser Opera. Sampai saat ini terdapat 3 versi CSS, yaitu CSS 1,CSS 2, dan CSS 3.
Perbedaan berbagai versi CSS
1. CSS 1 diciptakan dengan berpusat pada pengembangan pemformatan dokumen HTML.
2. CSS 2 merupakan pengembangan dari CSS 1 dengan penambahan fitur yang mendukung peningkatan desain media, layout, dan animasi.
3. CSS 3, lahir pada tahun 2012 sebagai peningkatan dari css 2 terutama pada segi presentasi yang memungkinkan halaman html dapat diprint pada berbagai media (ukuran size dokumen).
Syntax dasar CSS
Penulisan syntax dasar CSS dimulai dengan pengenalan akan 3 stuktur penting, yaitu: Selector, deklarasi, property beserta nilainya (value).
Berikut ini adalah penjelasan tentang selector, deklarasi, dan property.
Selector
Selector merupakan object target (biasanya tag html) yang ingin diatur tampilannya.
pada contoh diatas, selector berupa tag html paragrah, dimana semua tag <P> pada halaman html akan memiliki ukuran font 16px dan berwarna merah. Selector ini dapat berupa class ataupun id yang mengarah pada object tag html.
a. Selector dengan class
/* TAG HTML */
<p class="p_class"> hallo, belajar css</p>
/* CSS */
.p_class
{
font-size:16px; color:green;
}
Pada contoh diatas selector berupa class, ditandai dengan tanda titik (.p_class). Perintah css diatas menyebabkan semua object tag html dengan class p_class akan memiliki tampilan font ukuran 16px dan berwarna hijau.
b. Selector dengan id element
/* TAG HTML */
<p id="p_id"> hallo, belajar css</p>
/* CSS */
#p_id
{
font-size:16px; color:green;
}
Selector dengan id element, ditandai dengan awalan # seperti pada contoh diatas (#p_id). Hal ini menyebabkan element dengan id="p_id" akan memiliki tampilan dengan ukuran 16px dan berwarna hijau.
Deklarasi
Blok deklarasi adalah tempat anda menulis property beserta nilai yang menentukan tampilan element selector. Tanda deklarasi dimulai dengan "{" and ditutup dengan "}".
#p_class
{/* blok deklarasi pembuka */
}/* blok deklarasi penutup */
Properti dan nilainya
Bagian terakhir adalah property dan nilainya. Property yang tersedia untuk merubah tampilan layout selector sangatlah banyak sehingga kita akan membahas secara sedikit demi sedikit. Kembali ke point pembahasan, berikut adalah contoh dari penulisan property beserta nilai menurut CSS.
#p_class
{
/* properti dan nilainya */
font-size:16px;
/* propertinya font-size, nilainya 16px
color: green;
text-transform:uppercase;
}
Disini kita bisa melihat property merupakan representasi dari tampilan layout selector sesuai dengan nilai yang dimasukkan.
Lalu, setelah itu kita pasti akan bertanya? bagaimana cara penulisan css dihalaman web kita?. Ada 3 cara penulisan css didalam halaman html web anda:
1. Internal CSS.
Internal CSS adalah penulisan syntax css didalam tag <style> pada halaman html yang sama. Internal CSS juga biasa disebut embeded CSS. Berikut adalah contoh penulisan css dengan teknik internal.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS contoh</title>
<style type="text/css">
p{
font-family: Arial;
line-height: 1em;
font-size: 12px;
}
</style>
</head>
<body>
<!-- Alternative css didalam tag body -->
<style type="text/css">
h1 {
font-family: Arial;
color: Red;
}
</style>
<h1>Contoh internal css</h1>
<p>Test saja</p>
</body>
</html>
2. Eksternal CSS.
Eksternal CSS adalah penerapan css pada halaman html dengan cara mengimport file dengan ekstensi .css. Penerapan eksternal CSS dapat dilihat melalui contoh dibawah ini:
/* buat file dengan nama eksternal.css */
p
{
font-size:12px;
color:red;
}
h1
{
color:black;
}
Lalu panggil file external.css tadi dengan mengimport dihalaman html utama seperti contoh dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="eksternal.css">
/* atau bisa menggunakan import */
<style type="text/css">
@import "eksternal.css";
</style>
</head>
<body>
<h1>Ini contoh eksternal CSS</h1>
<p> coba saja </p>
</body>
</html>
3. Inline CSS.
Inline CSS adalah penerapan css langsung pada attribute object element HTML. Cara penulisan CSS ini biasa dilakukan oleh programmer kalau sedang dipepet deadline (hehehe). Cara inline ini sebenarnya tidak dianjurkan karena kurang rapi dan mempersulit kerja team. Berikut adalah contoh penulisan inline css pada halaman html:
<!DOCTYPE html>
<html>
<head>
<title>Contoh penerapan inline css</title>
</head>
<body>
<!--
inline CSS ditulis langsung pada attribute tag html pada style=
-->
<p style="color:red; font-size:20px;">Ini adalah contoh penerapan inline CSS</p>
</body>
</html>
Demikian pengenalan dasar CSS sebelum pembahasan lebih dalam lagi. Yuks, tetap ikuti dan jangan lelah untuk belajar hal yang baru.
Bagi anda pemilik usaha yang ingin menerapkan sistem komputer untuk kontrol stok, rekap laporan otomatis, laba-rugi otomatis, sistem kasir,dan barcode qrcode. Dapat mencoba aplikasi partheon stok.. GRATIS 100%. Installnya mudah cukup KLIK/TAP link gambar dibawah ini: