Scribd
Carica
12 visualizzazioni15 pagine

CSS Modul

css modul

Caricato da

Gina Adelia
Copyright
© All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF o leggi online su Scribd
12 visualizzazioni15 pagine

CSS Modul

css modul

Caricato da

Gina Adelia
Copyright
© All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF o leggi online su Scribd
PROGRAMMING Bab 5, Cascading Style Sheet (CSS) Overview Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan untuk pengembangan website kurang lebih pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML, Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca Jayar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS. Setelah CSS distanderisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language, Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML. PROGRAMMING Pengertian CSS CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan, Fitureitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan. Keuntungan Menggunakan CSS CSS memberikan keseragaman pada halaman web. Dengan CSS dapat menghemat banyak waktu dan pekerjaan berulang. Saat menggunakan CSS, perubahan tidak perlu dilakukan dalam setiap halaman web, Anda hanya perlu membuat perubahan dalam style sheet. CSS memungkinkan Anda untuk memuat halaman web Anda dengan mudah, Layers (Lapisan), seperti item pop-up, dapat digunakan dalam dokumen. \ CSS membantu Anda memelihara halaman web Anda dengan mudah dan efektif. a font-weight:bold } Gambar 5.1 Selector, Property dan Value pada CSS 5.1.1 Selector Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘mengaitkan’atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam css. Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag

’, atau “cari seluruh tag HTML yang memilki atribut class="warning”” atau "cari seluruh link yang ada di dalam tag

". Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, , ‘A1, I dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya. 5.1.2 Property Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML, CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector. Jika selector digunakan misalnya untuk “mencari seluruh tag

