CSS (Cascading Style Sheets)

Ukuran: px

Mulai penontonan dengan halaman:

Download "CSS (Cascading Style Sheets)"

Hengki Santoso
7 tahun lalu
Tontonan:

1 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; > <h2 style= font-family:arial; >Judul Artikel 1</h2> <p>lorem ipsum doler si amet.</p>... 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. 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.

2 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.

3 Latihan #1 Menggunakan tag style <!DOCTYPE html> <title>menggunakan tag Style`</title> <body style="width:750px; margin:0 auto;"> <section style="padding:10px"> <article style="margin-bottom:10px; text-align:left;"> <h1>artikel Satu</h1> <p>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.</p> <article style="margin-bottom:10px; text-align:left;"> <h1>artikel Dua</h1> <p>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.</p> </section>

4 Latihan #2 Menggunakan CSS internal <!DOCTYPE html> <title>menggunakan tag Style`</title> body { width: 750px; margin: 0 auto; section{ padding: 10px; article{ margin-bottom: 10px; text-align: left; <section> <article> <h1>artikel Satu</h1> <p>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.</p> <article> <h1 style="text-align:center;">artikel Dua</h1> <p>pada artikel ini, style internal di-override dengan tag style.</p> </section>

5 Latihan #3 Mendefinisikan background halaman body { background: url("img_flwr.gif") no-repeat fixed center center <p>ini adalah contoh menggunakan background</p>

6 Latihan #4 Penggunaan selector class dan pengaturan font 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 px arial.teballl {font-family: Arial; <section> <h1 class="teballl">tulisan ini hanya dikenakan style class teballl.</h1> <p class="normal"> Perhatikan paragraf ini. Paragraf ini menggunakan ukuran font sesuai dengan ukuran setting browser.</p> <p class="tebal"> Bandingkan dengan paragraf diatasnya. Paragraf ini menggunakan ukuran font 2x ukuran setting browser</p> <p class="teballl"> Bandingkan yang ini juga. Selain dikenakan class teballl, tulisan ini juga dikenakan p.class teballl. Ukuran fontnya menggunakan piksel</p> <p class="lengkap">paragraf dengan semua atribut font dimasukkan</p> </section>

7 Latihan #5 Penggunaan selector div dan margin serta padding #wrap{ margin:0 auto; width: 750px; #box1{ margin: 10px; border: solid 1px #000; #box2{ margin: 10px; padding: 5px; border: solid 1px red; <div id="wrap"> <div id="box1"> Bagian ini menggunakan margin ke semua arah sebesar 10px tanpa padding. </div> <div id="box2"> Bagian ini menggunakan margin dan padding sebesar 10px; </div> </div>

8 Latihan #6 Penggunaan style pada link 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 <p>gerakkan pointer mouse di atas link-link di bawah ini untuk membuat link tersebut berubah tampilannya.</p> <p><a class="one" href="hlm1.htm">mengubah properti color</a></p> <p><a class="two" href="hlm2.htm"> Mengubah properti font-size</a></p> <p><a class="three" href="hlm3.htm"> Mengubah properti background-color</a></p> <p><a class="four" href="hlm4.htm"> Mengubah properti font-family</a></p> <p><a class="five" href="hlm5.htm"> Mengubah properti text-decoration</a></p>

dokumen-dokumen yang mirip

MODUL 3 STYLE SHEET RINGKASAN

MODUL 3 STYLE SHEET RINGKASAN Setelah semua yang Anda ketahui tentang dasar pembuatan halaman web, kini tiba saatnya untuk membuat halaman web Anda tampil lebih meyakinkan. Untuk keperluan tersebut, Anda