Scribd Logo
Upload

Welcome to Scribd!

  • Eksternal Stylesheet CSS by AZG-10523409

    Uploaded by

    Zack Cullen Caspian
    372 views3 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    372 views3 pages

    Eksternal Stylesheet CSS by AZG-10523409

    Uploaded by

    Zack Cullen Caspian

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    NAMA : Ahmad Zaky Ghozali ASISTEN : A`mal Sholihan NIM : 10523409 MODUL : 3 LAPORAN MINGGUAN PRAKTIKUM PEMROGRAMAN WEB

    LABORATORIUM SISTEM INFORMASI DAN REKAYASA PERANGKAT LUNAK TAHUN PELAJARAN 2011/2012 WORKSHEET 3
    SCREENSHOT

    Jika pada worksheet sebelumnya kita membuat coding, lalu menganalisa, kemudian mneghasilkan screenshoot, maka kali ini saya akan menjelaskan coding berdasarkan screenshoot di atas. Pertama, kita harus membuat CSS (Cascading Style Sheet) dengan format file style1.css
    KODE / SYNTAX CSS
    body{ font-family: Verdana, Arial, 1 Helvetica, sans-serif; text-align: left; } #khusus{ 2 color: yellow; font-weight: bold; } .pertama{ width: 495px; 3 padding: 10px; border: 5px solid black; background-color: red; } .kedua{ 4 width: 295px; padding: 10px; border: 5px solid white; background-color: green; }

    1. Dalam CSS terdapat tag body yang digunakan untuk menghasilkan banyak style huruf kita, kalau dalam kasus ini saya menggunakan Verdana, Arial, Helvetica, sans-serif. Kemudian untuk teksnya saya ratakan kiri. 2. Dalam id selector yang saya namakan khusus, kita membuat semua tulisan yang saya letakkan dengan id tersebut warnanya menjadi kuning dan bercetak tebal. 3. Disini kita membuat kelas selector dalam CSS yang berguna untuk memberikan style pada div yang akan kita isi dengan lebar 495px, kemudian jarak isi dengan border (padding) berjarak 10px, lalu border dengan tebal 5px berwarna hitam, dan yang terakhir kita memberi warna background dengan warna merah. 4. Pada kelas selector kedua dimana kita akan memasukkan div di dalam div kelas selector yang pertama tadi dengan lebar 295px, jarak antara isi dengan border 10 px, border setebal 5px, dan dengan warna background hijau. Setelah membuat CSS, barulah kita membuat HTMLnya, dengan sintaks dibawah ini
    KODE / SYNTAX
    <html> <head> <title>worksheet 3</title> <link rel="stylesheet" type="text/css" href="style1.css"/> 1 </head> <body> <div class="pertama"> 2 <p> div ini punya background berwarna merah dan boder hitam setebal 5px<br/> padding 10px<br/> dengan lebar total 500px<br/> </p>

    <p id="khusus"> tulisan bercetak tebal ini berwarna kuning </p>

    <div class="kedua"> <p>div ini punya background berwarna hijau dan<br/> 4 border putih setebal 5 px<br/> padding 10px<br/> dengan lebar total 300px<br/> </p> </div> </div> </body> </html>

    1. Dalam kasus ini saya menggunakan jenis CSS eksternal stylesheet, sehingga untuk menghubungkan dengan file CSS yang telah kita buat tadi dengan menggunakan <link rel href>. 2. Dalam tag <body> kita buat tag div untuk memanggil style kelas pertama yang kita buat dalam file style1.css tadi, sehingga kita hanya tinggal mengetik paragraph apa yang ingin kita isi dalam tag div tersebut. 3. Dalam tag <p> kita berikan ID selector, dalam kasus ini saya namakan khusus, digunakan untuk memberikan dampak sesuai ID selector dimana dalam CSS tadi kita masukkan ID selector dengan warna tulisan kuning dan bercetak tebal. 4. Dalam tag <div> sebelumnya, kita memberikan tag <div> lagi, sehingga border kita bisa berada dalam border yang sebelumnya dengan style yang sudah kita sesuaikan dengan yang ada dalam file CSS kita tadi.

    You might also like