Anda di halaman 1dari 25

Pemrograman web

CSS

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease


Class Page Layout

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Div HTML
<div id="container">content Tag untuk memuat
<div id="title">content</div> tag lain
<div id="main">content Mirip JPanel
<div id="news">content</div>
</div>
<div id="menu">content</div>
<div
id="footer">content</div></div>

Divs in HTML file match Divs in CSS file.

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Divs pada CSS

#container { property: value; }


#title { property: value; }
#menu { property: value; }
#main { property: value; }
#news { property: value; }
#footer { property: value; }

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Box Properties

• Background-color
• Border-width
• Width
• Border-color
• Padding
• Border-style
• Margin

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
17 CSS Colors
• Navy
• Aqua
• Olive
• Black
• Orange
• Blue
• Purple
• Fuchsia
• Red
• Gray
• Silver
• Green
• Teal
• Lime
• White
• Maroon
• Yellow

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Box model layout

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease http://weblog.dion.nu/
Background-Color
Warna background

#container { background-color: blue; }


#title { background-color: white; }
#menu { background-color: red; }
#main { background-color: green; }
#news { background-color: purple; }
#footer { background-color: black; }
Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Relative Positioning
Relative positioning lebih diutamakan

Percent {width:25%;} or {height:25%;}


Pixels {width:100px;} or {height:500px;}
Em {width: .5em;} or {height: 3em;}

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Width
Lebar sebuah elemen

#container { background-color: blue; width:90%; }

#menu { background-color: red; width: 15%; }


#main { background-color: green; width: 85%; }
#news { background-color: purple; width: 12%; }

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
?
Float: (left, right)
#menu { background-color: red; width: 15%; float: left;}
#news { background-color: purple; width: 10%; float: right;}

#main { background-color: green; width: 85%; float: right;}

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Clear: (left, right, both)

The clear property disallows floating


elements to the right, left, or both right and
left. A companion property to float.

#footer { background-color: black; clear: both;}

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Border Properties
Border-color Border-style
•Blue •None
•#ff0000 •Solid
•rgb(250,0,255) •Double
•Dotted
•Dashed
Border-width •Groove
•Thin •Ridge
•Medium •Inset
•Thick •Outset

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Borders, Examples
Untuk border
dapat
Border-width: medium; dideklarasikan
Border-style: outset; semua atau
Border-color: lime; sebagian
Border-bottom-color: teal;
Border-right-width: thin;
Border-top-style: dashed;

Border: thick outset silver;


Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
?
Margin, Border, Padding

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Padding
Padding merupakan spasi antara isi dengan border
Padding bisa digunakan untuk sekeliling isi elemen atau
sebagian saja :padding-right, padding-left, padding-top,
and padding-bottom.
Padding: 1em;

Padding-left: 1em;

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Margin

Padding merupakan ruang di


Margin: 1em; sekitar border
Padding bisa digunakan untuk
Margin-right: 1em;
sekeliling isi elemen atau
sebagian saja :padding-right,
padding-left, padding-top, and
padding-bottom.

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Including Images

• Background-image
• Background-repeat
• Background-position
• Background-attachment

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Background-Image
background-image menambahkan gambar pada
backgroud element HTML

main {background-
image:url(mountainsandsky.jpg);}
• Background images and
colors are layered.
• If not transparent, the
last one listed is visible.
Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Background-Repeat

main {background-
image:url(fairytransparent.gif); background-
repeat:no-repeat;}
repeat
Possible Values
• Repeat
• Repeat-x (horizontal)
• Repeat-y (vertical)
• No-repeat
Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
no-repeat
Layering
Background color dan background image
mirip dengan lapisan kertas. Yang satu
menutupi yang lain

#container { width:90%;} /*background-


color: blue; */
#title { Padding: 1em;} /*background-color:
white; */
#menu { width: 15%; float: left; Padding:
1em; } /*background-color: red; */

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Image Positioning

Terdiri atas dua properties


• Background-position
• Background-attachment

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Background-Position

top, bottom, left, right, and


center; length values; or
percentage values.

Background-position: right top;

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Background-Attachment
The background-attachment property : fixed
dan scroll

Background-attachment: fixed;

Cascading
CascadingStyle
StyleSheets
Sheets(CSS):
(CSS):Pixel-Level
Pixel-LevelControl
Controlwith
withHTML
HTMLEase
Ease
Tugas
• Membuat HTML (table + form) + Linked CSS

Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease