CSS Cascading Style Sheet

Please download to get full document.

View again

of 29
0 views
PDF
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Document Description
CSS Cascading Style Sheet Pemrograman Web 1 Genap Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan
Document Share
Document Transcript
CSS Cascading Style Sheet Pemrograman Web 1 Genap Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan halaman web serta memisahkan antara tampilan dan konten halaman web. Bukanlah suatu keharusan dalam membuat web, akan tetapi menggunakan CSS akan membuat tampilan web menjadi lebih menarik. Pengenalan CSS Dapat digunakan untuk banyak halaman sekaligus. Style style banyak dan terus berkembang. Telah disupport di banyak browser dan telah distandarkan oleh World Wide Consortium (W3C). Namun terkadang perlu penyesuaian CSS untuk browser tertentu. Karena perbedaan cara membaca CSS pada masing-masing browser. Struktur CSS Perintah CSS terdiri atas 2 komponen, yakni Selector & Declaration. Selector berfungsi untuk memberi tahu browser bahwa pada elemen mana rule CSS diterapkan. Selector dapat berupa elemen HTML, selector class atau selector id. Declaration merupakan aturan CSS yang diterapkan, terdiri atas property dan value. Struktur CSS property value h1 {color:blue;} selector declaration Aturan Penulisan CSS Penulisan tag CSS dapat dilakukan dengan 2 cara, dengan hasil yang sama, yaitu : 1. Menjadi satu dengan dokumen HTML. Menggunakan tag style (internal style) Case to case (inline style) 2. File CSS tersendiri, terpisah dari dokumen HTML (external style / style sheet global) Menggunakan tag link Aturan Penulisan CSS (Internal Style) Menggunakan tag style Kode CSS diletakkan diantara tag head dari dokumen HTML. contoh : Aturan Penulisan CSS (Inline Style) Menambahkan langsung kode CSS kedalam tag HTML. contoh : Aturan Penulisan CSS (External Style) Menggunakan tag link untuk merujuk ke file css khusus. contoh : Komentar dalam CSS Komentar digunakan untuk memudahkan dalam mengingat kembali script yang telah ditulis. Seperti halnya bahasa pemrograman yang lain, pada CSS penulisan komentar dilakukan dengan menyisipkan tanda /* dan diakhiri dengan */ contoh : CSS Syntax Sintaks CSS CSS sintaks standar body {color:black} Jika value lebih dari satu kata gunakan tanda kutip p {font-family: sans serif } Jika lebih dari satu properti untuk sebuah selektor p {text-align:center;color:red} atau, agar lebih mudah dilihat bisa ditulis seperti ini: p { } text-align:center; color:black; font-family:arial Grouping Untuk mempersingkat penulisan, CSS juga memungkinkan untuk melakukan grouping pada selector-selector yang memiliki property yang sama. contoh: h1 { color:green; } h3 { color:green; } h5 { color:green; } p { color:green; } di grouping menjadi: h1,h3,h5,p { color:green; } CSS Class Selector Berfungsi untuk memberikan style yang berbeda pada sebuah elemen HTML Diawali dengan menambahkan tanda. (titik) pada file css Pada file HTML ditambahkan property class untuk memanggil selector tersebut. Satu elemen HTML dapat memanggil lebih dari satu class contoh: style.css.merah {color:red;}.right {text-align:right;}.left {text-align:left;} CSS Class Selector contoh.html CSS ID Selector Berfungsi juga untuk memberikan style yang berbeda pada sebuah elemen HTML Diawali dengan menambahkan tanda # pada file css Pada file HTML ditambahkan property id untuk memanggil selector tersebut. Penulisan id tidak boleh diawali dengan angka Satu elemen HTML hanya boleh menggunakan satu id contoh: style.css #merah {color:red;} #right {text-align:right;} #left {text-align:left;} CSS ID Selector contoh.html CSS Background Sebuah property CSS yang berfungsi untuk memanipulasi background dari elemen HTML. Terdapat beberapa property background: background-color background-image background-repeat background-attachment background-position CSS Background : background-color Background Color warna bisa ditentukan dengan menggunakan: nama: red, green, orange, dll nilai RGB: rgb(255,0,0), rgb(0,255,0), rgb(255,100,0), dll Nilai Heksa: # ff0000, #00ff00, #ff6600, dll contoh style.css body {background-color:aliceblue;} h1 {background-color:rgb(0,255,0);} p {background-color:#cccc66;} div {background-color:#cc9966;} CSS Background : background-color contoh.html CSS Background : background-image Background Image berfungsi untuk menentukan gambar yang akan digunakan untuk background sebuah elemen secara otomatis akan mengulang gambar agar memenuhi elemen yang bersangkutan contoh style.css body {background-image:url(../images/paper.gif);} CSS Background : background-repeat Background Repeat property yang mendukung penggunaan elemen background-image memiliki 3 buah nilai yang berbeda: repeat-x: mengulang gambar terhadap sumbu-x repeat-y: mengulang gambar terhadap sumbu-y no-repeat: tidak mengulang gambar contoh style.css body { background-image:url(../images/gradient.png); background-repeat:repeat-x; } CSS Background : background-position Background Position property yang juga mendukung penggunaan elemen background-image memiliki nilai sebagai berikut: Nilai top left top center top right center left style.css center center center right bottom left bottom center bottom right Keterangan Apabila hanya satu value saja yang ditulis (mis: top ), maka value kedua-nya secara otomatis di-set menjadi center CSS Background : background-position contoh style.css body { background-image:url(../images/tree.png); background-repeat:no-repeat; background-position:top right; } atau bisa juga disingkat (shorthand) menjadi : body { background:url(../images/tree.png) no-repeat top right; } CSS Text Digunakan untuk memanipulasi teks Text Color body {color:blue;} h1 {color:#00ff00;} p {color:rgb(255,0,0);} Text Alignment h1 {text-align:center}.date {text-align:right}.main {text-align:justify} Text Indentation p {text-indent: 50px;} CSS Text Text Decoration a {text-decoration:none;} h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;} Text Transformation.hurufbesar {text-transform:uppercase;}.hurufkecil {text-transform:lowercase;}.hurufkapital {text-transform:capitalize;} CSS Font Font Families p {font-family: times New Roman,Arial,Serif} Font Style.normal {font-style:normal;}.italic {font-style:italic;} Font Size body {font-size:100%;} h1 {font-size:20px;} p {font-size:0.8em;} /* 1em = 16px */ Font Weight h1 {font-weight:normal;} p {font-weight:bold;} Referensi Salhazan Nasution, SKom., Pemrograman Web. Teknik Informatika Universitas Islam Indonesia. Terima Kasih Pertemuan berikutnya membahas CSS Lanjut.
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks