Desain Web 2: Pertemuan Keempat Selective Styling

Materi kuliah Desain Web,Materi kuliah Desain Web,Teknik Informatika FTUPTeknik Informatika FTUP

Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi

Desain Web IIDesain Web II

Selective StylingSelective StylingPertemuan ke-4Pertemuan ke-4



AgendaAgenda

Pohon Silsilah Pohon Silsilah ElemenElemen

Mendefinisikan Mendefinisikan Style berdasarkan Style berdasarkan konteksnyakonteksnya

Pseudo-classPseudo-class Pseudo-elemenPseudo-elemen

Mendefinisikan Mendefinisikan style berdasarkan style berdasarkan atribut tagatribut tag

CSS3: Kueri mediaCSS3: Kueri media Properti turunanProperti turunan Deklarasi !Deklarasi !

importantimportant Menentukan urutan Menentukan urutan

cascadingcascading



Pohon Silsilah ElemenPohon Silsilah Elemen

Tag yang berada di dalam tag lain disebut Tag yang berada di dalam tag lain disebut sebagai tag bersarang (sebagai tag bersarang (nested tagnested tag))

<h1><strong>BBM</strong> untuk <em>Android</em> Segera <h1><strong>BBM</strong> untuk <em>Android</em> Segera Hadir?</h1>Hadir?</h1>

Elemen luar Elemen luar <h1><h1> disebut disebut parentparent dan elemen dan elemen <strong><strong> disebut disebut childchild

Tag child disebut juga sebagai tag turunan Tag child disebut juga sebagai tag turunan ((descendantdescendant) dari tag ) dari tag parentparent

Dua tag yang berada di dalam Dua tag yang berada di dalam parentparent yang sama yang sama disebut disebut siblingssiblings

<strong><strong> adalah adalah preciding siblingpreciding sibling dari dari <em><em>

<em><em> adalah adalah adjacent siblingadjacent sibling dari dari <strong><strong>





Mendefinisikan Style Mendefinisikan Style berdasarkan konteksnyaberdasarkan konteksnya

Dengan adanya Dengan adanya style style kontekstual suatu kontekstual suatu elemen dapat ditampilkan secara khusus elemen dapat ditampilkan secara khusus berdasarkan berdasarkan parent parent dan dan siblingsibling-nya-nya

Sebagai contoh: suatu elemen tag memiliki Sebagai contoh: suatu elemen tag memiliki suatu style tertentu ketika berada di suatu style tertentu ketika berada di dalam header dan memiliki style yang dalam header dan memiliki style yang berbeda ketika berada di dalam sub berbeda ketika berada di dalam sub headerheader



Combinator SelectorsCombinator Selectors



Contoh1: a b cContoh1: a b c<!DOCTYPE html><!DOCTYPE html><html lang="id"><html lang="id"><head><head> <meta charset="utf8"><meta charset="utf8"> <title>BBM untuk Android segera Hadir?</title><title>BBM untuk Android segera Hadir?</title> <style type="text/css" media="all"><style type="text/css" media="all"> article.copy h1 em {article.copy h1 em { color: red;color: red; fontweight: bold;fontweight: bold; }} </style></style></head></head><body><body> <article class="copy"><article class="copy"> <h1><em>BBM</em> untuk Android Segera Hadir?</h1><h1><em>BBM</em> untuk Android Segera Hadir?</h1> <h2>by <em>Deliusno</em></h2><h2>by <em>Deliusno</em></h2> <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk perangkat lain selain BlackBerry. Kini, kabar tersebut tampaknya akan perangkat lain selain BlackBerry. Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> untuk Android!screenshot pertama <em>BBM</em> untuk Android! </p></p> </article></article></body></body></html></html>



Contoh1: a b cContoh1: a b c



