1 / 17

PENGERTIAN CSS

PENGERTIAN CSS. APA ITU CSS ?. CSS adalah singkatan dari Cascading Style Sheets, yang berisikan rangkaian instruksi yang menentukan bagaimana suatu text akan tertampil di halaman web

armina
Download Presentation

PENGERTIAN CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PENGERTIAN CSS

  2. APA ITU CSS ? • CSS adalahsingkatandari Cascading Style Sheets, yang berisikanrangkaianinstruksi yang menentukanbagaimanasuatu text akantertampil di halaman web • Perancangandesaintextdapatdilakukandenganmendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latarbelakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemenseperticolors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebutjuga “styles”.

  3. CSS • CascadingStyle Sheetsjugabisaberartimeletakkanstylesyangberbedapadalayers (lapisan) yangberbeda. • CSS terdiridaristylesheetyangmemberitahukan browser bagaimanasuatudokumen akan disajikan. • Fitur-fiturbarupadahalaman web lama dapatditambahkandenganbantuanstyle sheet. • Saat menggunakan CSS, Anda tidakperlumenulis font, coloratau size padasetiap paragraf, ataupadasetiapdokumen. Setelah Anda membuatsebuahstylesheet, Anda dapatmenyimpankodetersebutsekalisaja dan dapatkembalimenggunakannyabiladiperlukan.

  4. Keuntungan Menggunakan CSS • CSS memberikankeseragamanpadahalaman web. • DenganCSS dapatmenghematbanyakwaktudanpekerjaanberulang. Saat menggunakan CSS, perubahantidakperludilakukandalamsetiaphalamanweb. Andahanyaperlumembuatperubahandalamstylesheet. • CSS memungkinkan Anda untukmemuathalaman web Anda denganmudah. • Layers(Lapisan), seperti item pop-up, dapatdigunakandalamdokumen. • CSS membantuAndamemeliharahalaman web Andadenganmudah dan efektif.

  5. CSS CSS selaludimulaidengan tag <style> dandiakhiridengan </style> CSS bisadibagi 2 yaitu CSS Internal dan CSS eksternal

  6. <HTML> • <HEAD> • <STYLE TYPE="text/css"> • B { color : lime } • </STYLE> • </HEAD> • <BODY> • P: Mengapajika kita anggap <B>suatupekerjaan</B> itu mudah • makapekerjaan itu akan beneranmenjadi<B> lebihmudah</B> ? • <P> • J: Karena itu merupakan <B>sugesti</B> terhadap <B>diri kita sendiri</B> • </BODY> • </HTML>

  7. <HTML> • <HEAD> • </HEAD> • <BODY> • P: Mengapajikakitaanggap <B><FONT COLOR="Lime">suatu • pekerjaan</FONT></B> itu mudah maka pekerjaan itu akan • beneranmenjadi<B><FONT COLOR="Lime"> lebihmudah • </FONT></B>? • <P> • J: Karenaitumerupakan <B><FONT COLOR="Lime">sugesti • </FONT></B> terhadap <B><FONT COLOR="Lime">dirikita • sendiri </FONT></B> • </BODY> • </HTML>

  8. Pada contoh di atas, baris ini • B {color: lime} dikenalsebagai "Style Rule" atauperaturan/perintahcss, yang manaterdiridariduaelemendasaryaitu : "selector" dan "declaration“

  9. B {color: lime; text-decoration: underline; font-family: Arial} sebuah "selector" biasanyaadalah tag HTML (dalamhalini B), sementara "declaration" adalahsatuatau beberapaperintah/nilaidaricss yang menunjukkan type bentuk yang diaplikasikanpada selector. Declaration inibiasanya di tandaidengankurungkurawal, danperintah/nilaicss yang berbedadipisahkan satudengan yang lain denganmenggunakantitik-koma, Pastibingung?

  10. Classes : • CSS jugamengijinkankitauntukmenyatukanelemen-elemensecarabersamaandidalamsebuahkelas • (classes) danmenerapkannyaaturan Style-Sheet kedalamsebuah class. Sebagaicontoh

  11. <HTML> • <HEAD> • <STYLE TYPE="text/css"> • .tanya {color: red} • .jawab {color: blue} • </STYLE> • </HEAD> • <BODY> • <P CLASS="tanya"> • P: Mengapa jika kita anggap suatu pekerjaan itu mudah • makapekerjaanituakanbeneranmenjadilebihmudah? • <P CLASS="jawab"> • J: Karenaitumerupakan <FONT CLASS="tanya">sugesti</FONT> • terhadapdirikitasendiri • </BODY> • </HTML>

  12. PADDING • Menentukanjarakkomponen body ke border atauUkuranjarakbagiandalam • ditulisdengan CSS padding:5px 5px 5px5px; urutannilaiangkanyaadalahatas, kanan, bawahdankiri, atauAndabisamenggunakan • padding-left:5px; iniadalahuntukpengaturan padding bagiankiripadding-right:5px; iniadalahuntukpengaturan padding kananpadding-top:5px; untukbagianatasdanpadding-bottom:5px; untukbagianbawah, Ingatsatuanpx(pixels) bisakamugantisesuaisatuan yang lain yang sesuai

  13. <html> • <head> • <style> • p • { • background-color:yellow; • } • p.padding • { • padding-top:25px; • padding-bottom:25px; • padding-right:50px; • padding-left:50px; • } • </style> • </head> • <body> • <p>paragrafinitidakmenggunakanatributtambahandalampadding</p> • <p class="padding">paragrafinimenggunakanatributtambahandalampadding.</p> • </body> • </html>

  14. BORDER • Adalahgaristepidarikomponen • Ditulisdengan CSS border:1px dotted #000000; urutanpenggunaanyaadalahukran border, style border danwarna border, ataubisamenggunakanborder-width:1px; iniadalahketebalan borderborder-style:dotted; iniadalahjenisbordernyabisakamugantidengan dashed, solid, double, groove, ridge, inset, outset danlainyaborder-color:#FFFFFF; iniadalahwarnadari border.. kamubisamenggantin code warnanya

  15. <html> • <head> • <style> • p.one • { • border-style:solid; • border-width:5px; • } • p.two • { • border-style:solid; • border-width:medium; • } • p.three • { • border-style:solid; • border-width:1px; • } • </style> • </head> • <body> • <p class="one">satu.</p> • <p class="two">dua.</p> • <p class="three">tigat.</p> • <p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> • </body> • </html>

  16. MARGIN • AdalahUkuranjarakbagianluaratauukuranjaraksesudah Border • MarginDitulisdengan CSS margin:5px 5px 5px5px; urutanyaatas, kanan, bawahdankiri, ataubisamenngunakanseperti padding diatasmargin-left:5px;margin-right:5px;margin-top:5px;margin-bottom:5px;

  17. <html> • <head> • <style> • p • { • background-color:yellow; • } • p.margin • { • margin-top:100px; • margin-bottom:100px; • margin-right:50px; • margin-left:50px; • } • </style> • </head> • <body> • <p>This is a paragraph with no specified margins.</p> • <p class="margin">This is a paragraph with specified margins.</p> • </body> • </html>

More Related