52
2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. Cascading Style Sheets (CSS) Nuru Aini 5108100017 Lena Sartika Capah 5108100705 Yuliana Eka Purwati 5108100706

CSS (Kelompok 05)

Embed Size (px)

Citation preview

Page 1: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Cascading Style Sheets (CSS)

Nuru Aini 5108100017

Lena Sartika Capah 5108100705

Yuliana Eka Purwati 5108100706

Page 2: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Chapter 14 – Dynamic HTML: Cascading Style Sheets (CSS)

Outline14.1 Introduction14.2 Inline Styles14.3 Creating Style Sheets with the STYLE

Element14.4 Conflicting Styles14.5 Linking External Style Sheets14.6 Positioning Elements14.7 Backgrounds14.8 Element Dimensions14.9 Text Flow and the Box Model14.10 User Style Sheets

Page 3: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.1 Introduction

• Cascading Style Sheets (CSS) – Menentukan gaya elemen halaman Anda

– Spasi, margin, dll.

• Terpisah dari struktur dokumen Anda– Bagian header, body teks, link, dll.

• Pemisahan struktur dari konten– Pengelolaan yang lebih baik

– Lebih mudah untuk mengubah gaya dokumen

Page 4: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.2 Inline Styles

• Inline styles – Masing-masing gaya elemen dideklarasikan

menggunakan atribut STYLE

– Setiap CSS properti diikuti oleh sebuah titik-dua dan nilai dari atribut

– Beberapa properti dipisahkan oleh titik koma– <P STYLE = “font-size: 20 pt; color: #0000FF”>

– Inline styles meng-override/menggantikan style lainnya.

Page 5: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1. STYLE attribute1.1

Separate multiple styles with a semicolon

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2 <HTML>

3

4 <!-- Fig. 14.1: inline.html -->

5 <!-- Using inline styles -->

6

7 <HEAD><TITLE>Inline Styles</TITLE></HEAD>

8

9 <BODY>

10

11 <P>Here is some text</P>

12

13 <!-- The STYLE attribute allows you to declare inline -->

14 <!-- styles. Separate multiple styles with a semicolon. -->

15 <P STYLE = "font-size: 20pt">Here is some more text</P>

16 <P STYLE = "font-size: 20pt; color: #0000FF">Even more text</P>

17

18 </BODY>

19 </HTML>

Page 6: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Inline styles

Page 7: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.3 Pembuatan Style Sheets dengan menggunakan elemen STYLE

• Style sheet pada bagian header– Diawali dengan <STYLE TYPE = “text/css”>

• Semua style yang ditempatkan pada bagian ini akan diterapkan pada semua bagian dokumen

• Atribut TYPE menentukankan tipe MIME

– MIME adalah sebuah standar untuk menentukan format konten

» Tipe-tipe MIME lainnya mencakup text/html, image/gif and text/javascript

• Tanpa style sheets– Browser sepenuhnya mengontrol tampilan dan nuansa halaman

Web

• Dengan style sheets– Designer dapat menentukan tampilan dan nuansa halaman Web

Page 8: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.3 Pembuatan Style Sheets dengan menggunakan elemen STYLE (II)

• Declare CSS rules within STYLE element– Tiap rule body dimulai dan diakhiri dengan kurung

kurawal ({ and })

– Pendeklarasian class adalah ditulis terlebih dahulu dan diaplikasikan hanya pada elemen dimana class tersebut dicantumkan

– Tiap property diikuti oleh titik dua dan kemudian nilai dari property tersebut

– Multiple properties dipisahkan oleh titik koma

Page 9: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.3 Pembuatan Style Sheets dengan menggunakan elemen STYLE ( )III

• Generic font families – Memungkinkan Anda untuk menentukan jenis font

selain font yang ditentukan sebelumnya

• Properti font-size– Ukuran relative: xx-small, x-small, small, smaller, medium, large, larger, x-large and xx-large

• Styles yang diterapkan pada sebuah elemen (the parent element)– Juga diterapkan pada elemen di dalam elemen tersebut

(child elements)

Page 10: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

–Memulai bagian style sheet1.1 CSS rules terletak di antara kurung kurawal1.2 Nama property diikuti oleh titik dua dan nilai property-nya1.3 Multiple properties dipisahjan oleh titik koma1.4 background-color menspesifikasi warna background pada elemen1.5 Property font-family :

Arial menspesifikasi jenis huruf