Contoh2: a * bContoh2: a * b<!DOCTYPE html><!DOCTYPE html><html lang="id"><html lang="id"><head><head> <meta charset="utf8"><meta charset="utf8"> <title>BBM untuk Android segera Hadir?</title><title>BBM untuk Android segera Hadir?</title> <style type="text/css" media="all"><style type="text/css" media="all"> article.copy * em {article.copy * em { color: red;color: red; fontweight: bold;fontweight: bold; }} </style></style></head></head><body><body> <article class="copy"><article class="copy"> <h1><em>BBM</em> untuk Android Segera Hadir?</h1><h1><em>BBM</em> untuk Android Segera Hadir?</h1> <h2>by <em>Deliusno</em></h2><h2>by <em>Deliusno</em></h2> <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk perangkat lain selain BlackBerry. Kini, kabar tersebut tampaknya akan perangkat lain selain BlackBerry. Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> untuk Android!screenshot pertama <em>BBM</em> untuk Android! </p></p> </article></article></body></body></html></html>



Contoh2: a * bContoh2: a * b



Contoh3: a > bContoh3: a > b<!DOCTYPE html><!DOCTYPE html><html lang="id"><html lang="id"><head><head> <meta charset="utf8"><meta charset="utf8"> <title>BBM untuk Android segera Hadir?</title><title>BBM untuk Android segera Hadir?</title> <style type="text/css" media="all"><style type="text/css" media="all"> article.copy > p > em {article.copy > p > em { color: red;color: red; fontweight: bold;fontweight: bold; }} </style></style></head></head><body><body> <article class="copy"><article class="copy"> <h1><em>BBM</em> untuk Android Segera Hadir?</h1><h1><em>BBM</em> untuk Android Segera Hadir?</h1> <h2>by <em>Deliusno</em></h2><h2>by <em>Deliusno</em></h2> <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk perangkat lain selain BlackBerry. Kini, kabar tersebut tampaknya akan perangkat lain selain BlackBerry. Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> untuk Android!screenshot pertama <em>BBM</em> untuk Android! </p></p> </article></article></body></body></html></html>



Contoh3: a > bContoh3: a > b



Contoh4: a + bContoh4: a + b<!DOCTYPE html><!DOCTYPE html><html lang="id"><html lang="id"><head><head> <meta charset="utf8"><meta charset="utf8"> <title>BBM untuk Android segera Hadir?</title><title>BBM untuk Android segera Hadir?</title> <style type="text/css" media="all"><style type="text/css" media="all"> article.copy p + p em {article.copy p + p em { color: red;color: red; fontweight: bold;fontweight: bold; }} </style></style></head></head><body><body> <article class="copy"><article class="copy"> <h1><em>BBM</em> untuk Android Segera Hadir?</h1><h1><em>BBM</em> untuk Android Segera Hadir?</h1> <h2>by <em>Deliusno</em></h2><h2>by <em>Deliusno</em></h2> <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk perangkat lain selain BlackBerry.</p>perangkat lain selain BlackBerry.</p> <p>Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. <p>Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> untuk Android!</p>untuk Android!</p> <blockquote>Indonesia adalah konsumen <em>BBM</em> terbesar di Asia <blockquote>Indonesia adalah konsumen <em>BBM</em> terbesar di Asia Tenggara</blockquote>Tenggara</blockquote> <p>Peluang bagi developer untuk membuat aplikasi <em>BBM</em> <p>Peluang bagi developer untuk membuat aplikasi <em>BBM</em> sebanyakbanyak karena pasar yang besar.</p>sebanyakbanyak karena pasar yang besar.</p> </article></article></body></body></html></html>



Contoh4: a + bContoh4: a + b



