CASCADING STYLE SHEETS (CSS)
description
Transcript of CASCADING STYLE SHEETS (CSS)
![Page 1: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/1.jpg)
CASCADING STYLE SHEETS (CSS)Abdul Haris, S.Kom
![Page 2: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/2.jpg)
Pengertian CSSFeature 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)Support ke semua browser.
![Page 3: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/3.jpg)
Aturan PenulisanNilai untuk property tidak boleh dalam tanda
petik.contoh : color : green;
Nama property bersifat case sensitive.color : green;property color
value green
![Page 4: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/4.jpg)
FONT-FAMILY : sans-serif;FONT-SIZE : small;Cara mendeklarasikan kelompok : (tanda koma
serta &)H1, H2 {color : green};H3, H4 & H5 {color : red};Cara menuliskan komentar :Menggunakan tanda : /* Komentar */Menggunakan tanda : <!-- Komentar-- >
![Page 5: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/5.jpg)
Penggunaan CSS
![Page 6: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/6.jpg)
Contohbody {color: green;background: white;font-family : arial;}Keterangan:simpan dengan nama efek.css
![Page 7: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/7.jpg)
Contoh Program<HTML>
<HEAD><TITLE>AMIKOM MATARAM</TITLE><LINK REL="STYLESHEET"TYPE="text/css" HREF="efek.css">
</HEAD><BODY>
<H1>Selamat Datang di AMIKOM</H1><P> AMIKOM adalah kampus komputer yang ada di Mataram </P>
</BODY></HTML>
![Page 8: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/8.jpg)
Hasil
![Page 9: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/9.jpg)
Penggunaan CSS
![Page 10: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/10.jpg)
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 adalah salah satu kampus komputer dimataram</P>
</BODY></HTML>
![Page 11: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/11.jpg)
Hasil
![Page 12: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/12.jpg)
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>
![Page 13: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/13.jpg)
Pemetaan Menggunakan 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 ini berada di tengah halaman , karna di lakukan pengaturan halamandengan menggunakan padding atas 10%, kanan 20%,bawah 40%,dan kiri 20%.
</BODY></HTML>
![Page 14: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/14.jpg)
Backround Gambar<HTML>
<HEAD><TITLE>Menggunakan Background Gambar</TITLE><STYLE ="text/css">
BODY{
background-image:url("flower4.jpg");background-repeat: repeat-x;
}</STYLE></HEAD>
<BODY>Background Berulang pada Sumbu X
</BODY></HTML>
![Page 15: CASCADING STYLE SHEETS (CSS)](https://reader033.fdocuments.net/reader033/viewer/2022061610/56813c63550346895da5ed76/html5/thumbnails/15.jpg)
Hasil