Apa itu CSS ?
Sebelum melanjutkan tutorial CSS ini, anda diharapkan telah memiliki pemahaman tentang dasar tentang HTML atau XHTML
Apa itu CSS?
- CSS kependekan dari Cascading Style Sheets
- Styles mendefinisikan bagaimana menampilkan elemen HTML
- CSS menghemat banyak pekerjaan karena dapat mengontrol tata letak beberapa halaman web sekaligus
- External Style Sheets disimpan dalam File CSS
HTML berisi tag yang tidak pernah dimaksudkan untuk untuk memformat dokumen.
HTML dimaksudkan untuk menentukan isi dari dokumen, seperti:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Pada awalnya, format (style) dimasukan pada tag. Hal ini membuat kesulitan bagi programmer karena harus mengubah properti dari HTML satu per satu. Untuk mengatasi masalah ini, World Wide Web Consortium (W3C) menciptakan CSS.
Dalam HTML 4.0, semua format bisa dihapus dari dokumen HTML, dan disimpan dalam file CSS yang terpisah.
- Semua browser mendukung CSS saat ini.
- CSS Menghemat banyak pekerjaan!
- CSS mendefinisikan bagaimana cara menampilkan elemen HTML.
Styles biasanya disimpan dalam file eksternal css. Style sheet eksternal memungkinkan Anda untuk mengubah tampilan dan tata letak dari semua halaman di situs Web, hanya dengan mengedit satu file tunggal!
Sintak CSS
Aturan CSS terdiri dari blok Selector dan blok Deklarasi :
Deklarasi blok berisi satu atau lebih deklarasi yang dipisahkan oleh titik koma.
Setiap deklarasi mencakup nama properti dan nilai, yang dipisahkan oleh titik dua.
Contoh
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal:
p {color:red;text-align:center;}
Untuk membuat kode CSS lebih mudah dibaca, Anda dapat menempatkan satu deklarasi pada setiap baris, seperti ini:
1 2 3 4 | p {color: red;text-align: center;} |
Komentar di CSS
Komentar digunakan untuk menjelaskan kode Anda, dan dapat membantu Anda ketika Anda mengedit sumber kode di kemudian hari. Komentar akan diabaikan oleh browser.
Sebuah komentar CSS dimulai dengan / * dan diakhiri dengan * /.
1 2 3 4 5 6 7 8 9 | p {color: red;/* This is a single-line comment */text-align: center;}/* This isa multi-linecomment */ |
CSS Selectors
CSS memungkinkan Anda untuk memilih dan memanipulasi elemen HTML. CSS selector digunakan untuk “menemukan” (atau memilih) elemen HTML berdasarkan id, kelas, jenis, atribut, nilai atribut dan banyak lagi.
Element Selector
Menggunakan nama elemen sebagai selector.
Aturan CSS sytle berikut membuat semua elemen dengan tag <p> pada halaman seperti ini mempunyai align ditengah dengan warna teks merah.
1 2 3 4 | p {text-align: center;color: red;} |
Id Selector
Menemukan elemen HTML yang menggunakan atribut id tertentu.
Id harus unik dalam suatu halaman, sehingga Anda harus menggunakan selector id bila Anda ingin menemukan satu elemen yang unik.
Untuk menemukan elemen dengan id tertentu, dapat dilakukan dengan menulis karakter hash(#) diikuti oleh nama id dari elemen.
Aturan CSS Style di bawah ini akan menerapkan HTML CSS yang memiliki id = “para1”:
1 2 3 4 | #para1{text-align: center;color: red;} |
class Selector
Menemukan elemen yang menggunakan atribut class tertentu.
Untuk menemukan elemen dengan class tertentu, dapat dilakukan dengan menulis karakter dot(.) dan diikuti oleh nama class :
Pada contoh di bawah ini, semua elemen HTML dengan class = “center” akan diformat menjadi center-aligned
1 2 3 4 | .center{text-align: center;color: red;} |
Anda juga dapat menggabungkan jenis elemen HTML yang spesifik dengan class tertentu. Pada contoh di bawah ini, semua elemen p dengan class = “center” akan di format menjadi center-aligned:
1 2 3 4 | p.center{text-align:center;color:red;} |
Group Selectors
Dalam style sheet sering ada unsur dengan style yang sama. Misalnya contoh di bawah ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | h1{text-align: center;color: red;}h2{text-align: center;color: red;}p {text-align: center;color: red;} |
Maka kita bisa memuat kode CSS berikut untuk meminimalkannya
1 2 3 4 | h1, h2, p {text-align: center;color: red;} |
Cara Memasang CSS
Ada tiga cara untuk memasukkan sebuah CSS:
- External style sheet
- Internal style sheet
- Inline style
External Style Sheet
Eksternal stylesheet adalah menyimpan CSS pada file terpisah. Eksternal style sheet sangat ideal diterapkan pada banyak halaman karena Anda dapat mengubah tampilan seluruh situs Web dengan mengubah hanya satu file.
Cara memasang external sytle sheet, setiap halaman harus menyertakan link ke file CSS dengan tag <link> . Tag <link> dimasukan di dalam bagian tag <head>:
1 2 3 | <head><link rel="stylesheet"type="text/css"href="mystyle.css"></head> |
Sebuah eksternal style sheet adalah sebuah file teks, dan dapat ditulis dalam editor teks apapun. Misalnya sebuah file style sheet bernama mystyle.css, akan berisi style berikut:
1 2 3 | hr {color: green;}p {margin: 20px;}body {background-image: url("images/background.gif");} |
Internal Style Sheet
Internal style sheet digunakan jika dokumen memiliki Style yang unik. Style tersebut tidak akan dipakai pada halaman web yang lain. Anda harus mendefinisikan Style internal di bagian dalam tag <head> dalam tag <style>.
1 2 3 4 5 6 7 | <head><style>hr {color: green;}p {margin: 20px;}body {background-image: url("images/background.gif");}</style></head> |
Inline Styles
Insline style adalah style yang ditambahkan dalam tag HTML dengan atribut style. Atribut ini kemudian diisi dengan kode deklarasi CSS. Dengan inline style, maka deklarasi CSS hanya akan bekerja untuk elemen tersebut saja.
1 | <p style="color:sienna;margin-left:20px;">This is a paragraph.</p> |