Materi 3 - Css
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Materi 3 - Css as PDF for free.
More details
- Words: 435
- Pages: 12
Cascade Style Sheet (CSS) Euis Marlina, S.Kom Email : [email protected] http://euismarlina.edublogs.org HP : 08179424319
Pengantar
Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. Singkatnya dengan menggunakan Metode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat).
Dengan CSS, anda dapat lebih mempercantik tampilan web. Baik dari style teks, button, textfield, tabel dan lainlain.
Contoh : <STYLE TYPE="text/css">
B { color : lime } Artinya kode CSS di atas adalah: setiap teks yang ada di dalam tag B pada bagian body, maka warnanya akan berubah menjadi lime.
Ketentuan Dasar CSS
Setiap "Style Rule" atau peraturan/perintah CSS, terdiri dari dua elemen dasar yaitu : "selector" dan "declaration" "selector" biasanya adalah tag HTML (dalam hal ini B), sementara "declaration" adalah satu atau beberapa perintah/nilai dari css yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai css yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma.
Contoh <STYLE TYPE="text/css"> B { color: lime; text-decoration: underline; font-family: Arial }
Jenis Penempatan CSS
Di dalam tag HTML langsung Contoh CSS pada tag
Artinya code di atas yaitu, memanggil file global.css untuk dapat digunakan pada file tersebut.
Classes
CSS juga mengijinkan kita untuk menyatukan elemenelemen secara bersamaan didalam sebuah kelas(classes) dan menerapkannya aturan Style-Sheet kedalam sebuah class. Definisi class CSS ditandai dengan tanda titik sebelum nama class-nya.
Class CSS untuk TextField Contoh class LongText : /*setting textfield panjang*/ .LongText { background-color: #3399CC; border-width: 1; color: #ffffff; font-size: 9pt; font-family: Tahoma; border-color: #336699;
boder-style:ridge; width:220; height:22; }
Class CSS untuk Button Contoh
class dottedbutton :
/*setting button dgn border garis potong2*/ input.dottedbutton { font-size:10px; font-family:Verdana,sans-serif; font-weight:bold; color:#FFFFFF; width:200px; height:30px; background-color:#3399CC; border-style:dotted; }
Untuk menggunakan CSS button tadi, letakan pada tag button, sbb.
Sedangkan untuk menggunakan CSS textfiel tadi, letakan pada tag textfield, sbb.
CSS untuk Teks .judul{ font-family:Tahoma; font-size:10pt; font-weight:bold; } .teks{ font-family:Tahoma; color:black; font-size:9pt; }
Cara menggunakannya :
Pengantar
Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website. Singkatnya dengan menggunakan Metode CSS ini anda dengan mudah mengubah secara keseluruhan warna dan tampilan yang ada di situs anda, sekaligus memformat ulang situs anda (merubah secara cepat).
Dengan CSS, anda dapat lebih mempercantik tampilan web. Baik dari style teks, button, textfield, tabel dan lainlain.
Contoh : <STYLE TYPE="text/css">
B { color : lime } Artinya kode CSS di atas adalah: setiap teks yang ada di dalam tag B pada bagian body, maka warnanya akan berubah menjadi lime.
Ketentuan Dasar CSS
Setiap "Style Rule" atau peraturan/perintah CSS, terdiri dari dua elemen dasar yaitu : "selector" dan "declaration" "selector" biasanya adalah tag HTML (dalam hal ini B), sementara "declaration" adalah satu atau beberapa perintah/nilai dari css yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan kurung kurawal, dan perintah/nilai css yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma.
Contoh <STYLE TYPE="text/css"> B { color: lime; text-decoration: underline; font-family: Arial }
Jenis Penempatan CSS
Di dalam tag HTML langsung Contoh CSS pada tag
:
Di dalam file HTML Contoh : <STYLE TYPE="text/css"> B { color : lime }
Diletakkan di bagian atas sebelum tag body.
Di dalam file CSS tersendiri, yang mana satu file CSS ini dapat digunakan untuk semua file HTML yang ada.
Untuk menggunakan file CSS tersebut, tambahkan code berikut sebagai tanda untuk memanggil file CSS.
Artinya code di atas yaitu, memanggil file global.css untuk dapat digunakan pada file tersebut.
Classes
CSS juga mengijinkan kita untuk menyatukan elemenelemen secara bersamaan didalam sebuah kelas(classes) dan menerapkannya aturan Style-Sheet kedalam sebuah class. Definisi class CSS ditandai dengan tanda titik sebelum nama class-nya.
Class CSS untuk TextField Contoh class LongText : /*setting textfield panjang*/ .LongText { background-color: #3399CC; border-width: 1; color: #ffffff; font-size: 9pt; font-family: Tahoma; border-color: #336699;
boder-style:ridge; width:220; height:22; }
Class CSS untuk Button Contoh
class dottedbutton :
/*setting button dgn border garis potong2*/ input.dottedbutton { font-size:10px; font-family:Verdana,sans-serif; font-weight:bold; color:#FFFFFF; width:200px; height:30px; background-color:#3399CC; border-style:dotted; }
Untuk menggunakan CSS button tadi, letakan pada tag button, sbb.
Sedangkan untuk menggunakan CSS textfiel tadi, letakan pada tag textfield, sbb.
CSS untuk Teks .judul{ font-family:Tahoma; font-size:10pt; font-weight:bold; } .teks{ font-family:Tahoma; color:black; font-size:9pt; }
Cara menggunakannya :
