Pengertian CSS
<link rel="stylesheet" href="css/style.css"> <style>….</style>
Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman web yang digunakan untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat kita gunakan dalam mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk suatu hubungan layaknya hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
KELEBIHAN CSS
Adapun beberapa kelebihan CSS adalah sebagai berikut:
1. Memisahkan desain dengan konten halaman web.
2. Mengatur desain sefisien mungkin.
3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja
4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
5. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
6. Lebih mudah didownload karena lebih ringan ukuran filenya.
7. Satu CSS dapat digunakan banyak halaman web.
Selector
Selector adalah elemen/tag HTML yang ingin diberi style. Sobat dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tSobat <>. Pada contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang terdapat dalam file HTML. Jika tag HTML yang ingin diberi style memiliki ID, Sobat dapat menuliskan nama ID tersebut dengan diawali Sobat kress (#).
#header
Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan Sobat titik (.) diikuti dengan nama class.
.artikel
Jika Sobat hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka seluruh tag h1 yang terdapat dalam file HTML akan memiliki style yang sama. Bagaimana jika kita hanya ingin memberi style pada tag h1 yang hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :
.artikel h1
Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag h1 yang hanya terdapat di dalam class artikel (atau - h1 yang merupakan child dari class artikel). Sobat-pun dapat memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya ketika Sobat memiliki dua atau lebih tag dengan warna background yang sama, dari pada menuliskan kode seperti ini :
h1{ background-color: #666666; }
P { background-color: #666666; }
a { background-color: #666666; }
Sobat dapat menggabungkan selector dengan menambahkan tSobat koma pada nama tag yang ingin diberi style.
h1, p, a { background-color: #66666; }
Property dan Value
Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir dan lain sebagainya. Untuk memberikan nilai/value pada property kita gunakan tSobat titik dua ( : ). Setiap property diakhiri dengan titik koma (;), jika Sobat tidak mengakhirinya maka browser tidak akan mengetahui maksud dari property tersebut. Property property pada CSS sangat mudah dimengerti karena lebih mirip bahasa kita sehari-hari. Misalnya untuk merubah warna text kita gunakan property color, untuk merubah warna background kita gunakan property background-color, untuk merubah ukuran huruf kita gunakan property font-size. Mudah dimengerti bukan?
.artikel h1 {
color : red;
background-color : blue;
font-size : 20px;
}
0 komentar:
Posting Komentar