Scribd
Upload
23 views77 pages

3 - Cascading Style Sheet

Uploaded by

dyah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
23 views77 pages

3 - Cascading Style Sheet

Uploaded by

dyah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODP, PDF, TXT or read online on Scribd
You are on page 1/ 77

Cascading Style Sheet

1
CSS BOX MODEL
► Semua element HTML menganut prinsip
“box model”
► Komponen:
 Content
 Padding di sekitar content
 Border di sekeliling padding
 Margin di seputar border

2
3
Contoh 1
► <html>
► <head>
► <style type="text/css">
► #box {
► width: 350px;
► border-color: red;
► border-style: dashed;
►}
► </style>
► </head>
4
Contoh 1
► <body>
► This is text outside the box.
► PHP (recursive acronym for "PHP: Hypertext
Preprocessor") is a widely-used Open
Source general-purpose scripting language
that is especially suited for Web
development and can be embedded into
HTML.
5
Contoh 1
► <div id="box">
► This is text inside the box.
► PHP (recursive acronym for "PHP: Hypertext
Preprocessor") is a widely-used Open Source
general-purpose scripting language that is
especially suited for Web development and can be
embedded into HTML.
► </div>
► </body>
► </html>

6
CONTOH 1

7
Contoh 2
► #box {
    width: 350px;
    border-color: red;
    border-style: dashed;
padding: 10px; 
► }

8
Contoh 2

9
Contoh 3
► #box {
► width: 350px;
► border-color: red;
► border-style: dashed;
► padding: 10px;
► border-width: 15px; 
►}

10
Contoh 3

11
Contoh 4
► #box {
► width: 350px;
► border-color: red;
► border-style: dashed;
► padding: 10px;
► border-width: 15px;
► margin-top: 40px; 
►}
12
Contoh 4

13
Contoh 5
► #box {
► width: 350px;
► border-color: red;
► border-style: dashed;
► padding: 10px;
► border-width: 15px;
► margin: 40px;
►}

14
Contoh 5

15
16
17
18
FONT
►font-family
►font-style
►font-variant
►font-weight
►font-size
►font
19
font-family
font-family ► Family-name:
font-style
font-variant
 Arial, Time New Roman, Tahoma
font-weight ► Generic Name:
font-size
font
 Serif, san-serif, monospace

20
► Serif:
 Time New Roman
 Garamond
 Georgia
► San-serif:
 Trebuchet
 Arial
 Verdana
► Monospace:
 Courier-New
21
► h1 {font-family: arial, verdana, sans-serif;}
► h2 {font-family: "Times New Roman", serif;}

22
font-style
font-family ► h1 {font-family: arial, verdana,
font-style
font-variant
sans-serif;}
font-weight ► h2 {font-family: "Times New
font-size
font
Roman", serif; font-style: italic;}

23
font-variant
font-family
font-style
► h1 {font-variant: small-caps;}
font-variant ► h2 {font-variant: normal;}
font-weight
font-size
font

24
font-weight
font-family
font-style
►p {font-family: arial, verdana, sans-
font-variant serif;}
font-weight
► td {font-family: arial, verdana,
font-size
font sans-serif; font-weight: bold;}

25
font-size
font-family
font-style
► h1 {font-size: 30px;}
font-variant ► h2 {font-size: 12pt;}
font-weight
font-size ► h3 {font-size: 120%;}
font
► p {font-size: 1em;}

26
27
font
font-family
font-style p { font-style: italic;
font-variant font-weight: bold;
font-weight
font-size font-size: 30px;
font
font-family: arial, sans-serif; }

p { font: italic bold 30px arial, sans-


serif; }

28
Text
►text-indent
►text-align
►text-decoration
►letter-spacing
►text-transform

29
text-indent
text-indent ►p { text-indent: 30px; }
text-align
text-decoration
letter-spacing
text-transform

30
text-align
text-indent ► th { text-align: right; }
text-align
text-decoration ► td { text-align: center; }
letter-spacing
► p { text-align: justify; }
text-transform

31
text-decoration
text-indent ► h1 { text-decoration: underline; }
text-align
text- ► h2 { text-decoration: overline; }
decoration
letter-spacing
► h3 { text-decoration: line-
text-transform through; }

32
letter-spacing
text-indent ► h1 { letter-spacing: 6px; }
text-align
text-decoration ► p { letter-spacing: 3px; }
letter-spacing
text-transform

33
text-indent ► h1 { text-transform:
text-align
text-decoration uppercase; }
letter-spacing ► li { text-transform: capitalize; }
text-transform

34
Link
► a:link { color: blue; }
► a:visited { color: red; }
► a:active { background-color: #FFFF00; }
► a:hover { color: orange; font-style: italic; }

35
36
37
38
Identifikasi Element
Class & id

39
Class
►a { color: blue; }
► a.whitewine { color: #FFBB00; }
► a.redwine { color: #800000; }

40
► <p>Grapes for white wine:</p>
► <ul>
 <li><a href="ri.htm"
class="whitewine">Riesling</a></li>
 <li><a href="ch.htm"
class="whitewine">Chardonnay</a></li>
 <li><a href="pb.htm"
class="whitewine">Pinot Blanc</a></li>
► </ul>
41
► <p>Grapes for red wine:</p>
► <ul>
 <li><a href="cs.htm"
class="redwine">Cabernet
Sauvignon</a></li>
 <li><a href="me.htm"
class="redwine">Merlot</a></li>
 <li><a href="pn.htm"
class="redwine">Pinot Noir</a></li>
► </ul>
42
43
Id
► #c1-2 { color: red; }
► -------------------------------------------------

► <h1 id="c1">Chapter 1</h1> ...


► <h2 id="c1-1">Chapter 1.1</h2> ...
► <h2 id="c1-2">Chapter 1.2</h2>

44
Pengelompkan Element
<span> & <div>

45
Pengelompkan Element
► Tag <span> tidak menambahkan apapun
pada HTML
► Namun <span> dapat menambahkan visual
effect pada text

46
►span.benefit { color:red; }

47
► <p>Earlyto bed and early to rise
makes a man <span
class="benefit">healthy</span>,
<span
class="benefit">wealthy</span>
and <span
class="benefit">wise</span>.</p>

48
49
<div>
► Digunakanuntuk mengelompokkan
beberapa element sekaligus

50
► <div id="mobil">
► <ul>
 <li>Avanza</li>
 <li>Inova</li>
 <li>Swift</li>
► </ul>
► </div>

51
► <div id="motor">
► <ul>
 <li>Mio</li>
 <li>Supra X</li>
 <li>Mega Pro</li>
► </ul>
► </div>

52
► #mobil {
► background:blue;
►}

► #motor {
► background:red;
►}

53
54
Floating elements

55
56
► <div id="picture">
► <img src="bill.jpg" alt="Bill Gates">
► </div>
► <p>causas naturales et antecedentes, idciro
etiam nostrarum voluntatum...</p>

57
► #picture { float:left; width: 100px; }

58
► <div id="column1">
 <p>Haec disserens qua de re agatur et in quo causa
consistat non videt...</p>
► </div>
► <div id="column2">
 <p>causas naturales et antecedentes, idciro etiam
nostrarum voluntatum...</p>
► </div>
► <div id="column3">
 <p>nam nihil esset in nostra potestate si res ita se
haberet...</p>
► </div>
59
► #column1 { float:left; width: 100px;
padding: 5px; border-style: dashed; margin:
10px; border-width: 1px;}
► #column2 { float:left; width: 100px;
padding: 5px; border-style: dashed; margin:
10px; border-width: 1px;}
► #column3 { float:left; width: 100px;
padding: 5px; border-style: dashed; margin:
10px; border-width: 1px;}
60
61
Posisi Elemen