Contoh5: a ~ bContoh5: a ~ b<!DOCTYPE html><!DOCTYPE html><html lang="id"><html lang="id"><head><head> <meta charset="utf8"><meta charset="utf8"> <title>BBM untuk Android segera Hadir?</title><title>BBM untuk Android segera Hadir?</title> <style type="text/css" media="all"><style type="text/css" media="all"> article.copy p ~ p em {article.copy p ~ p em { color: red;color: red; fontweight: bold;fontweight: bold; }} </style></style></head></head><body><body> <article class="copy"><article class="copy"> <h1><em>BBM</em> untuk Android Segera Hadir?</h1><h1><em>BBM</em> untuk Android Segera Hadir?</h1> <h2>by <em>Deliusno</em></h2><h2>by <em>Deliusno</em></h2> <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau <p>Beberapa waktu lalu, tersiar sebuah kabar yang menyatakan kalau RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk RIM akan membagikan aplikasi BlackBerry Messenger (<em>BBM</em>) untuk perangkat lain selain BlackBerry.</p>perangkat lain selain BlackBerry.</p> <p>Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. <p>Kini, kabar tersebut tampaknya akan segera menjadi kenyataan. Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> Melalui websitenya, TechRadar menghadirkan screenshot pertama <em>BBM</em> untuk Android!</p>untuk Android!</p> <blockquote>Indonesia adalah konsumen <em>BBM</em> terbesar di Asia <blockquote>Indonesia adalah konsumen <em>BBM</em> terbesar di Asia Tenggara</blockquote>Tenggara</blockquote> <p>Peluang bagi developer untuk membuat aplikasi <em>BBM</em> <p>Peluang bagi developer untuk membuat aplikasi <em>BBM</em> sebanyakbanyak karena pasar yang besar.</p>sebanyakbanyak karena pasar yang besar.</p> </article></article></body></body></html></html>



Contoh5: a ~ bContoh5: a ~ b



Pseudo-ClassesPseudo-Classes

Banyak elemen HTML memiliki Banyak elemen HTML memiliki statestate khusus khusus yang dapat diberikan style secara bebas.yang dapat diberikan style secara bebas.

Contohnya elemen tag <a> yang memiliki Contohnya elemen tag <a> yang memiliki state:state:

link (normal)link (normal) visited (link sudah dikunjungi)visited (link sudah dikunjungi) hover, dan (ketika mouse pengunjung berada di atas hover, dan (ketika mouse pengunjung berada di atas

link)link) active (ketika mouse pengunjung mengklik link)active (ketika mouse pengunjung mengklik link)



Sintaks Sintaks Pseudo-ClassesPseudo-Classes

a:link { color: red; }

Selector Colon →Selector Colon → a:linka:link

:: titik dua diikuti oleh titik dua diikuti oleh linklink yang merupakan yang merupakan pseudo-classespseudo-classes



Styling LinksStyling Links

:link:link menetapkan tampilan link hypertext → menetapkan tampilan link hypertext →yang belum dipilihyang belum dipilih

:visited:visited menetapkan tampilan link hypertext → menetapkan tampilan link hypertext →yag sudah dikunjungi pengunjungyag sudah dikunjungi pengunjung

:hover:hover menetapkan tampilan link hypertext → menetapkan tampilan link hypertext →ketika tetikus tepat berada di atas link ketika tetikus tepat berada di atas link hypertexthypertext

:active:active menetapkan tampilan link hypertext → menetapkan tampilan link hypertext →ketika tetikus aktif mengklik/memilih link ketika tetikus aktif mengklik/memilih link tersebuttersebut



style-link.htmlstyle-link.html

<!DOCTYPE html><!DOCTYPE html><html lang="id"><html lang="id"><head><head> <meta charset="utf8"><meta charset="utf8"> <title>Styling Links?</title><title>Styling Links?</title> <style type="text/css" media="all"><style type="text/css" media="all">

@@importimport url(url(stylelink.cssstylelink.css);); </style></style></head></head><body><body> <navigation><navigation> <a href="combinatorselector1.html"><strong>Selector 1</strong></a><a href="combinatorselector1.html"><strong>Selector 1</strong></a> <a href="combinatorselector2.html"><strong>Selector 2</strong></a><a href="combinatorselector2.html"><strong>Selector 2</strong></a> <a href="combinatorselector3.html"><strong>Selector 3</strong></a><a href="combinatorselector3.html"><strong>Selector 3</strong></a> <a href="combinatorselector4.html"><strong>Selector 4</strong></a><a href="combinatorselector4.html"><strong>Selector 4</strong></a> <a href="combinatorselector5.html"><strong>Selector 5</strong></a><a href="combinatorselector5.html"><strong>Selector 5</strong></a> </navigation></navigation></body></body></html></html>



