Cascading Style Sheet (CSS) pada HTML
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Cascading Style Sheet (CSS) pada HTML
2
Sub Pokok Bahasan
CSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS CSS properties
3
CSS?
Singkatan dari Cascading Style Sheet Merupakan suatu cara untuk memformat atau
membuat layout halaman web menjadi lebih menarik dan mudah dikelola.
Di dalamnya terdapat banyak style. CSS dapat dituliskan pada bagian <body>, <head>
suatu dokumen HTML atau diletakkan di sebuah file eksternal.
Perintah-perintah CSS dibatasi oleh tag <style> dan </style>
4
Contoh Sederhana
Tampilan:
Script HTML: <html> <head> <title>StyleSheet Sederhana </title> <style> h1 { font-family: verdana; color: red; text-align: center; } </style> </head> <body> <h1>StyleSheet Sederhana<h1> </body> </html>
Style model lama yang tidak disarankan
<html> <head> <title>StyleSheet Sederhana </title> </head> <body> <h1 style= "font-family: verdana; color: red; text-align: center;"> StyleSheet Sederhana<h1> </body> </html>
5
6
Selector
Adalah nama yang diberikan untuk setiap style berbeda yang dibuat. Di dalam style didefinisikan bagaimana setiap selector akan bekerja (font, color dan lain-lain.). Kemudian di dalam bagian body halaman web, selector tersebut dipanggil untuk mengaktifkan style yang telah didefinisikan.
Jenis-jenis Selector: • Selector HTML • Selector Class • Selector ID
7
Selector HTML
Digunakan untuk mendefinisikan style yang berhubungan dengan tag HTML, melakukan redefinisi tag normal HTML
Syntax: SelectorHTML {Properti:Nilai;}
Script HTML: <html> <head> <title>Selector HTML</title> <style type="text/css"> b {font-family:arial; font-size:14px; color:red} </style> </head> <body> <!-- memanggil selector b yang me-redefinisi-kan <b> --> <b>Tulisan ini tebal karena menggunakan style CSS</b> </body> </html>
Tampilan:
8
Selector Class Digunakan untuk mendefinisikan style yang dapat
dipakai tanpa melakukan redefinisi tag HTML. Syntax: ClassSelector {Properti:Nilai;}
Script HTML: <html> <head> <title>Selector Class</title> <style type="text/css"> .headline {font-family:arial; font-size:14px; color:red} </style> </head> <body> <b class="headline"> Tulisan ini tebal karena pengaruh selector class headline </b><br> <i class="headline"> Tulisan ini dicetak miring karena selector class headline </i> </body> </html>
Tampilan:
9
SPAN dan DIV
Dua tag yang sering dikombinasikan dengan selector class adalah <SPAN> dan <DIV>
Tag <SPAN> adalah "inline-tag" dalam HTML, berarti tidak ada pergantian baris (line break) yang disisipkan sebelum atau setelah penulisannya.
Tag <DIV> adalah "block tag" dalam HTML, berarti pergantian baris secara otomatis disisipkan untuk memberikan jarak antara blok yang dibuat dengan teks atau blok lain sebelum dan sesudahnya (seperti tag <P> atau <TABLE>).
Tag <DIV> sering digunakan untuk implementasi layer karena layer merupakan blokblok informasi terpisah. Tag <DIV> merupakan pilihan yang tepat saat membuat layer pada halaman web.
10
<html > <head> <title>Box Dimensions</title> <style type = "text/css"> div { background-color: #ffccff; margin-bottom: .5em } </style> </head> <body> <div style = "width: 20%">Here is some text that goes in a box which is set to stretch across twenty percent of the width of the screen.</div> <div style = "width: 80%; text-align: center"> Here is some CENTERED text that goes in a box which is set to stretch across eighty percent of the width of the screen.</div>
Elements yang terletak antara div tags di set pada baris yang sama dengan margin
di atas dan dibawahnya
atribut width dan height pada style membuat user dapat menyatakan
persentase lebar dan tinggi layar yang ditempati oleh elemen.
11
Selector ID
Digunakan untuk mendefinisikan style yang berhubungan dengan suatu object memanfaatkan ID unik, biasa digunakan saat bekerja dengan layer
Syntax: #IDSelector {Properti:Nilai;}
Tampilan:
12
Script HTML: <html> <head> <title>Selector ID</title> <style type="text/css"> #layer1 {position:absolute; left:100;top:100; z-index:2} #layer2 {position:absolute; left:130;top:120; z-index:1} </style> </head> <body> <div id="layer1"> <table border="1" bgcolor="cyan"> <tr> <td>Ini adalah layer 1<br>Diletakkan pada posisi (100,100)</td></tr> </table> </div> <div id="layer2"> <table border="1" bgcolor="yellow"> <tr><td>Ini adalah layer 2<br>Diletakkan pada posisi (130,120)</td></tr> </table> </div> </body> </html>
13
Pengelompokan Selector
Untuk beberapa style yang sebagian properti-nya memiliki nilai yang sama, misalnya jenis font yang sama; mendefinisikan font tidak perlu dilakukan satu demi satu untuk setiap selector. Pendefinisian dapat dikelompokkan, dengan cara melewatkan font ke semua selector dalam satu kali.
14
Sebelum pengelompokan: .headlines { font-family:arial; color:black; background:yellow; font-size:14pt; } .sublines { font-family:arial; color:black; background:yellow; font-size:12pt; } .infotext { font-family:arial; color:black; background:yellow; font-size:10pt; }
Setelah pengelompokan: .headlines, .sublines, .infotext { font-family:arial; color:black; background:yellow; } .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size: 10pt;}
Contoh Pengelompokan Selector
15
Mekanisme Mengaplikasikan CSS
1. Style didefinisikan dalam tag HTML (tag tunggal)
2. Style didefinisikan di dalam bagian <head> dan diaplikasikan untuk seluruh dokumen HTML tersebut.
3. Style didefinisikan di file eksternal yang selanjutnya dapat digunakan oleh dokumen HTML manapun dengan memasukkan CSS tersebut dalam dokumen yang diinginkan melalui URI.
16
Style dalam tag tunggal
CSS mendefinisikan tag tunggalnya hanya dengan menambahkan style seperti style="styledefinition:styleattribute;"
Script HTML: <html> <head> <title>Penggunaan CSS Tag Tunggal</title> </head> <body> Ini adalah contoh <b style="font-size:16px;color:blue;"> bold </b> dengan menggunakan CSS. </body> </html>
Tampilan:
17
Style untuk 1 dokumen HTML
CSS dapat didefinisikan untuk satu halaman secara keseluruhan hanya dengan menambahkan suatu definisi style pada bagian head dokumen HTML.
Tampilan:
18
Script HTML: <html> <head> <title>Penggunaan CSS untuk satu halaman Web</title> <style type="text/css"> .headlines, .sublines, .infotext { font-family:arial; color:blue; background:cyan; font-weight:bold;} .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size:10pt;} </style> </head> <body> <span class="headlines">Selamat Datang</span><br> <div class="sublines"> Ini adalah contoh penggunaan web yang menggunakan CSS.<br> Contoh ini menggunakan CSS untuk satu halaman Web.<br> Pendefinisian style cukup dilakukan di tag head.<br> </div> <br> <table border="2"><tr> <td class="sublines"> Style juga dapat dilakukan dalam elemen table. </td></tr> </table> <br> <hr> <div class="infotext"> contoh penggunaan CSS untuk satu halaman </div> <hr> </body> </html>
19
Style dalam file eksternal
CSS dapat didefinisikan untuk semua halaman hanya dengan menulis definisi CSS di dalam sebuah file teks yang selanjutnya dirujuk oleh setiap halaman web yang akan menggunakannya. Dengan demikian jika suatu saat ingin dilakukan perubahan style yang berlaku untuk semua halaman Web maka yang diubah ada file teks eksternal tersebut.
20
Script HTML: <html> <head> <title>Penggunaan CSS Eksternal</title> <link rel=stylesheet href="style.css" type="text/css"> </head> <body> <span class="headlines">Selamat Datang</span><br> <div class="sublines"> Ini adalah contoh penggunaan web yang menggunakan CSS.<br> Contoh ini menggunakan CSS Eksternal.<br> Pendefinisian pemanggilan style dilakukan dengan menggunakan tag link.<br> </div> <table border="2"><tr> <td class="sublines"> Style juga dapat dilakukan dalam elemen table. </td></tr> </table> <hr> <div class="infotext">contoh penggunaan CSS eksternal</div> <hr> </body> </html>
File style.css: .headlines, .sublines, .infotext { font-family:arial; color:blue; background:cyan; font-weight:bold; } .headlines {font-size:14pt;} .sublines {font-size:12pt;} .infotext {font-size:10pt;}
21
Elemen-elemen CSS
Font Text Color
22
Font
Digunakan untuk mengatur tingkah-laku huruf (font). Elemen ini mempunyai beberapa properti. Satu properti dapat mempunyai beberapa nilai.
23
Text
Element text akan membuat tampilan teks menjadi lebih menarik
24
Color
Elemen color yang digunakan untuk mengatur warna teks dan background halaman web
CSS Background Properties (1)
Property Description Values
background Property yang digunakan untuk menyeting semua backgroung property dalam sebuah deklarasi saja.
background-color background-image background-repeat background-attachment background-position
background-attachment Menentukan apakah background gambar fixed atau scroll
scroll fixed
background-color Menentukan warna background
color-rgb color-hex color-name transparent
CSS background properties digunakan untuk mengatur tampilan background pada sebuah elemen. Misalnya menentukan warna background, membuat background berupa gambar, dan menentukan posisi background.
CSS Background Properties (2) background-image menentukan gambar sebagai
background url none
background-position Menentukan posisi awal background yang berupa gambar
top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos
background-repeat Menentukan bagaimana background yang berupa gambar akan ditampilkan secara berulang
repeat repeat-x repeat-y no-repeat
CSS Text Properties (1)
Property Description Values color Menentukan warna text color letter-spacing Menentukan jarak spasi antar huruf normal
length unit text-align Perataan text dalam sebuah element left
right center justify
text-decoration Menambahkan dekorasi ke dalam text none underline overline line-through blink
CSS Text properties digunakan untuk mengatur tampilan text. Misalnya menentukan warna text, perataan text dan dekorasi text.
CSS Text Properties (2)
text-indent Memberikan indent pada baris pertama
length %
text-transform Menentukan bentuk huruf none capitalize uppercase lowercase
white-space Menentukan bagaimana white space akan ditangani
normal pre nowrap
word-spacing Menentukan jarak spasi antar kata normal length
CSS Font Properties (1)
Property Description Values font
Sebuah property singkat untuk menyeting semua properti untuk font dalam sebuah deklarasi
font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar
font-family
Menentukan jenis huruf family-name generic-family
CSS font properties digunakan untuk mengtur tampilan huruf. Misalnya menentukan jenis huruf, ukuran huruf, ketebalan dan style huruf.
CSS Font Properties (2) font-size
Menentukan ukuran huruf xx-small x-small small medium large x-large xx-large smaller larger length %
font-style
Menentukan style huruf normal italic oblique
font-weight
Menentukan ketebalan huruf normal bold bolder lighter
CSS Border Properties (1)
Property Description Values border Digunakan untuk menentukan property
border(atas, kiri, kanan, bawah) dalam satu deklarasi saja
border-width border-style border-color
border-bottom Digunakan untuk menentukan property border bagian bawah dalam satu deklarasi saja
border-bottom-width border-style border-color
border-bottom-color Menentukan warna border bawah border-color border-bottom-style Menentukan style border bawah border-style border-bottom-width Menentukan lebar border bawah thin
medium thick length
CSS border properties digunakan untuk mengatur border di setiap elemen. Misalnya saja warna border, ketebalan border dan style border.
CSS Border Properties (2)
border-color Menentukan warna keempat border color border-left Digunakan untuk menentukan property
border bagian kiri dalam satu deklarasi saja
border-left-width border-style border-color
border-left-color Menentukan warna border kiri border-color border-left-style Menentukan style border kiri border-style border-left-width Menentukan lebar border kiri thin
medium thick length
border-right Digunakan untuk menentukan property border bagian kanan dalam satu deklarasi saja
border-right-width border-style border-color
border-right-color Menentukan warna border kanan border-color border-right-style Menentukan style border kanan border-style
CSS Border Properties (3) border-right-width Menentukan lebar border kanan thin
medium thick length
border-style Menentukan style dari keempat border sekaligus
None / hidden / dotted / dashed / solid / double / groove / ridge /inset / outset
border-top Digunakan untuk menentukan property border bagian atas dalam satu deklarasi saja
border-top-width border-style border-color
border-top-color Menentukan warna border atas border-color
border-top-style Menentukan style border atas border-style
border-top-width Menentukan ukuran border atas thin / medium / thick length
border-width Menentukan ukuran dari keempat border sekaligus
thin / medium / thick length
CSS Margin Properties CSS margin properties digunakan untuk mengatur jarak (spasi) di sekitar elemen.
Property Description Values margin Mensatur margin properti untuk kempat sisi
(atas, kanan, bawah, kiri) sekaligus margin-top margin-right margin-bottom margin-left
margin-bottom Mengatur margin bawah auto length %
margin-left Mengatur margin kiri auto length %
margin-right Mengatur margin kanan auto length %
margin-top Mengatur margin atas Auto / length / %
CSS Padding Properties CSS padding properties digunakan untuk menentukan spasi antara border elemen
dengan isi element.
Property Description Values padding Menentukan empat padding sebuah elemen
(atas, kanan, bawah, kiri) sekaligus padding-top padding-right padding-bottom padding-left
padding-bottom Menentukan padding bawah sebuah elemen length %
padding-left Menentukan padding kiri sebuah elemen length %
padding-right Menentukan padding kanan sebuah elemen length %
padding-top Menentukan padding atas sebuah elemen length %
CSS List Properties (1)
CSS list properties digunakan merubah jenis list, memberi gambar sebagai pengganti bullet, dll.
Property Description Values list-style Digunakan untuk menentukan semua list
properties sekaligus. list-style-type list-style-position list-style-image
list-style-image Menetapkan image sebagai penanda list none url
list-style-position Menentukan tempat penanda list item inside outside
CSS List Properties (2)
list-style-type Menentukan tipe penanda list item none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin
38
Summary
CSS (Cascading Style Sheet) digunakan untuk memformat atau membuat layout halaman web menjadi lebih menarik dan mudah dikelola.
Ada 3 mekanisme untuk mengaplikasikan CSS, yaitu: Style didefinisikan dalam tag HTML (tag tunggal), di dalam bagian <head>, didefinisikan di file eksternal.
Elemen-elemen CSS terdiri dari Font, Text, Color dan Link
39
Daftar Pustaka
Chris Bates [2006]. Web Programming: Building Internet Applications, Third Edition, John Wiley & Sons Ltd, England.
Sidik dan Husni [2012]. Pemrograman Web dengan HTML, Penerbit Informatika, Bandung.
Sebesta, R.W. [2002], Programming the World Wide Web, Addison Wesley.
Related Documents
