Upload presentasi
Presentasi sedang didownload. Silahkan tunggu
1
(Cascading Stylesheet)
CSS (Cascading Stylesheet)
2
CSS CSS atau Cascading Stylesheet, pertama kali dikembangkan pada 1997 sebagai terobosan yang memungkinkan para pengembang web (web developers) untuk mengatur style (gaya tampilan) halaman-halaman web dengan cepat, mudah, dan efisien. Dalam hal ini, CSS dapat melakukan dukungan terhadap HTML dalam segi desainnya, karena konten atau isi sebuah web dapat secara tegas dipisahkan dari desainnya.
3
Definisi Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan warna dan tampilan yang ada di situs kita sekaligus memformat ulang situs kita. CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan di web browser.
4
Pada prakteknya, CSS digunakan sebagai pengumpulan sebuah blok perintah yang sering dilakukan berulang-ulang sehingga dapat mempercepat proses desain web itu sendiri
5
Perbedaan antara HTML dan CSS
Tag-tag HTML pada awalnya digunakan untuk mendefinisikan isi atau konten dari sebuah web. Tag HTML <p>, misalnya, digunakan untuk menyatakan paragrap, <h1> untuk menyatakan heading, dan <table> untuk menyatakan tabel. Sedangkan CSS lebih menitikberatkan pada bagaimana konten-konten tersebut ditampilkan oleh browser, termasuk bagaimana ukuran, jenis, warna, dan tata-letak tag-tag HTML tersebut terlihat.
6
So.. Taruhlah, web kita mempunyai artikel yang terdiri dari 5 heading. Kelima heading tersebut ingin diberi warna hijau. Jika dituliskan dengan tag-tag HTML, kelima heading tersebut akan tampak seperti berikut: <h1><font color=”green”>Heading Satu</font></h1> <h1><font color=”green”>Heading Dua</font></h1> <h1><font color=”green”>Heading Tiga</font></h1> <h1><font color=”green”>Heading Empat</font></h1> <h1><font color=”green”>Heading Lima</font></h1>
7
Dengan CSS, kita tidak perlu menuliskan tag <font color=”green”>…</font> secara berulang-ulang. Kelima heading dengan warna hijau tersebut dapat dideklarasikan satu kali saja dengan CSS menjadi h1 {color: green}. Dengan demikian semua elemen HTML yang menggunakan tag <h1>…</h1> akan berwarna hijau.
8
Keuntungan CSS Dapat di-update dengan cepat dan mudah, karena kita cukup mendefinisikan sebuah style-sheet global yang berisi aturan-aturan CSS tersebut untuk diterapakan pada seluruh dokumen-dokumen HTML pada halaman situs kita. User yang berbeda dapat mempunyai style-sheet yang berbeda pula. Ukuran dan kompleksitas document code dapat diperkecil.
9
Aturan Pengunaan CSS. Selector {property: value}
CSS secara umum disusun oleh tiga bagian yaitu, selector (elemen yang akan didefinisikan), property (atribut yang akan diubah) dan nilai sebagaimana berikut: Selector {property: value} Antara property dan nilai (value) dipisahkan dengan titik dua dan ditulis di antara dua kurung kurawal { dan }. Jika nilai berupa beberapa kata, gunakan tanda petik ganda: p {font-family: “sans serif”} Jika lebih dari satu property, pisahkan dengan titik-koma: p {background: green; text-align: center; color: red; font-family: “sans serif”;}
10
Example p { background: green; text-align: center; color: red;
font-family: “sans serif”; }
11
Cara Mengaplikasikan CSS pada File HTML
Ada tiga cara yang bisa digunakan untuk mengaplikasikan CSS pada file-file web.
12
INLINE Inline. Cara ini dilakukan dengan menuliskan kode-kode CSS satu per satu untuk setiap elemen HTML. Cara ini sebenarnya tidak dianjurkan karena ukuran file web akan lebih besar. Contoh penggunaanya adalah: <p style=”color: red; text-aign: left” >Paragrap ini berwarna merah dengan rata kiri</p> Penggunaan style dengan cara ini diawali dengan menuliskan tag html diikuti dengan style, tanda sama dengan (=) dan dua tanda kutip yang mengapit property-property dan nilai-nilai.
13
Internal Internal. Cara ini dilakukan dengan menyisipkan kode-kode CSS pada bagian <head> dan </head>. Kode-kode CSS tersebut diawali dengan penulisan <style type=”text/css”> dan diakhiri dengan </style> Penulisannya seperti ini:
14
<html> <head>
<html> <head> <title>Contoh penggunaan CSS internal</title> <style type=”text/css”> p { color: red; } a { color: blue; } </style> </head> <body> … … </body> </html>
15
Contoh…
16
Tampilan Browser
17
Eksternal Eksternal. Cara ketiga ini yang paling sering dilakukan dan dianjurkan. File CSS disimpan secara terpisah dengan ekstensi “.css” (tanda kutip untuk penjelasan). Cara ini dilakukan dengan pertama-tama membuat sebuah file CSS tersediri. Dalam file CSS tersebut kita mendefinisikan dan mendeklarasikan semua selector, property, dan value yang akan diberlakukan untuk web kita, misalnya:
25
Terima Kasih Selamat Mencoba
Presentasi serupa
