CSS Eksternal Instruktur: Arif Nurwidyantoro Definisi CSS, selain diletakkan dalam file yang sama dengan file HTML, dapat juga diletakkan pada file terpisah. Pernyataan untuk menyambungkan file HTML dengan file CSS yang berkaitan dapat dilakukan menggunakan tag link pada bagian tag head. Berikut adalah contoh tag link untuk menyambungkan file HTML dengan file CSS. <html> <head> <link rel="stylesheet" type="text/css" href="theme.css"> </head> <body>... <body> Pada contoh di atas, kita menyambungkan halaman HTML dengan file CSS yang bernama theme.css. Nama file CSS dapat kita rubah sesuka kita, asalkan didefinisikan dengan nama yang benar pada tag link.
Latihan #1 Halaman HTML (misal beri nama latihan1.html) <!DOCTYPE html> <html> <head> <title>html 5 Article</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrap"> <header> <h1>ini adalah bagian header</h1> </header> <nav> <ul> <li><a href="#">option 1</a></li> <li><a href="#">option 2</a></li> </ul> </nav> <section> <article> <h2>judul Artikel 1</h2> <p>ini adalah bagian article. Penggunaan struktur dalam dokumen tidak terlihat ketika ditampilkan menggunakan browser. Namun demikian, penggunaan struktur ini mengandung unsur semantik dan memudahkan dalam pembuatan style sheets.</p> </article> <article> <h2>judul Artikel 2</h2> <p>ini adalah bagian article yang berbeda dari article sebelumnya. Anggaplah ini adalah posting yang berbeda pada sebuah blog.</p> </article> </section> <aside> <h2>sidebar</h2> <p>ini adalah bagian aside. Gunakan aside untuk menuliskan hal-hal yang kurang penting, seperti layaknya sidebar.</p> </aside> <footer> Ini adalah bagian footer. </footer> </body> </html>
Stylesheet (beri nama style.css) body, html { margin:0; padding:0; color:#000; background:#a7a09a; #wrap { width:750px; margin:0 auto; background:#99c; header { padding:5px 10px; background:#ddd; nav { padding:5px 10px; background:#c99; nav ul { margin:0; padding:0; list-style:none; nav li { display:inline; margin:0; padding:0; section { float:left; width:480px; padding:10px; background:#9c9; aside { float:right;
width:230px; padding:10px; background:#99c; footer { padding:5px 10px; clear:both; background:#cc9; footer p{ margin: 0; h1{ margin:0; h2{ margin:0 0 1em;
Latihan #2 Menggunakan lebih dari satu stylesheet. Buat stylesheet di bawah ini dan beri nama font.css @import url(http://fonts.googleapis.com/css?family=average+sans Montserrat+Alternates Shadows+Into+Lig ht+two); h1{ font-family: 'Montserrat Alternates', Verdana; h2{ font-family: 'Average Sans', Arial; p{ font-family: 'Shadows Into Light Two', Arial; Sambungkan halaman HTML dengan stylesheet font.css dengan menambahkan definisi link dalam tag head.... <head> <title>html 5 Article</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="font.css"> </head>...
Latihan #3 Memberikan style ke elemen-elemen HTML 5 (beri nama latihan3.html) <!DOCTYPE html> <html> <head> <title>html 5 Elemen</title> <link rel="stylesheet" type="text/css" href="elemen.css"> </head> <body> <div id="wrap"> <h3>summary</h3> <details> <summary>spoiler</summary> <p>bagian tulisan ini disembunyikan oleh browser. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed libero nulla, porta ut ultricies nec, consequat eu nulla. Curabitur vel tellus in mi sagittis consequat ut vel elit. mattis ut fringilla at, auctor at lacus. Fusce a felis ut tellus congue tempus ut in lorem.</p> </details> <h3>penggunaan Figure</h3> <figure class="single"> <img src="ipung.jpg" alt="ipung"> <figcaption>ipung karya Prie GS.</figcaption> </figure> <h3>figure dengan banyak gambar dan satu caption</h3> <figure class="multi"> <img src="ipung.jpg" alt="ipung" height="250px"> <img src="bfg.jpg" alt="the BFG" height="250px"> <img src="neverwhere.jpg" alt="neverwhere" height="250px"> <figcaption>buku buku</figcaption> </figure> <h3>menggunakan Figure untuk source code</h3> <figure> <code><p><small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">creative Commons Attribution Share-alike license</a></small></p></code> <figcaption>using <code><small></code> around a <a href="http://creativecommons.org/choose/" title="choose a License">Creative Commons license</a> link with <code>rel="license"</code> </figcaption> </figure> </body> </html>
Stylesheet dibuat dengan nama elemen.css body, html { margin:0; padding:0; color:#000; #wrap{ width:750px; margin:0 auto; details{ padding: 10px; background-color: #9cc; figure.single{ padding: 10px; figure img{ padding: 5px; background-color: #9cc; figure.multi{ text-align: center; figure code p{ background-color: #C6FFB3; padding: 10px;
CSS 3 CSS 3 adalah standar baru dalam membuat stylesheet. Ada beberapa fitur tambahan pada CSS 3 untuk membuat halaman HTML menjadi lebih indah dengan cara yang lebih mudah. Latihan #4 Menggunakan CSS3 <!DOCTYPE html> <html> <head> <title>beberapa Contoh CSS 3</title> <link rel="stylesheet" type="text/css" href="css3.css"> </head> <body> <h2>border</h2> <div id="round-corner"> Box ini memiliki sudut yang melengkung. <div id="shadow"> Box ini memiliki bayangan. <h2>merubah ukuran dari background gambar</h2> <div id="resize"> ukuran dari background gambar sekarang dapat dirubah menggunakan CSS. <div id="resize2"> Ukuran dari background gambar juga dapat dirubah mengikuti ukuran containernya. <div id="twobg"> Kita juga dapat menggunakan lebih dari satu background gambar. <h2>efek Teks</h2> <div id="txtshadow"> Teks berbayangan <div id="wordwrap"> Teks iniiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii memiliki word wrapping. </body> </html>
css3.css #round-corner{ padding:10px; width: 100px; border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ #shadow{ margin-top: 20px; width: 100px; padding: 10px; background-color: #F0F0F0; box-shadow: 10px 10px 5px #000; #resize{ width: 100px; background:url(img_flwr.gif); -moz-background-size:80px 60px; /* Firefox 3.6 */ background-size:80px 60px; background-repeat:no-repeat; #resize2{ margin-top: 20px; width: 100px; background:url(img_flwr.gif); -moz-background-size:100% 100%; /* Firefox 3.6 */ background-size:100% 100%; background-repeat:no-repeat; #twobg{ margin-top: 20px; width: 224px; height: 162px; background-image:url(img_flwr.gif),url(img_tree.gif); #txtshadow{ text-shadow: 5px 5px 5px #FF0000;
#wordwrap{ margin-top: 20px; width: 100px; border: solid 1px #000; word-wrap:break-word;
Latihan #5 Membuat animasi dengan CSS3 <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; /* Firefox: */ -moz-animation-name:myfirst; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-delay:2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-delay:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:running; /* Opera: */ -o-animation-name:myfirst; -o-animation-duration:5s; -o-animation-timing-function:linear; -o-animation-delay:2s; -o-animation-iteration-count:infinite; -o-animation-direction:alternate; -o-animation-play-state:running;
@keyframes myfirst { 0% {background:red; left:0px; top:0px; 25% {background:yellow; left:200px; top:0px; 50% {background:blue; left:200px; top:200px; 75% {background:green; left:0px; top:200px; 100% {background:red; left:0px; top:0px; @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px; 25% {background:yellow; left:200px; top:0px; 50% {background:blue; left:200px; top:200px; 75% {background:green; left:0px; top:200px; 100% {background:red; left:0px; top:0px; @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px; 25% {background:yellow; left:200px; top:0px; 50% {background:blue; left:200px; top:200px; 75% {background:green; left:0px; top:200px; 100% {background:red; left:0px; top:0px; @-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px; 25% {background:yellow; left:200px; top:0px; 50% {background:blue; left:200px; top:200px; 75% {background:green; left:0px; top:200px; 100% {background:red; left:0px; top:0px; </style> </head> <body> <p><b>catatan:</b> Contoh ini belum disupport Internet Explorer.</p> <div>
</body> </html>