►CSS dapat digunakan untuk


meletakkan sebuah di
koordinat sesua dengan
keinginan desainer web
 Absolute
 Relative
62
63
64
h1 { position:absolute;
top: 100px;
left: 200px; }

65
Relative
► <P ID="one">This is box one.</P>
► <P ID="two">This is box two.</P>
► <P ID="three">This is box three.</P>

66
1► P#one {
► color: green;
► P#two { ► width: 150px;
► color: red; ► border-width: 1px;
► top: 50px; ► border-style: solid;
► left: 10px; ►}
► width: 150px;
► border-width: 1px; ► P#three {
► border-style: solid; ► color: blue;
►} ► width: 150px;
► border-width: 1px;
► border-style: solid;
67

►}
68
►P#two { ► P#one {
► position: absolute;
► color: green;
► width: 150px;
► color: red; ► border-width: 1px;
► top: 100px; ► border-style: solid;
► left: 30px; ► }
► width: 150px;
► P#three {
► border-width: 1px; ► color: blue;
► border-style: solid; ► width: 150px;
►} ► border-width: 1px;
► border-style: solid;
► }
69
70
►P#two { ► P#one {
► position: relative;
► color: green;
► width: 150px;
► color: red; ► border-width: 1px;
► top: 100px; ► border-style: solid;
► left: 30px; ► }
► width: 150px;
► P#three {
► border-width: 1px; ► color: blue;
► border-style: solid; ► width: 150px;
►} ► border-width: 1px;
► border-style: solid;
► }
71
Posisi
Normal

72
► #ten_of_diamonds { ► #queen_of_diamonds {
► position: absolute; ► position: absolute;
► left: 100px; ► left: 130px;
► bottom: 100px; ► bottom: 130px;
► z-index: 1; ► z-index: 3;
► } ► }

► #jack_of_diamonds { ► #king_of_diamonds {
► position: absolute; ► position: absolute;
► left: 115px; ► left: 145px;
► bottom: 115px; ► bottom: 145px;
► z-index: 2; ► z-index: 4;
► } ► }
73
► #ace_of_diamonds {
► position: absolute;
► left: 160px;
► bottom: 160px;
► z-index: 5;
►}

74
► <div id="jack_of_diamonds">
► <img src="diamonds_jack.gif" alt="Jack of diamonds">
► </div>

► <div id="queen_of_diamonds">
► <img src="diamonds_queen.gif" alt="Queen of diamonds">
► </div>

► <div id="king_of_diamonds">

► <img src="diamonds_king.gif" alt="King of diamonds">


► </div>

► <div id="ace_of_diamonds">
► <img src="diamonds_ace.gif" alt="Ace of diamonds">
► </div>

75
76
Blog

http://dess.if.upnyk.ac.id

77

You might also like