CSS (Cascading Style Sheets) Instruktur: Arif Nurwidyantoro
Intro Cascading Style Sheets (CSS) digunakan untuk mendefinisikan bagaimana sebuah elemen HTML ditampilkan. Sebuah elemen HTML dapat ditampilkan dengan cara yang berbeda-beda dengan pendefinisian style yang berbeda-beda. Elemen style dalam spesifikasi CSS sangat banyak, dalam materi ini akan didefinisikan beberapa elemen saja. Pendefinisian elemen CSS dapat dilakukan dengan beberapa cara, yaitu: 1. Menggunakan atribut style dalam tag HTML Dalam tag HTML, ada sebuah atribut yang dapat digunakan untuk mendefinisikan style. Tag HTML yang memiliki pendefinisian atribut style akan membatalkan style yang didefinisikan menggunakan cara internal dan eksternal (yang akan kita bahas selanjutnya). Berikut adalah contoh menggunakan atribut style dalam tag HTML. ... <article style=”text-align:left; margin-bottom:20px;”>
Judul Artikel 1
Lorem ipsum doler si amet.
...
Pada contoh di atas, kita mendefinisikan style untuk tag article menggunakan perataan kiri dengan margin bawah sebesar 20 piksel. Kemudian, pada tag h2, kita definisikan style menggunakan jenis font Arial. 2. Menggunakan internal CSS Definisi CSS dapat kita lakukan secara terpisah menggunakan tag style yang didefinisikan di dalam tag head. Berikut adalah contoh menggunakan CSS secara internal. <style type="text/css"> h1 {color:red;} p {color:blue;}
Pada contoh di atas, kita mendefinisikan header h1 dengan warna merah dan paragraf p dengan warna biru. 3. Menggunakan eksternal CSS Selain kedua cara di atas, definisi CSS dapat kita lakukan pada file terpisah menggunakan tag link. Ini akan kita bahas pada pertemuan selanjutnya.
Syntax CSS Sintaks yang digunakan dalam CSS terdiri atas dua bagian, yaitu selektor dan deklarasi. • •
Selector, biasanya berupa elemen HTML atau indikator lain yang ingin diberi style Deklarasi berisi elemen-elemen style yang ingin digunakan. Deklarasi terdiri atas property dan value. Property berisikan style yang akan digunakan, sedangkan value berisikan nilai untuk property tersebut.
Kedua bagian sintaks ini digunakan dalam implementasi internal dan eksternal CSS, sedangkan pada implementasi CSS menggunakan tag style, hanya deklarasi elemen saja yang digunakan. Berikut adalah contoh sintaks CSS. h1 {font-size:12px; font-family: Arial}
Pada contoh di atas, h1 merupakan elemen yang akan diberikan style. Font-size dan font-family merupakan property style dari h1 yang akan diubah nilainya dengan nilai 12px dan Arial.
Selector CSS Selector pada sintaks CSS bisa didefinisikan ke tiga buah elemen sebagai berikut: • • •
Elemen HTML, selector diisikan dengan elemen HTML yang ingin diberikan style. Id, selector diisikan dengan elemen HTML dengan id yang ingin diberikan style. Class, selector diisikan dengan elemen HTML dengan class yang ingin diberikan style.
Latihan #1 Menggunakan tag style
Menggunakan tag Style` <section style="padding:10px"> <article style="margin-bottom:10px; text-align:left;">
Artikel Satu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit ligula dictum purus condimentum vel pulvinar mauris porttitor. Fusce et mi id enim aliquam egestas in at turpis.
<article style="margin-bottom:10px; text-align:left;">
Artikel Dua
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit ligula dictum purus condimentum vel pulvinar mauris porttitor. Fusce et mi id enim aliquam egestas in at turpis.
Latihan #2 Menggunakan CSS internal
Menggunakan tag Style` <style type="text/css"> body { width: 750px; margin: 0 auto; } section{ padding: 10px; } article{ margin-bottom: 10px; text-align: left; } <section> <article>
Artikel Satu
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit ligula dictum purus condimentum vel pulvinar mauris porttitor. Fusce et mi id enim aliquam egestas in at turpis.
<article>
Artikel Dua
Pada artikel ini, style internal di-override dengan tag style.
Latihan #3 Mendefinisikan background halaman <style type="text/css"> body { background: url("img_flwr.gif") no-repeat fixed center center }
Ini adalah contoh menggunakan background
Latihan #4 Penggunaan selector class dan pengaturan font <style type="text/css"> p.normal { font-weight: normal; font-size: 1em; } p.tebal { font-weight: bold; font-size: 2em; } p.teballl { font-weight: 900; font-family: monospace; font-size: 15px; } p.lengkap { font: italic small-caps 900 12px arial } .teballl {font-family: Arial;} <section>
Tulisan ini hanya dikenakan style class teballl.
Perhatikan paragraf ini. Paragraf ini menggunakan ukuran font sesuai dengan ukuran setting browser.
Bandingkan dengan paragraf diatasnya. Paragraf ini menggunakan ukuran font 2x ukuran setting browser
Bandingkan yang ini juga. Selain dikenakan class teballl, tulisan ini juga dikenakan p.class teballl. Ukuran fontnya menggunakan piksel
Paragraf dengan semua atribut font dimasukkan
Latihan #5 Penggunaan selector div dan margin serta padding <style type="text/css"> #wrap{ margin:0 auto; width: 750px; } #box1{ margin: 10px; border: solid 1px #000; } #box2{ margin: 10px; padding: 5px; border: solid 1px red; }
Bagian ini menggunakan margin ke semua arah sebesar 10px tanpa padding.
Bagian ini menggunakan margin dan padding sebesar 10px;
Latihan #6 Penggunaan style pada link <style type="text/css"> a:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} a.four:visited {color: #0000ff} a.four:hover {font-family: fixedsys} a.five:visited {color: #0000ff; text-decoration: line-through} a.five:hover {text-decoration: overline}
Gerakkan pointer mouse di atas link-link di bawah ini untuk membuat link tersebut berubah tampilannya.
Mengubah properti color
Mengubah properti font-size
Mengubah properti background-color
Mengubah properti font-family
Mengubah properti text-decoration