style-link.cssstyle-link.cssa {a { display: block;display: block; textdecoration: none;textdecoration: none; padding: 5px;padding: 5px; width: 200px; }width: 200px; }

a:link {a:link { color: rgb(255, 102, 102);color: rgb(255, 102, 102); borderbottom: 1px dotted rgb(255, 51, 5, 51);borderbottom: 1px dotted rgb(255, 51, 5, 51);}}

a:visited {a:visited { color: rgb(255, 153, 153);color: rgb(255, 153, 153); borderbottom: 1px dotted rgb(255, 235, 235); }borderbottom: 1px dotted rgb(255, 235, 235); }

a:hover {a:hover { color: rgb(255, 0, 0);color: rgb(255, 0, 0); borderbottom: 1px solid rgb(255, 0, 0); }borderbottom: 1px solid rgb(255, 0, 0); }

a:active {a:active { color: rgb(0, 0, 255);color: rgb(0, 0, 255); borderbottom: 1px solid rgb(0, 0, 255); }borderbottom: 1px solid rgb(0, 0, 255); }



Hasil Style-Link (Hasil Style-Link (HoverHover ))

Link yang sudah dikunjungiLink yang sudah dikunjungiLink yang sudah dikunjungiLink yang sudah dikunjungi

Link yang belum dikunjungiLink yang belum dikunjungiLink yang belum dikunjungiLink yang belum dikunjungi

Mouse berada di atas link Mouse berada di atas link ((hoverhover))

Mouse berada di atas link Mouse berada di atas link ((hoverhover))



Hasil Style-Link (Hasil Style-Link (ActiveActive ))

Link yang sudah dikunjungiLink yang sudah dikunjungiLink yang sudah dikunjungiLink yang sudah dikunjungi

Link yang belum dikunjungiLink yang belum dikunjungiLink yang belum dikunjungiLink yang belum dikunjungi

Mouse berada di atas link Mouse berada di atas link ((activeactive))

Mouse berada di atas link Mouse berada di atas link ((activeactive))



Styling untuk InteraksiStyling untuk Interaksi

:hover:hover menetapkan tampilan ketika → menetapkan tampilan ketika →tetikus berada di atas elemen; bukan tetikus berada di atas elemen; bukan hanya di elemen hanya di elemen <link><link> saja saja

:focus:focus dapat diterapkan pada elemen → dapat diterapkan pada elemen →yang bisa menerima fokus seperti yang bisa menerima fokus seperti elemen elemen field textfield text pada formulir pada formulir

:active:active sama seperti link, tetapi diset → sama seperti link, tetapi diset →ketika elemen diklik atau dipilihketika elemen diklik atau dipilih



style-interaction.htmlstyle-interaction.html

<!DOCTYPE html><!DOCTYPE html><html lang="id"><html lang="id"><head><head> <meta charset="utf8"><meta charset="utf8"> <title>Isi Formulir</title><title>Isi Formulir</title> <style type="text/css" media="all"><style type="text/css" media="all">

@@importimport url(url(styleinteraction.cssstyleinteraction.css);); </style></style></head></head><body><body> <form><form> <input type="text" value="First Name"><input type="text" value="First Name"> <input type="text" value="Last Name"><input type="text" value="Last Name"> <input type="text" value="eMail"><input type="text" value="eMail"> <input type="button" value="Search"><input type="button" value="Search"> </form></form></body></body></html></html>



style-interaction.cssstyle-interaction.cssinput {input { border: 3px solid rgb(153,153,153);border: 3px solid rgb(153,153,153); backgroundcolor: rgb(204,204,204);backgroundcolor: rgb(204,204,204); color: rgb(153,153,153);color: rgb(153,153,153); fontsize: 1.5em;fontsize: 1.5em; margin: 3px 0;margin: 3px 0; padding: 0 3px; }padding: 0 3px; }

