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