Top Banner
CASCADING STYLE SHEETS (CSS) Abdul Haris, S.Kom
15

CASCADING STYLE SHEETS (CSS)

Jan 06, 2016

Download

Documents

zytka

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 dengan style bold dan italic) - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: CASCADING STYLE SHEETS (CSS)

CASCADING STYLE SHEETS (CSS)Abdul Haris, S.Kom

Page 2: CASCADING STYLE SHEETS (CSS)

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)

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)

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)

Penggunaan CSS

Page 6: CASCADING STYLE SHEETS (CSS)

Contohbody {color: green;background: white;font-family : arial;}Keterangan:simpan dengan nama efek.css

Page 7: CASCADING STYLE SHEETS (CSS)

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)

Hasil

Page 9: CASCADING STYLE SHEETS (CSS)

Penggunaan CSS

Page 10: CASCADING STYLE SHEETS (CSS)

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)

Hasil

Page 12: CASCADING STYLE SHEETS (CSS)

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)

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)

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)

Hasil