input:hover {input:hover { bordercolor: rgb(204,153,153);bordercolor: rgb(204,153,153); color: rgb(102,102,102); }color: rgb(102,102,102); }

input:focus {input:focus { bordercolor: rgb(255,0,0);bordercolor: rgb(255,0,0); backgroundcolor: rgb(255,255,255);backgroundcolor: rgb(255,255,255); color: rgb(0,0,0);color: rgb(0,0,0); outline: none; }outline: none; }

input:active {input:active { color: rgb(255,0,0);color: rgb(255,0,0); bordercolor: rgb(255,0,0);bordercolor: rgb(255,0,0); backgroundcolor: rgb(0,0,0); }backgroundcolor: rgb(0,0,0); }



Hasil Style-InteractionHasil Style-Interaction



Memberi style elemen Memberi style elemen child child dengan Pseudo-Classesdengan Pseudo-Classes

:firstchild:firstchild mengatur tampilan elemen → mengatur tampilan elemen →selector jika elemen selector tersebut selector jika elemen selector tersebut adalah anak pertama dari ortunyaadalah anak pertama dari ortunya

:firstoftype:firstoftype mengatur tampilan → mengatur tampilan →elemen selector jika elemen selector elemen selector jika elemen selector tersebut adalah elemen pertama dari tersebut adalah elemen pertama dari ortunyaortunya

