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.

...

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)

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

Latihan #3 Memberikan style ke elemen-elemen HTML 5 (beri nama latihan3.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

Border

Merubah ukuran dari background gambar

Efek Teks

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 <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;} }

Catatan: Contoh ini belum disupport Internet Explorer.