Pemrograman Berbasis Web CSS D. Sinaga, M.Kom
Cascading Style Sheets (CSS) Konsep Dasar CCS CCS Property
CSS 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 disitus kita sekaligus memformat ulang situs kita. CSS ini telah distandarkan oleh World Wide Web Consortium (W3C) untuk digunakan diweb browser.
CSS Keuntungan CCS 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 berbedadapat mempunyai style-sheet yang berbeda pula. Ukuran dan kompleksitas document code dapat diperkecil.
CSS Secara Umum ada tiga bagian yaitu Selector (elemen yang akan didefinisikan) Properti (atribut yang akan diubah) Nilai Bentuk Umum : Selector{property: value}
CSS Aturan property dan nilai dipisahkan dengan titik dua (colon), contoh : Body {color: black} Jika nilai berupa beberapa kata, gunakan tanda petik ganda, contoh : P {font-family: “sans serif} Jika lebih dari satu property pisahkan dengan titik-koma (semi colon) contoh : P {text-align: center; color: red} Atau P { text-align:center; color: black; font-family: arial }
CSS Jika selector dikelompokkan, Contoh : H1, H2, H3, H4, H5, H6 { color: green; }
CSS Jika menggunakan attribute class (dalam definisi CSS). Contoh : P. Kanan{text-align:right} P. Kiri{text-align:left} Selanjutnya menulis sintak dalam dokumen html menggunakan definisi diatas yaitu : <p class=kanan>This paragraph will be right aligned</P> <p class=kiri> This paragraph will be left aligned</p>
CSS Jika menggunakan ID atribut #Kanan {text-align: right} Berikut ini sintak yang ditulis dalam dokumen html menggunakan definisi atribut di atas. Contoh : <p id=kanan>This paragraph will be right aligned</P> <H3 id=kanan> This paragraph will be right aligned too</P>
Style Sheet External File disimpan dalam sebuah file yang berekstension .css, dan dalam pendefinisian eksternal tidak diperlukan tag html. Contoh : body {background-color: yellow} h1 {font-size: 36pt} h2{color: blue} p{margin-left: 50px} (simpan file tersebut dengan nama ex1.css)
Style Sheet External Kemudian ketik file HTMLnya <!--coba_cssin.html--> <html> <head> <link rel =”stylesheet” type =”text/css” href=”ex1.css”> </head> <body> <h1> This Header is 36 pt <h1> <h2> This Header is Blue</h2> <p> This paragraph has a left margin of 50 pixels</p> </body> </html>
Style Sheet Internal Style sheet intermal biasanya dilakukan karena web page tertentu bersifat sangat unik sehingga membutuhkan definisi terpisah dibandingkan web page lainnya.
Style Sheet Internal Contoh : <!--coba_cssin1.html--> <head> <style type=“text/css”> Body {background-image: url (“../picture/backgrnd.gif”)} HR {color:sienna} P { font-size:11pt; margin-left:15px} </style> </head> <body> <p> This paragraph has left margin of 15 pixel and font size 11 pt</p> </body> </html>
Style Sheet Inline Suatu style inline hanya bisa digunakan pada lokasi yang sangat spesifik, sebenarnya penggunaan ini tidak dianjurkan karena dokumen menjadi lebih besar karena style didefinisikan satu persatu. Contoh : <!—coba_cssinline.html--> <html> <head> </head> <body> <p style=“color: sienna; margin-left: 20px”> This paragraph has inline style</p> </body> </html>
Multi Style Sheet Jika digunakan lebih dari definisi dari style sheet maka nilai yang tidak didefinisikan akan diinherit (diturunkan) dari style yang lebih general. Contoh : H3 { color: red; text-align: left; font-size: 8pt }
Multi Style Sheet <!—coba_cssmulti.html--> <html> <head> <link rel =“stylesheet” type=“text/css” href=“ex3.css”> <style type+”text/css”> H3 { text-align: right; font-size: 20pt } </style> </head> </body> <h3> This Header Inherit Font Color From ex3.css</h3> </html>