", maka property adalah "efek apa yang ingin dimanipulasi dari tag p tersebut', seperti ukuran text, warna text, jenis fontnya, dll. PROGRAMMING 5.1.3 Value Value CSS adalah nilai dari property. Misalkan untuk property background- color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white. 5.2 Penempatan Sebuah CSS Ada tiga cara untuk menempatkan sebuah CSS ke dalam sebuah halaman web, ketiga cara ini dapat digunakan untuk memformat halaman web dengan style yang diingkan. 5.2.1 Inline Style Sheet CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web yang akan diatur stylenya dan menjadi bagian dari body. Penulisan style ditakukan dengan cara menambahkan atribut title pada elemen (tag) HTML yang akan diatur sstylenya. Oleh karena itu, untuk mengimplementasikan CSS pada halaman web, semua tag harus diformat secara independen. Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag HTML yang digunakan berulang kali dalam sebuah halaman web, pembuat website dapat_mengimplementasikan style yang berbeda pada tag tersebut. Ketika menggunakan jnfine style sheet untuk memanipulasi halaman web, pembuat web hanya dapat menggunakan satu property saja pada tag HTML yang akan dimanipulasi. 5.2.2 Embedded Style Sheet ‘Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi embedded style sheet juga menjadi satu dengan halaman web yang akan diatur sstyle-nya, hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag ) dengan menambahkan tag . Dengan menggunakan model penempatan CSS sebagai embedded style sheet, pembuat web cukup satu kali mendefinisikan sty/e yang akan dikenakan pada tag — tag yang berada dalam halaman web. Jika ada sebuah tag yang digunakan secara berulang, secara otomatis akan mempunya style yang sama, berbeda dengan model inline style sheet yang mengharuskan pembuat web menentukan style pada tag — PROGRAMMING tag yang digunakan berulang kali dan memungkinkan untuk menentukan style yang berbeda pada tag tersebut. 5.2.3 Linked Style Sheet Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked style sheet berarti harus menyediakan sebuah file CSS khsusus berisi berbagai format style yang terpisah dari halaman web. File ini nantinya akan dipanggil oleh halaman web yang membutuhkan pengaturan style. Dengan menggunakan model ini, sty/e akan terpusat pada sebuah file, sehingga jika ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file css. Dengan menggunakan model ini, sty/e akan terpusat pada sebuah file, sehingga jika ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file css. 5.3 Penggunaan CSS Pada Halaman Web Kita dapat menggunakan salah satu dari ketiga penempatan CSS yang ada, namun tidak menutup kemungkinan juga kita dapat menggunakan dua atau ketiganya dalam sebuah website jika memang diperlukan. 5.3.1 Pengolahan Font Salah satu tag HTML yang biasa digunakan untuk memanipulasi font adalah paragrat (

). Beberapa tag yang lain juga memungkinkan untuk dimanipulasi atau ditambahkan CSS untuk memanipulasi font jika pada tag HTML tersebut akan berisi tulisan / text, seperti : , ,

  • ,

    ...

    , dan tag - tag lain yang memungkinkan berisi text. Bentuk manipulasi font yang dimungkinkan dapat dilihat pada tabel di bawah ini : Tabel 5.1 Font Properties hired Fontfamily, Eelvstice} Fone-size Nila integer dengan F (font-sinerddem) pilihan satuan : emipelpx Fone-style Obliqueliealicjnormal _| = (eont=sty Font-variant | Nermallsmall-caps Fesnevariom Font-weight | Normallbold|bolder|I00- | © (font-weigntibolal 900 5.3.2 Memanipulasi Color dan Background Bentuk lain dari memanipulasi halaman web adalah dengan menentukan warna pada tulisan, menambahkan warna background, atau dengan menambahkan gambar sebagai background. Beberapa property yang bisa digunakan untuk memanipulasi beberapa hal di atas, ditampilkan pada tabel di bawah ini. Tabel 5.1 Properties Warna dan Gambar latar Background | Ranglaian 6 digie calor Iheksadesinal atau nama Background: | url dimana image disimpan Image Background: | Fxedlserollinherie seeachment Background: | Tnherilrepeatine- Repest repeat|repent-xirepenty Background: | Bowsomicencerletrahetop position | linherie Cater Rangiaian 6 die sD eles ve PROGRAMMING 5.4 Mengenal Jenis-jenis Selector Dasar CSS Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’suatu tag di dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p, atau mencari seluruh tag h1 yang memiliki atribut class=judul, 5.4.1 Universal Selector Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang "*". Selector ini bertujuan untuk ‘mencar semua tag yang ada. Contoh Universal Selector CSS: oa color: blue; background-color: whites} > Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna biru, dan background berwarna putih. 5.4.2 Element Type Selector Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri, Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap oleh selector ini Contoh Element Type Selector CSS: hl Lext-decoration: underline; + Pt font-size: l4px: } Contoh kode CSS diatas akan membuat semua tag

    akan bergaris bawah, dan seluruh tag

    akan berukuran 14pixel. Efek dari element type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag

    terdapat tag , maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup

    . PROGRAMMING 5.4.3 Class Selector Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selectorakan —‘mencari’selurun tag. -yang_—_-memiliki atribut class dengan nilaiyang sesuai. Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class, Contohnya:

    Judul Artikel

    judul penting berwarna”>Sub Judul Artikel

    Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan nilainya adalah nama dari kelas itu sendiri, Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class. Contohnya dalam —baris_terakhir pada contoh_—_diatas,tag h2 memiliki atribut class="judul penting berwarna’.Tag_ ini teridiri dari 3 class, yaitu judul, penting, dan class berwamna, Sedangkan untuk kode CSS Class Selector adalah sebagai berikut: -paragzaf_pertama ( color: redr ) ssedul ( font-size:20px; b senting { colorized; font-size: lem; b Untuk =menggunakan class selector, di dalam CSS kita menggunakan tanda titik sebelum nama dari class. Untuk contoh kita, seluruh class yang memilki nilai “paragraf_pertama’, warna text akan menjadi merah. Dan seluruh class judu/ akan memiliki font 20 pixel. PROGRAMMING 5.4.4 ID Selector ID Selector bersama-sama dengan class selector merupakan selector paling umum dan juga sering dipakai (walau tidak sesering class selector). Penggunaan ID selector hampir sama dengan class selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan atribut id. Contoh penggunaan atribut id pada tag HTML

    Ini adalah sebuah paragraf pembuka

    Judul Artikel

    <

    Sub Judul Artikel

    Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing- masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama, Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama. Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut: fparagzaf_ penbuka ( color: red; , judul utama { font-size:20px ) Di dalam kode CSS, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita mencari tag yang memiliki id tersebut. 5.4.5 Attribute Selector Selector ini sedikit lebih advanced dibandingkan dengan _selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan. Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut: (href) { font-size:20px ; b PROGRAMMING [type-"submit"] { width: 30px; 1 Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada diantara tanda kurung siku "[" dan °]". [href] akan cocok dengan seluruh tag yang mem atribut href, apapun nilai dari href (href biasanya terdapat pada tag ). Untuk contoh [type="submit’] akan cocok dengan tag yang memiliki atribut type dengan nilai submit, yang dalam hal ini adalah tombol submit dalam form. Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan. PROGRAMMING LATIHAN 1. Penggunaan Inline Style Sheet ‘Simpan dengan nama [Link] aie 2 Game a “SLE2OOESS unk manistand fonte/siste> EG up ef “tS style’ font-femila Saba Courier "-Spansah AMEEMS/‘3> 8 Sp suylen' font -Fanity Seeley, Bria, Uobnsien, newe-nnri "> Jekclad Tisayl analimten Tacemeasshs dau Kaouies, HIM ogwakacsa, Geioniatnes aisabar eTck alcisae YOCVAEARTAY werucadsn 25189 2559 fgmuraan Sanaa ewasta vasa berksduditan di Exaranes DIY Bammatan Geo a biomh onmane Xarazan AU Yaqyaksrse (ep seylew'sonevessestope's ‘RUE yoqyRIaEea MERAAGKA Frooren Srudh vRasaenen InfOMatAAa stn TARR Jafomatana. Proeram ssulh ina gasint-asesng sikelele oleh searsne Fezua tugsaao dan Gekceiarin ducisan vera didhbia oleh Baxanakay, Rossa. ag St4FF Adasabatrat op stvlen font otylesstatio™| Bardeasshap Sucet Reantusea Vener Bectidshan Wiens) Seuhlik Trloneesa Semoun 24 Apri 2002, Hewes. 78/2/0/2002 dengang Poskerien Zaks Rewnlonanecans Progran-Progran Stud dan Zendiriay Sehotah Tht Yausjeney Tafemmbide dan Bawgacer ‘Snink) AUIMEAE YoqyaNayTa 1 UY (larabanan aC aay: AUIEMD yang sieaigaaaarSNan les Mavssas AULEM Lagrasses $i DS re Gambar 5.2 Contoh Skrip CSS Inline Style Sheet 2, Penggunaan Embedded Style Sheet. Simpan dengan nama [Link]! PROGRAMMING SciCi@CES ans memepinatanh ronte/tisie> itens-rantly:Yendaaa. Aria HRiNaRAGR, eane-serie) di font-wotane-bold fost~emuity" gabines) Sitent-alae:20ps Say ininca Saka» “pydebalas Uoraza Mamesnone Jaamsabiks das Kowoster AMIE Yoseabarte, ‘elaosstare dissin SIN ANH SCCYRARTAY qesupmhan aalaa esta sexaucion bisam moat rong barbadoukan a Beene Sakematen Sieonn t Rowse naonaxs Wuaaan AUDA! SaNRAREA [ANDA Yowvalania eaniiAAs Peooran sia sasaiensn ZafonmRbiaa dan TAMA Safammatans. Provran riuds ih takng-easia @adeia shah sera SSebsa Jursaan dan Sedraiatie Darusas vane Aiding beh Duraeadat Bose, en Stat? Aaininbenn Berdeencane Surat Heputnoen Meniess fendiasnen Uaeions Semabisk indonests Gaaqiah 24 20ri. 2002, Nomar. 72/2/0/s002 taxana Paxbarasn 1358 RRATRASSOTORARS Drogran-Proctan Sith dav Paadxhan Selalad TAnegs Maimoneh Soferwntahe da Komeaees nick) AGIA Yogranatin i 25 Grbahan bana dark MOM Yang dheelangsarahae flee Xavasan PACE Yoqyahatta 63557 ‘non sencobs sammsentan apiakech Golson 7eec. aslennan HAAR 280r ds brim tn “= se noet™ htm: / foc pemactaause can MAR Teste! > SS Gambar 5.3 Contoh Skrip CSS Embedded Style Sheet 3. Penggunaan Linked Style Sheet. Simpan File Pertama dengan nama style [Link]: PROGRAMMING Gambar 5.4 Contoh Skrip Linked Style Sheet Kemudian buat file kedua dengan nama [Link] Gambar 5.5 Contoh Skrip Linked Style Sheet 4. Pemberian property multi kepada selector. Simpan dengan nama latihan27.htm1 PROGRAMMING Gambar 5.6 Contoh Skrip dalam pemberian property multi kepada selector 5. Manupulasi font dengan menggunakan selector bebas, class, dan ID. Simpan dengan nama [Link] —.. i soni fone-taslysials Qloica, sae-reifs fene-styiesttites . Tone-fasly-erdane, Atay Hoimbsa,eane-oerifs Fentaaiseibetds ‘lar ubhon feet : ‘Soden thn

    Potrebbero piacerti anche

    <