Scribd Logo
Unggah

Selamat datang di Scribd!

  • Css

    Diunggah oleh

    sahabuddinabu
    28 tayangan5 halaman
    CSS

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    CSS

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    28 tayangan5 halaman

    Css

    Diunggah oleh

    sahabuddinabu
    CSS

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    CSS Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu

    dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi. Cara pemanggilan CSS : 1. Internal Style Sheet atau Embed Style yaitu berada didalam tag <HEAD> dimana untuk

    CSS didefinisikan sebagai berikut


    <style type="text/css"> /* css code */ </style> 2. Inline Style yaitu menjadi atribut dalam tag HTML, atributnya adalah style. Cara pendefinisian property dan nilainya adalah sebagai berikut: Contoh : <font style=color:red>Warna tulisan merah</font> 3. Terdapat di dalam 1 file tertentu. (External Style Sheet atau Embed Style) Pemanggilannya : <link rel=stylesheet href=PATH/file.css />

    contoh ilustrasinya :

    File1.html File2.html File.css

    File3.html

    contoh pertama : <html> <head> <title>Contoh Pertama</title> <style type="text/css"> body {background-color: yellow} h1 {background-color: red} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <h1>This is header 3</h1> <p>This is a paragraph</p> </body> </html>

    Contoh kedua : <HTML> <HEAD> <TITLE>Percobaan CSS : Inline Style </TITLE> </HEAD> <BODY style="color: blue"> <P style="text-align: center;text-transform: uppercase; color: red;font-weight: bold">Pemrograman</P> Web </BODY> </HTML>

    Untuk cara yang ketiga akan kita lanjutan di pertemuan selanjutnya.

    Background
    <html> <head> <style type="text/css"> body { background-image:url(PATH/img.jpg'); background-repeat: repeat; } </style> </head> <body> </body> </html>

    Background-repeat: repeat-x; repeat-y; no-repeat Background - fixed <html> <head> <style type="text/css"> body { background-image: url(PATH/img.jpg'); background-repeat: no-repeat; background-attachment: fixed } </style> </head> <body> <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image <p>The image </body> </html>

    will will will will will will will will will will will will will will will will will will will

    not not not not not not not not not not not not not not not not not not not

    scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll

    with with with with with with with with with with with with with with with with with with with

    the the the the the the the the the the the the the the the the the the the

    rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest rest

    of of of of of of of of of of of of of of of of of of of

    the the the the the the the the the the the the the the the the the the the

    page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p> page</p>

    Grouping, Class, Id Selector, Komentar

    Grouping dalam CSS


    Dalam pendefinisian selector terdapat suatu cara yang disebut grouping selecteor atau pengelompokan selector. Manfaat dari penggunaan grouping selector ini adalah penggunaan selector dari tag HTML yang akan dikenai property yang sama cukup hanya dibuat sekali saja. Cara penggunaan ini cukup dengan memberikan tanda koma (,) antara selector satu dengan yang lain.
    Selector-1, Selector-2,... .Selector-n { property-1: nilai; property-2: nilai; property-n: nilai; }

    Class dalam CSS


    Dengan menggunakan class dalam CSS ini maka anda dapat membuat style-style yang berbeda untuk jenis tag yang sama (disebut private class) atau membuat style yang sama untuk semua jenis tag yang berbeda (disebut public class). Contoh untuk private class terhadap tag Heading dengan style warna merah dan biru. Definisi style adalah sebagai berikut:
    H1.merah {color: red;} H1 .biru {color: blue;}

    Penerapan dalam tag Heading adalah dengan menggunakan atribut class, seperti berikut:
    <H1 class="merah">Batman</H1> <H1 class="biru">Jogja</H1>

    Sedangkan untuk public class pendefinisian style dapat dipakai pada semua tag. Contohnya adalah sebuah definisi style berikut akan diterapkan pada tag Heading dan Paragraph: .warnatengah { color: red:
    text-align: center; }

    Pemakaian public class tersebut oleh tag Heading dan Paragraph, yaitu dengan menggunakan attribut class, seperti berikut:
    <H1 class="warnatengah">Pemrograman</H1> <P class="warnatengah">Ternyata pemrograman asyik</P>

    Id dalam CSS
    Id memiliki sifat yang hampir sama dengan class yaitu style diterapkan pada tag, perbedaanya adalah tag dengan id tertentu bisa memperoleh tambahan style. Sehingga jika anda telah membuat class-class yang diterapkan pada tag sejenis, tetapi diinginkan salah satu tagnya memperoleh style yang sedikit berbeda maka dapat digunakan atribut id. Pendefinisian style untuk id harus mengandung tanda #. Contoh adalah didefinisikan style sebagai berikut:
    H1.merah {color: red;} H1#beda {font-style: italic;}

    Penerapan id dalam tag Heading adalah dengan menggunakan atribut class, seperti berikut:
    <H1 class="merah">Batman</H1> <H 1 class="merah" id="beda">Jogja</H 1 >

    Pada contoh diatas id beda hanya dapat digunakan untuk selector tag HI, untuk membuat agar semua tag dapat menggunakan id beda maka pendefinisiannya harus diubah menjadi: *#beda {font-style: italic;}

    Komentar dalam CSS


    Untuk memberikan komentar atau keterangan penjelas dalam CSS digunakan tanda pembuka "/*" dan ditutup dengan "*/". Komentar atau keterangan ini tidak akan diinterpreter oleh browser. Contoh: /* class untuk tag Heading*/ H1.merah{color: red;} H1.biru{color: blue;}

    Anda mungkin juga menyukai