sans-serif merupakan generic font family–Penerapan style2.1 Atribut CLASS

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2<HTML>34<!-- Fig. 14.2: declared.html -->5<!-- Declaring a style sheet in the header section. -->67<HEAD>8<TITLE>Style Sheets</TITLE>910<!-- This begins the style sheet section. -->11<STYLE TYPE = "text/css">1213 EM { background-color: #8000FF;14 color: white } 1516 H1 { font-family: Arial, sans-serif }1718 P { font-size: 18pt }1920 .blue { color: blue } 2122</STYLE>23</HEAD>2425<BODY>2627<!-- This CLASS attribute applies the .blue style -->28<H1 CLASS = "blue">A Heading</H1>29<P>Here is some text. Here is some text. Here is some text.30Here is some text. Here is some text.</P>3132<H1>Another Heading</H1>33<P CLASS = "blue">Here is some more text. Here is some more text.

Page 11: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

3. Page rendered by browser

34 Here is some <EM>more</EM> text. Here is some more text.</P>

35

36 </BODY>

37 </HTML>

Page 12: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Conflicting Styles• Inheritance and specificity• text-decoration properti

-Berlaku dekorasi untuk teks dalam suatu elemen-none-overline-line-through-blink

Browser tidak diharuskan untuk mendukung blink

• Pseudo-class-Memberikan akses kepada penulis tidak secara khusus untuk mengisi konten yang telah dideklarasikan dalam dokumen-Ex. hover pseudo-class

Page 13: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Conflicting Styles (II)• px: pixel adalah ukuran relative-lengths

-Bervariasi dalam ukuran yang didasarkan pada resolusi layar• Ukuran relative-lengths yang lain

-em: ukuran font-ex: the "x-height" dari font, biasanya diatur dengan tinggi huruf kecil x-Persentase

E.g. margin-left: 10%• Ukuran absolute-lengths

-in: inci-cm: cm-mm: millimeter-pt: poin (1 pt = 1 / 72)-pc: picas (1 pc = 12 pt)

• Lebih baik gunakan relative-lengths absolute-lengths

Page 14: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Conflicting Styles (III)

• Tiga kemungkinan sumber-sumber untuk style sheet-Browser default- Preset user style-Author style

• Author style memiliki precedence yang lebih tinggi daripada Preset user style

Page 15: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2<HTML>34<!-- Fig 14.3: advanced.html -->5<!-- More advanced style sheets -->67<HEAD>8<TITLE>More Styles</TITLE>9<STYLE TYPE = "text/css">1011 A.nodec { text-decoration: none }1213 A:hover { text-decoration: underline;14 color: red;15 background-color: #CCFFCC }1617 LI EM { color: red;18 font-weight: bold }1920 UL { margin-left: 75px }2122 UL UL { text-decoration: underline;23 margin-left: 15px }2425</STYLE>26</HEAD>2728<BODY>2930<H1>Shopping list for <EM>Monday</EM>:</H1>31<UL>32<LI>Milk</LI>33<LI>Bread

Page 16: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline34 <UL>

35 <LI>White bread</LI>

36 <LI>Rye bread</LI>

37 <LI>Whole wheat bread</LI>

38 </UL></LI>

39 <LI>Rice</LI>

40 <LI>Potatoes</LI>

41 <LI>Pizza <EM>with mushrooms</EM></LI>

42 </UL>

43

44 <P><A CLASS = "nodec" HREF = "http://food.com">Go to the Grocery

45 store</A></P>

46

47 </BODY>

48 </HTML>

Page 17: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Inheritance in style sheets

Hovering over a link

Page 18: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.5 Linking External Style Sheets

• Linking External- Semua halaman terpisah dapat menggunakan style sheet yang sama-Hanya memodifikasi satu file untuk mengubah style di situs Anda

• LINK elemen-Menentukan hubungan (REL atribut) antara dokumen satu dengan dokumen lain <LINK REL = "stylesheet" type = "text / css"HREF = "styles.css">-LINK elemen hanya dapat ditempatkan pada header-Nilai REL yang lain

• next, previous memungkinkan Anda untuk menghubungkan serangkaian dokumen-Mencetak semua dokumen terkait pilihan

• Style sheet reusable (dapat digunakan kembali)

Page 19: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1. External style sheet (styles.css)

1A { text-decoration: none }

2

3A:hover { text-decoration: underline;

4 color: red;

5 background-color: #CCFFCC }

6

7LI EM { color: red;

8 font-weight: bold}

9

10UL { margin-left: 2cm }

11

12UL UL { text-decoration: underline;

13 margin-left: .5cm }

Page 20: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

2. LINK element2.1 REL

attribute

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2<HTML>

3

4<!-- Fig. 14.5: imported.html -->

5<!-- Linking external style sheets -->

6

7<HEAD>

8<TITLE>Importing style sheets</TITLE>

9<LINK REL = "stylesheet" TYPE = "text/css" HREF = "styles.css">

10</HEAD>

11

12<BODY>

13

14<H1>Shopping list for <EM>Monday</EM>:</H1>

15<UL>

16<LI>Milk</LI>

17<LI>Bread

18 <UL>

19 <LI>White bread</LI>

20 <LI>Rye bread</LI>

21 <LI>Whole wheat bread</LI>

22 </UL></LI>

23<LI>Rice</LI>

24<LI>Potatoes</LI>

25<LI>Pizza <EM>with mushrooms</EM></LI>

26</UL>

27

28<A HREF = "http://food.com">Go to the Grocery store</A>

29

30</BODY>

31</HTML>

Page 21: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Linking an external style sheet

Page 22: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Positioning Elements

• CSS ‘position’ propertya. Absolute positioning

-Menetapkan elemen ‘position’sebagai ‘absolute’ dapat menghapus dari aliran normal elemen pada halaman-Posisi elemen menurut jarak dari margin top, left, right atau button dari elemen induk

b. z-index atribut-Memungkinkan Anda untuk memperbaiki lapisan elemen yang tumpang tindih-Elemen dengan z-index yang lebih tinggi akan ditampilkan di depan elemen dengan z-index yang lebih rendah

Page 23: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1. position property

1.1 absolute positioning

1.2 z-index

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2<HTML>

3

4<!-- Fig 14.6: positioning.html -->

5<!-- Absolute positioning of elements -->

6

7<HEAD>

8<TITLE>Absolute Positioning</TITLE>

9</HEAD>

10

11<BODY>

12

13<IMG SRC = "i.gif" STYLE = "position: absolute; top: 0px;

14 left: 0px; z-index: 1">

15<H1 STYLE = "position: absolute; top: 50px; left: 50px;

16 z-index: 3">Positioned Text</H1>

17<IMG SRC = "circle.gif" STYLE = "position: absolute; top: 25px;

18 left: 100px; z-index: 2">

19

20</BODY>

21</HTML>

Page 24: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Positioning elements with CSS

Page 25: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.6 Positioning Elements (II)

• CSS ‘position’ property(lanjutan)

a. Posisi relatif-Browser menjabarkan elemen pada halaman-Kemudian offset elemen yang ditentukan nilai top, left, right atau button -Menjaga elemen dalam aliran umum dari elemen pada halaman-Harus berhati-hati untuk menghindari tumpang tindih teks yang tidak disengaja

Page 26: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1. relative positioning

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2<HTML>34<!-- Fig 14.7: positioning2.html -->5<!-- Relative positioning of elements -->67<HEAD>8<TITLE>Relative Positioning</TITLE>910<STYLE TYPE = "text/css">1112 P { font-size: 2em;13 font-family: Verdana, Arial, sans-serif }1415 SPAN { color: red;16 font-size: .6em; 17 height: 1em }1819 .super { position: relative;20 top: -1ex }2122 .sub { position: relative;23 bottom: -1ex }2425 .shiftl { position: relative;26 left: -1ex }2728 .shiftr { position: relative;29 right: -1ex }30</STYLE>31</HEAD>3233<BODY>

Page 27: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

2. Page rendered by browser

34

35<P>

36Text text text text <SPAN CLASS = "super">superscript</SPAN>

37text text text text <SPAN CLASS = "sub">subscript</SPAN>

38text Text text <SPAN CLASS = "shiftl">left-shifted</SPAN>

39text text text <SPAN CLASS = "shiftr">right-shifted</SPAN>

40Text text text text text

41</P>

42

43</BODY>

44</HTML>

Page 28: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.7 Backgrounds• background-image property

– Menentukan URL • background-position property

– Posisi gambar pada halaman – Top, bottom, center, left or right– Ex. background-position: 50% 30px;

• Posisi gambar vertikal terpusat (50% dari jarak di layar) dan 30 pixel dari atas

• background-repeat property controls tiling– no-repeat, repeat, x-repeat, y-repeat

• background-attachment property– fixed: scrolling jendela browser tidak akan memindahkan

gambar – scroll: menggerakkan foto saat user melakukan scroll

window(default) • text-indent property

– Indentasi baris pertama teks dengan jumlah tertentu

Page 29: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.7 Backgrounds (II)

• font-weight property – menentukan “boldness” dari teks– bold– normal– bolder– lighter– Kelipatan (perkalian) 100 dari 100-900

• font-style property– none– italic– oblique

• akan default ke italic jika sistem tidak memiliki file font yang oblique

Page 30: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.7 Backgrounds (III)

• SPAN element: pengelompokan elemen secara generic – Tidak berlaku untuk inheret formating

– Kegunaan utama adalah untuk menerapkan style atau ID atribut untuk blok teks

– Inline element

• DIV element– Serupa dengan SPAN, tapi block-level element

Ditampilkan pada baris sendiri dengan margin atas dan di bawah

Page 31: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1. Use CSS to add a background image

1.1background-image property

1.2background-position property

1.3background-repeat property

1.4background-attachment property

1.5 text-indent property

1.6 font-weight property

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2<HTML>

3

4<!-- Fig. 14.8: background.html -->

5<!-- Adding background images and indentation -->

6

7<HEAD>

8<TITLE>Background Images</TITLE>

9

10<STYLE TYPE = "text/css">

11

12 BODY { background-image: url(watermark.gif);

13 background-position: bottom right;

14 background-repeat: no-repeat;

15 background-attachment: fixed }

16

17 P { font-size: 2em;

18 color: #AA5588;

19 text-indent: 1em;

20 font-family: Arial, sans-serif }

21

22 .dark { font-weight: bold }

23

24</STYLE>

25</HEAD>

26

27<BODY>

28

29<P>

30This is some sample text to fill in the page.

31<SPAN CLASS = "dark">This is some sample

Page 32: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

2. Page rendered by browser

32 text to fill in the page.</SPAN>

33 This is some sample text to fill in the page.

34 This is some sample text to fill in the page.

35 This is some sample text to fill in the page.

36 This is some sample text to fill in the page.

37 </P>

38

39 </BODY>

40 </HTML>

Page 33: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.8 Element Dimensions

• width property– Ex. <DIV STYLE = “width: 20%”>

• height property– Relative dan absolute lengths untuk properti width

dan height • text-align property

– center, left or right• overflow property

– scroll tambahan pada scrollbars jika teks overflows dari batas-batas

Page 34: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1. Dimensions in DIV element

1.1 width property

1.2 height property

1.3 text-align property

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2<HTML>34<!-- Fig. 14.9: width.html -->5<!-- Setting box dimensions and aligning text -->67<HEAD>8<TITLE>Box Dimensions</TITLE>9<STYLE TYPE = "text/css">1011 DIV { background-color: #FFCCFF;12 margin-bottom: .5em }1314</STYLE>15</HEAD>1617<BODY>1819<DIV STYLE = "width: 20%">Here is some20text that goes in a box which is21set to stretch across twenty precent 22of the width of the screen.</DIV>2324<DIV STYLE = "width: 80%; text-align: center">25Here is some CENTERED text that goes in a box 26which is set to stretch across eighty precent of 27the width of the screen.</DIV>2829<DIV STYLE = "width: 20%; height: 30%; overflow: scroll">30This box is only twenty percent of31the width and thirty percent of the height.32What do we do if it overflows? Set the33overflow property to scroll!</DIV>

Page 35: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

2. Page rendered by browser

34

35 </BODY>

36 </HTML>

Page 36: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.9 Text Flow and the Box Model

• Floating– Memungkinkan Anda untuk memindahkan elemen ke

satu sisi layar– Konten lain dalam dokumen yang flows around di

sekitar elemen – Float ke kiri atau kanan dokumen

• Setiap block-level element adalah “boxed” • Model box memungkinkan properti dari box

dengan mudah disesuaikan dengan • Padding• Border• Margins

Page 37: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Box model for block-level elements

Margin

Border

Padding

Page 38: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1. Floating elements

2. Setting box dimensions

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2<HTML>34<!-- Fig. 14.10: floating.html -->5<!-- Floating elements and element boxes -->67<HEAD>8<TITLE>Flowing Text Around Floating Elements</TITLE>9<STYLE TYPE = "text/css">1011 DIV { background-color: #FFCCFF;12 margin-bottom: .5em;13 font-size: 1.5em;14 width: 50% }1516</STYLE>17</HEAD>1819<BODY>2021<DIV STYLE = "text-align: center">Centered text</DIV>22<DIV STYLE = "text-align: right">Right-aligned text</DIV>2324<DIV STYLE = "float: right; margin: .5em">This is some floated25text, floated text, floated text, floated text.</DIV>26<P>27Here is some flowing text, flowing text, flowing text.28Here is some flowing text, flowing text, flowing text.29Here is some flowing text, flowing text, flowing text.30Here is some flowing text, flowing text, flowing text.31Here is some flowing text, flowing text, flowing text.32Here is some flowing text, flowing text, flowing text.33Here is some flowing text, flowing text, flowing text.

Page 39: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline34Here is some flowing text, flowing text, flowing text.

35</P>

36

37<P><DIV STYLE ="float: right; padding: .5em">This is some floated

38text, floated text, floated text, floated text.</DIV>

39Here is some flowing text, flowing text, flowing text.

40Here is some flowing text, flowing text, flowing text.

41Here is some flowing text, flowing text, flowing text.

42<SPAN STYLE = "clear: right">Here is some unflowing text.

43Here is some unflowing text.</SPAN>

44</P>

45

46</BODY>

47</HTML>

Interrupt flow of text around a floated element by setting the clear property to the same direction the element is floated

Page 40: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Floating elements, aligning text and setting box dimensions

.5 em margin

.5 em padding

Page 41: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.9 Text Flow and the Box Model (II)• Box model border

– border-width– border-style

• E.g. border-top-style• none• hidden• dotted• dashed• solid• double• groove• ridge• inset• outset

– border-color• E.g. border-left-color

Page 42: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1. Box model border properties

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2<HTML>34<!-- Fig. 14.12: borders.html -->5<!-- Setting borders of an element -->67<HEAD>8<TITLE>Borders</TITLE>9<STYLE TYPE = "text/css">1011 BODY { background-color: #CCFFCC }1213 DIV { text-align: center;14 margin-bottom: 1em;15 padding: .5em }1617 .thick { border-width: thick }1819 .medium { border-width: medium }2021 .thin { border-width: thin }2223 .groove { border-style: groove }2425 .inset { border-style: inset }2627 .outset { border-style: outset }2829 .red { border-color: red }3031 .blue { border-color: blue }3233</STYLE>

Page 43: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline34</HEAD>

35

36<BODY>

37

38<DIV CLASS = "thick groove">This text has a border</DIV>

39<DIV CLASS = "medium groove">This text has a border</DIV>

40<DIV CLASS = "thin groove">This text has a border</DIV>

41

42<P CLASS = "thin red inset">A thin red line...</P>

43<P CLASS = "medium blue outset">And a thicker blue line</P>

44

45</BODY>

46</HTML>

Page 44: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Applying borders to elements

Page 45: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1. Creating borders with border-style property

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2<HTML>34<!-- Fig. 14.13: borders2.html -->5<!-- Various border-styles -->67<HEAD>8<TITLE>Borders</TITLE>910<STYLE TYPE = "text/css">1112 BODY { background-color: #CCFFCC }1314 DIV { text-align: center;15 margin-bottom: .3em;16 width: 50%;17 position: relative; 18 left: 25%;19 padding: .3em }20</STYLE>21</HEAD>2223<BODY>2425<DIV STYLE = "border-style: solid">Solid border</DIV>26<DIV STYLE = "border-style: double">Double border</DIV>27<DIV STYLE = "border-style: groove">Groove border</DIV>28<DIV STYLE = "border-style: ridge">Ridge border</DIV>29<DIV STYLE = "border-style: inset">Inset border</DIV>30<DIV STYLE = "border-style: outset">Outset border</DIV>31</BODY>32</HTML>

Page 46: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Various border-styles

Page 47: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

14.10 User Style Sheets

• Masalah penting ketika menambahkan style sheet: User macam apa yang akan menggunakan situs Anda?

• User dapat menentukan style sheet mereka sendiri • Spesifikasi CSS diutamakan kepada author (penulis) style

untuk memberikan style ke user style • Gunakan ukuran relative-lengths • Cara menambahkan sebuah user style sheet in IE5

– Tools menu Internet Options…• Accessibility…

– Check Format documents using my style sheet

Page 48: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1.1 Use em measurement to modify text size

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2<HTML>

3

4<!-- Fig. 14.14: user.html -->

5<!-- User styles -->

6

7<HEAD>

8<TITLE>User Styles</TITLE>

9

10<STYLE TYPE = "text/css">

11

12 .note { font-size: 1.5em }

13

14</STYLE>

15</HEAD>

16

17<BODY>

18

19<P>Thanks for visiting my Web site. I hope you enjoy it.</P>

20<P CLASS = "note">Please Note: This site will be moving soon.

21Please check periodically for updates.</P>

22

23</BODY>

24</HTML>

Page 49: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Modifying text size with the em measurement

Page 50: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Adding a user style sheet in Internet Explorer 5

Page 51: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Outline

1. A sample user style sheet

2. A Web page with user styles enabled

1BODY { font-size: 20pt;

2 background-color: #CCFFCC }

3A { color: red }

Page 52: CSS (Kelompok 05)

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

SEKIAN

TERIMA KASIH