1 / 15

CASCADING STYLE SHEETS (CSS)

CASCADING STYLE SHEETS (CSS). Abdul Haris , S.Kom. Pengertian CSS. Feature untuk membuat dynamic HTML. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template) Membuat special efek ( mendefinisikan style untuk <H1> dengan style bold dan italic)

zytka
Download Presentation

CASCADING STYLE SHEETS (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. CASCADING STYLE SHEETS (CSS) Abdul Haris, S.Kom

  2. Pengertian CSS • Feature untukmembuat dynamic HTML. • Style sheet mendeskripsikanbagaimanatampilan document HTML dilayar (template) • Membuatspecial efek (mendefinisikan style untuk <H1> dengan style bold danitalic) • Support kesemua browser.

  3. AturanPenulisan • Nilaiuntuk property tidakbolehdalamtandapetik. contoh: color : green; • Namaproperty bersifat case sensitive. color : green; property color value green

  4. FONT-FAMILY : sans-serif; • FONT-SIZE : small; Cara mendeklarasikan kelompok : (tanda koma serta &) • H1, H2 {color : green}; • H3, H4 & H5 {color : red}; Cara menuliskankomentar : • Menggunakantanda : /* Komentar */ • Menggunakantanda : <!-- Komentar-- >

  5. Penggunaan CSS

  6. Contoh body { color: green; background: white; font-family : arial; } Keterangan:simpandengannama efek.css

  7. Contoh Program <HTML> <HEAD> <TITLE>AMIKOM MATARAM</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css"> </HEAD> <BODY> <H1>SelamatDatangdi AMIKOM</H1> <P> AMIKOM adalahkampuskomputer yang adadiMataram </P> </BODY> </HTML>

  8. Hasil

  9. Penggunaan CSS

  10. Contoh <HTML> <HEAD> <TITLE>AMIKOM MATARAM</TITLE> <STYLE type="text/css"> body { color: white; background: green; font-family : arial; } </STYLE> </HEAD> <BODY> <H1>AMIKOM MARATAM</H1> <P>AMIKOM adalahsalahsatukampuskomputerdimataram</P> </BODY> </HTML>

  11. Hasil

  12. Pengaturan Margin <HTML> <HEAD> <TITLE>Pengaturan Margin</TITLE> <STYLE type="text/css"> BODY { margin-top : 1cm; margin-right : 2cm; margin-bottom : 1cm; margin-left : 2cm; } </STYLE> </HEAD> <BODY> Pengaturan Margin Halaman (1cm,2cm,1cm,2cm) </BODY> </HTML>

  13. PemetaanMenggunakan Padding <HTML> <HEAD> <TITLE>Pengaturan Margin</TITLE> <STYLE ="text/css"> BODY { padding-top : 10%; padding-right : 20%; padding-bottom : 40%; padding-left: 20%; } </STYLE> </HEAD> <BODY> Text iniberadaditengahhalaman , karnadilakukanpengaturanhalaman denganmenggunakan padding atas 10%, kanan 20%,bawah 40%,dan kiri 20%. </BODY> </HTML>

  14. BackroundGambar <HTML> <HEAD> <TITLE>Menggunakan Background Gambar</TITLE> <STYLE ="text/css"> BODY { background-image: url("flower4.jpg"); background-repeat: repeat-x; } </STYLE> </HEAD> <BODY> Background BerulangpadaSumbu X </BODY> </HTML>

  15. Hasil

More Related