:nthchild(#):nthchild(#) mengatur tampilan → mengatur tampilan →elemen selector jika elemen selector elemen selector jika elemen selector tersebut anak ke-n dari ortunyatersebut anak ke-n dari ortunya




:nthoftype(#) :nthoftype(#) mengatur tampilan → mengatur tampilan →elemen selector jika elemen selector elemen selector jika elemen selector tersebut adalah elemen ke-n dari tersebut adalah elemen ke-n dari ortunyaortunya

:nthlastoftype(#):nthlastoftype(#) mengatur → mengatur →tampilan elemen selector jika elemen tampilan elemen selector jika elemen selector tersebut adalah elemen ke-n selector tersebut adalah elemen ke-n dari ortunya tetapi diambil dari belakangdari ortunya tetapi diambil dari belakang




:lastchild :lastchild mengatur tampilan elemen → mengatur tampilan elemen →selector jika elemen selector tersebut selector jika elemen selector tersebut adalah anak terakhir dari ortunyaadalah anak terakhir dari ortunya

:lastoftype :lastoftype mengatur tampilan → mengatur tampilan →elemen selector jika elemen selector elemen selector jika elemen selector tersebut adalah elemen terakhir dari tersebut adalah elemen terakhir dari ortunyaortunya



child-pseudo-classes.htmlchild-pseudo-classes.html

<!DOCTYPE html><!DOCTYPE html><html lang="id"><html lang="id"><head><head> <meta charset="utf8"><meta charset="utf8"> <title>Styling specific child with PseudoClasses</title><title>Styling specific child with PseudoClasses</title> <style type="text/css" media="all"><style type="text/css" media="all"> @@importimport url(url(childpseudoclasses.csschildpseudoclasses.css);); </style></style></head></head><body><body> <ol><ol> <li>BlackBerry</li><li>BlackBerry</li> <li>Nokia S60</li><li>Nokia S60</li> <li>Android Froyo</li><li>Android Froyo</li> <li>iOS5</li><li>iOS5</li> <li>MeeGo</li><li>MeeGo</li> </ol></ol></body></body></html></html>



child-pseudo-classes.csschild-pseudo-classes.css

body {body { margin: 0 50px;margin: 0 50px;}}

li:firstchild { fontsize: .875em; }li:firstchild { fontsize: .875em; }

li:firstoftype { color: red; }li:firstoftype { color: red; }

li:nthoftype(3) { fontsize: 1.5em }li:nthoftype(3) { fontsize: 1.5em }

li:nthlastoftype(2) { fontsize: 2em; }li:nthlastoftype(2) { fontsize: 2em; }

li:lastoftype { color: red; }li:lastoftype { color: red; }

li:lastchild { fontsize: 2.5em; }li:lastchild { fontsize: 2.5em; }



Tampilan WebTampilan Web



KeteranganKeterangan/* /* * mengatur tampilan li jika li adalah anak pertama dari ortunya* mengatur tampilan li jika li adalah anak pertama dari ortunya */*/li:firstchild { li:firstchild { fontsize: .875em;fontsize: .875em;}}

/*/* * mengatur tampilan li jika li adalah elemen pertama dari ortunya* mengatur tampilan li jika li adalah elemen pertama dari ortunya */*/li:firstoftype { li:firstoftype { color: red; color: red; }}

/*/* * mengatur tampilan li jika li adalah elemen ken dari ortunya* mengatur tampilan li jika li adalah elemen ken dari ortunya * pada contoh ini li adalah elemen ke3* pada contoh ini li adalah elemen ke3 */*/li:nthoftype(3) { li:nthoftype(3) { fontsize: 1.5em fontsize: 1.5em }}



KeteranganKeterangan/*/* * mengatur tampilan li jika li adalah elemen ken ortunga * mengatur tampilan li jika li adalah elemen ken ortunga * tetapi diurut dari elemen paling belakang* tetapi diurut dari elemen paling belakang */*/li:nthlastoftype(2) { li:nthlastoftype(2) { fontsize: 2em; fontsize: 2em; }}

/*/* * mengatur tampilan li jika li adalah elemen terakhir dari ortunya* mengatur tampilan li jika li adalah elemen terakhir dari ortunya */*/li:lastoftype { li:lastoftype { color: red; color: red; }}

/*/* * mengatur tampilan li jika li adalah anak terakhir dari ortunya* mengatur tampilan li jika li adalah anak terakhir dari ortunya */*/li:lastchild { li:lastchild { fontsize: 2.5em; fontsize: 2.5em; }}



Pseudo-ElementsPseudo-Elements

Pseudo-element adalah bagian unik atau Pseudo-element adalah bagian unik atau spesifik dari sebuah elemen – misalkan spesifik dari sebuah elemen – misalkan huruf pertama dari alinea atau baris huruf pertama dari alinea atau baris pertama dari alinea – yang dapat pertama dari alinea – yang dapat ditentukan tampilannyaditentukan tampilannya



pseudo-elemen.htmlpseudo-elemen.html

<article><article> <h1>Review Samsung PL210: 10x Zoom, Ramping, Murah</h1><h1>Review Samsung PL210: 10x Zoom, Ramping, Murah</h1> <h2>Oleh: Pramanajaya Tjokronegoro</h2><h2>Oleh: Pramanajaya Tjokronegoro</h2> <p><p> Zoom 10x? Ya, memang sulit dipercaya bahwa kamera ramping dari Zoom 10x? Ya, memang sulit dipercaya bahwa kamera ramping dari Samsung ini memiliki lensa berkekuatan zoom 10x. Lebih sulit dipercaya Samsung ini memiliki lensa berkekuatan zoom 10x. Lebih sulit dipercaya lagi adalah harganya yang hanya Rp2,1juta!lagi adalah harganya yang hanya Rp2,1juta! </p></p> <p><p> Kekuatan zoom tinggi memang tidak jarang ditemui pada kaemra saku Kekuatan zoom tinggi memang tidak jarang ditemui pada kaemra saku saat ini, tetapi biasanya bodi kameranya besar. Kalaupun ada kamera saat ini, tetapi biasanya bodi kameranya besar. Kalaupun ada kamera ramping yang berkekuatan zoom tinggi, biasanya harganya mahal. Oleh karena ramping yang berkekuatan zoom tinggi, biasanya harganya mahal. Oleh karena itu, Samsung PL210 sudah cukup menonjol di antara pesaing dalam kelasnya. itu, Samsung PL210 sudah cukup menonjol di antara pesaing dalam kelasnya. Coba kita lihat feature apa lagi yang dimilikinya.Coba kita lihat feature apa lagi yang dimilikinya. </p></p></article></article>



pseudo-elemen.csspseudo-elemen.css

article p {article p { fontsize: 16px;fontsize: 16px; lineheight: 24px;lineheight: 24px; color: rgb(102,102,102)color: rgb(102,102,102)}}

article p:firstoftype:firstletter {article p:firstoftype:firstletter { color: red;color: red; fontsize: 3em;fontsize: 3em; float: left;float: left; marginright: 5px; marginright: 5px; }}

article p:firstoftype:firstline {article p:firstoftype:firstline { fontsize: 1.25em;fontsize: 1.25em; fontweight: bold;fontweight: bold; color: rgb(0,0,0); color: rgb(0,0,0); }}





pseudo-elemenpseudo-elemen:before dan :after:before dan :after

Pseudo elemen :before dan :after dapat Pseudo elemen :before dan :after dapat digunakan untuk membuat digunakan untuk membuat content content yang yang muncul di atas atau di bawah selectormuncul di atas atau di bawah selector



before-after.htmlbefore-after.html

<article><article> <h1>Review Samsung PL210: 10x Zoom, Ramping, Murah</h1><h1>Review Samsung PL210: 10x Zoom, Ramping, Murah</h1> <h2>Oleh: Pramanajaya Tjokronegoro</h2><h2>Oleh: Pramanajaya Tjokronegoro</h2> <p><p> Zoom 10x? Ya, memang sulit dipercaya bahwa kamera ramping dari Zoom 10x? Ya, memang sulit dipercaya bahwa kamera ramping dari Samsung ini memiliki lensa berkekuatan zoom 10x. Lebih sulit dipercaya Samsung ini memiliki lensa berkekuatan zoom 10x. Lebih sulit dipercaya lagi adalah harganya yang hanya Rp2,1juta!lagi adalah harganya yang hanya Rp2,1juta! </p></p> <p><p> Kekuatan zoom tinggi memang tidak jarang ditemui pada kaemra saku Kekuatan zoom tinggi memang tidak jarang ditemui pada kaemra saku saat ini, tetapi biasanya bodi kameranya besar. Kalaupun ada kamera saat ini, tetapi biasanya bodi kameranya besar. Kalaupun ada kamera ramping yang berkekuatan zoom tinggi, biasanya harganya mahal. Oleh karena ramping yang berkekuatan zoom tinggi, biasanya harganya mahal. Oleh karena itu, Samsung PL210 sudah cukup menonjol di antara pesaing dalam kelasnya. itu, Samsung PL210 sudah cukup menonjol di antara pesaing dalam kelasnya. Coba kita lihat feature apa lagi yang dimilikinya.Coba kita lihat feature apa lagi yang dimilikinya. </p></p></article></article>



before-after.cssbefore-after.css

h1 {h1 { color: blue;color: blue;}}

h1:before {h1:before { content: url('icon_apple.jpg');content: url('icon_apple.jpg');}}

h1:after {h1:after { content: url('android_icon.png');content: url('android_icon.png');}}





Mendefinisikan Tampilan Mendefinisikan Tampilan dengan Atribut Tagdengan Atribut Tag

Sebuah selector dapat memiliki atribut. Sebuah selector dapat memiliki atribut. Atribut tersebut pun dapat didefinisikan Atribut tersebut pun dapat didefinisikan stylestyle-nya atau tampilannya-nya atau tampilannya

Contohnya elemen img memiliki atribut Contohnya elemen img memiliki atribut src dan titlesrc dan title



atribut.htmlatribut.html

<body><body> <navigation><navigation> <h2>About the Author</h2><h2>About the Author</h2> <a href="" title="Portfolio">Portfolio</a><a href="" title="Portfolio">Portfolio</a> <a href="index.html" title="Home">Home Page</a><a href="index.html" title="Home">Home Page</a> <a href="" title="contact email link">Email</a><a href="" title="contact email link">Email</a> <a href="" title="resumelink">Resume</a><a href="" title="resumelink">Resume</a> <a href="http://www.jasonspeaking.com" <a href="http://www.jasonspeaking.com" title="blog">JasonSpeaking</a>title="blog">JasonSpeaking</a> <a href="http://www.fluidwebtype.info" title="book">Fluid Web <a href="http://www.fluidwebtype.info" title="book">Fluid Web Typography</a>Typography</a> <a href="http://www.speakinginstyles.com" title="book">Speaking In <a href="http://www.speakinginstyles.com" title="book">Speaking In Styles</a>Styles</a> </navigation></navigation></body></body>



atribut.cssatribut.css/* mendefinisikan tampilan pada elemen a/* mendefinisikan tampilan pada elemen a * dengan atribut 'title' */* dengan atribut 'title' */a[title] { a[title] { display: block; color: rgb(0,0,0);display: block; color: rgb(0,0,0); fontsize: .8em;fontsize: .8em;}}

/* mendefinisikan tampilan pada elemen a/* mendefinisikan tampilan pada elemen a * dengan atribut 'title' yang* dengan atribut 'title' yang * memiliki value 'home'*/* memiliki value 'home'*/a[title="Home"] {a[title="Home"] { color: rgb(51,0,0);color: rgb(51,0,0); fontsize: 1em;fontsize: 1em;}}

/* mendefinisikan tampilan pada elemen a/* mendefinisikan tampilan pada elemen a * dengan atribut 'title' yang valuenya * dengan atribut 'title' yang valuenya * terdapat kata 'email' */* terdapat kata 'email' */a[title~="email"] { a[title~="email"] { color:rgb(102,0,0);color:rgb(102,0,0); fontsize: 1.2em;fontsize: 1.2em;}}



atribut.css (lanjutan)atribut.css (lanjutan)

/* mendefinisikan tampilan pada elemen a/* mendefinisikan tampilan pada elemen a * dengan atribut 'title' yang valuenya* dengan atribut 'title' yang valuenya * memiliki serangkaian kata dan kata * memiliki serangkaian kata dan kata * 'resume' terletak pertama kali */* 'resume' terletak pertama kali */a[title|="resume"] { a[title|="resume"] { color: rgb(153,0,0);color: rgb(153,0,0); fontsize: 1.4em;fontsize: 1.4em;}} /* mendefinisikan tampilan pada elemen a/* mendefinisikan tampilan pada elemen a * dengan atribut 'href' memiliki string* dengan atribut 'href' memiliki string * awal sama mutlak dengan 'http://'* awal sama mutlak dengan 'http://' */*/a[href^="http://"] {a[href^="http://"] { color: rgb(204,0,0);color: rgb(204,0,0); fontsize: 1.6em;fontsize: 1.6em;}}



atribut.css (akhir)atribut.css (akhir)

/* mendefinisikan tampilan pada elemen a/* mendefinisikan tampilan pada elemen a * dengan atribut 'href' memiliki string* dengan atribut 'href' memiliki string * akhir sama mutlak dengan 'info'* akhir sama mutlak dengan 'info' */ */ a[href$=".info"] {a[href$=".info"] { color: rgb(235,0,0);color: rgb(235,0,0); fontsize: 1.8em;fontsize: 1.8em;}}

/* mendefinisikan tampilan pada elemen a/* mendefinisikan tampilan pada elemen a * dengan atribut 'href' memiliki string* dengan atribut 'href' memiliki string * 'speakinginstyles' di mana saja pada* 'speakinginstyles' di mana saja pada * atribut value* atribut value */*/a[href*="speakinginstyles"] {a[href*="speakinginstyles"] { color: rgb(255,0,0); color: rgb(255,0,0); fontsize: 2em;fontsize: 2em;}}



??

Education

Desain Web 2: Pertemuan Keempat Selective Styling