Css EBook
Css EBook
1. Pengenalan CSS
CSS merupakan kepanjangan dari Cascading Style Sheet yaitu suatu dokumen yang digunakan untuk
melakukan pengaturan halaman web.
Apa itu CSS :
CSS singkatan dari Cascading Style Sheets
Styles didefinisikan bagaimana manampilkan elemen HTML
Styles umumnya disimpan ke dalam Style Sheet
Styles ditambahkan HTML untuk membantu pekerjaan
External Style Sheets dapat membantu banyak pekerjaan
ExternalStyle Sheet disimpan dalam CSS files
Multiple Style dapat didefinisi banyak jendela menjadi satu
Menggunakan CSS tidak memerlukan perangkat lunak tertentu karena merupakan script yang telah
embeded dengan HTML. Cukup menggunakan aplikasi seperti note pad, anda sudah mampu
menciptakan script CSS sendiri
Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun
bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets
merupakan kelebihan tersendiri.
Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada.
Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bias
menyebutnya sebagai template dari documents HTML yang menggunakanya.
Anda juga bisa membuat efek-efek sepsial di web anda dengan menggunakan style sheet. Sebagai
contoh anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan
italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan
menggunakan font verdana dan masih banyak lagi yang bias anda lakukan dengan style sheet.
Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada
prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web
Browser. Karena CSS telah di setandartkan oleh World Wide Web Consortium (W3C) untuk di
gunakan di web browser.
Pada perkembangannya CSS sudah masuk level 3 untuk sekarang, dimana dimulai CSS level 1 atau
yang sering di sebut CSS aja, kemudian level 2 yang merupakan penyempurnaan dari CSS level
sebelumnya, yaitu CSS level 1.
CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai
banyak keuntungan, diantaranya :
- Ukuran file lebih kecil
- Load file lebih cepat
- Dapat berkolaborasi dengan JavaScript
- Pasangan setia XHTML
- Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
- Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.
- Dan banyak lagi yang lainnya.
MULOK/XII/08-09
Hal:1
2.
3.
4.
p {text-align:center;color:red}
5.
P{font-family:sans serif}
body{ color:black}
6.
p
{
text-align: center;
color: black;
font-family: arial
}
h1,h2,h3,h4,h5,h6
{
color: green
}
Catatan:
Jangan ada spasi antara property value dengan unitnya(1).
Nama property bersifat case sensitif dan menggunakan huruf kecil.
Jika nilai /value lebih dari satu kata, maka gunakan tanda petik di antara nilai(2)
Jika property lebih dari satu, maka gunakan tanda titik koma untuk membatasi property
lain(3,5).
Jika selector lebih dari dan mempunyai property dan value yang sama maka gunakan tanda
koma(6).
Ada tiga cara penempatan kode CSS dalam HTML, yaitu :
1. Internal CSS
Yaitu menuliskan langsung script CSS di file HTML-nya.
Contoh :
<html>
<head>
<title>Belajar CSS</title>
<style type=text/css>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>
MULOK/XII/08-09
Hal:2
2. External CSS
Yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan
file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format
tersebut.Eksternal style ditulis di text editor lain dengan ekstention .css Untuk lebih jelasnya kita
lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
<link rel=stylesheet type=text/css href=test.css/>
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>
3. Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=background: blue; color: white;>Style Menggunakan
CSS</p>
</body>
</html>
Class Selector
Dengan class selector dapat mendefinisikan perbedaan style untuk tag elemen html yang sama.
Misalnya, dua type paragraph dalam dokumen.Yang satu paragraph align-right dan yang satu
paragraph align-center.
Contoh:
p.right {text-align: right}
p.center {text-align: center}
atau
MULOK/XII/08-09
Hal:3
Hal:4
letter-spacing
text-align
text-decoration
text-indent
text-shadow
text-transform
MULOK/XII/08-09
Description
Sets the color of a text
Sets the text direction
Values
color
ltr
rtl
Sets the distance between
normal
lines
number
length
%
Increase or decrease the
normal
space between characters
length
Aligns the text in an element left
right
center
justify
Adds decoration to text
none
underline
overline
line-through
blink
Indents the first line of text length
in an element
%
none
color
length
Controls the letters in an
none
element
capitalize
uppercase
lowercase
IE
3
6
F
1
1
N
4
6
W3C
1
2
Hal:5
unicode-bidi
white-space
word-spacing
normal
embed
bidi-override
normal
pre
nowrap
normal
length
Description
Sets the sides of an element
where other floating elements
are not allowed
cursor
display
MULOK/XII/08-09
Values
Left
right
both
none
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
IE
4
F
1
N
4
W3C
1
Hal:6
float
position
visibility
border-spacing
caption-side
MULOK/XII/08-09
Description
Sets whether the table
borders are collapsed into a
single border or detached as
in standard HTML
Sets the distance that
separates cell borders (only
for the "separated borders"
model)
Sets the position of the table
Values
collapse
separate
IE
5
F
1
N
7
W3C
2
length length
5M
top
5M
Hal:7
caption
empty-cells
table-layout
bottom
left
right
Sets whether or not to show show
empty cells in a table (only hide
for the "separated borders"
model)
Sets the algorithm used to
auto
display the table cells, rows, fixed
and columns
5M
Values
IE
background-color
4
background-image
background-repeat
background-attachment
background-position
background-attachment Sets whether a background scroll
4
image is fixed or scrolls with fixed
the rest of the page
background-color
Sets the background color of color-rgb
4
an element
color-hex
color-name
transparent
background-image
Sets an image as the
url(URL)
4
background
none
MULOK/XII/08-09
Description
A shorthand property for
setting all background
properties in one declaration
F
1
N
6
W3C
1
Hal:8
background-position
background-repeat
MULOK/XII/08-09
Description
A shorthand property for
setting all of the properties
for a font in one declaration
Values
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
IE
4
F
1
N
4
W3C
1
Hal:9
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
status-bar
A prioritized list of font
family-name
family names and/or generic generic-family
family names for an element
Sets the size of a font
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
Specifies an aspect value for none
an element that will preserve number
the x-height of the firstchoice font
Condenses or expands the
normal
current font-family
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
Sets the style of the font
normal
italic
oblique
Displays text in a small-caps normal
font or a normal font
small-caps
Sets the weight of a font
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
Hal:10
Contoh:
<html>
<head>
<style type="text/css">
p
{
font: italic small-caps 900 20px arial
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
Catatan: Property ini juga mempunyai enam nilai: "line-height", penulisan spasi dengan garis.
Contoh:
P
{
font: 12px arial
}
p
{
font: italic small-caps bold 12px arial
}
p
{
font: oblique small-caps 900 12px/14px arial
}
p
{
font: menu
}
Possible Values
Value
Description
font-style
Sets the properties for a font. The line-height value sets the space between lines.
font-variant
The value can be a number, a %, or a font size.
font-weight
Default value: Browser dependent
font-size/lineheight
font-family
Caption
Defines the font that are used by captioned controls (like buttons, drop-downs,
etc.)
Icon
Defines the fonts that are used by icon labels
Menu
Defines the fonts that are used by dropdown menus
Message-box
Defines the fonts that are used by dialog boxes
small-caption
status-bar
Defines the fonts that are used by window status bars
MULOK/XII/08-09
Hal:11
list-style-image
list-style-position
list-style-type
MULOK/XII/08-09
Description
Values
A shorthand property for
list-style-type
setting all of the properties list-style-position
for a list in one declaration list-style-image
Sets an image as the list-item none
marker
url
Sets where the list-item
inside
marker is placed in the list
outside
Sets the type of the list-item none
marker
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
IE
4
F
1
N
6
W3C
1
Hal:12
marker-offset
hiragana
katakana
hiragana-iroha
katakana-iroha
auto
length
Hal:13
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>Note:</b> The "border-color"</p>
</body>
</html>
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: Penomoran "W3C" kolom indikasi yang mana CSS merekomendasikan definisi property (CSS1 or
CSS2).
Property
border
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
MULOK/XII/08-09
Description
A shorthand property for
setting all of the properties
for the four borders in one
declaration
A shorthand property for
setting all of the properties
for the bottom border in one
declaration
Sets the color of the bottom
border
Sets the style of the bottom
border
Sets the width of the bottom
border
Values
border-width
border-style
border-color
IE
4
F
1
N
4
W3C
1
border-bottom-width
border-style
border-color
border-color
border-style
thin
medium
thick
length
color
border-left-width
border-style
border-color
border-color
border-style
thin
medium
thick
length
border-right-width
border-style
border-color
border-color
Hal:14
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
border-style
thin
medium
thick
length
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top-width
border-style
border-color
border-color
border-style
thin
medium
thick
length
A shorthand property for
thin
setting the width of the four medium
borders in one declaration, thick
can have from one to four
length
values
The CSS margin properties define the space around elements. It is possible to use negative values
to overlap content. The top, right, bottom, and left margin can be changed independently using
separate properties. A shorthand margin property can also be used to change all of the margins at
once.
Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera
applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have
it display correctly in Opera, the body padding must be set as well!
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is
defined (CSS1 or CSS2).
Property
Description
Values
IE F N W3C
margin
A shorthand property for
margin-top
4
1 4 1
setting the margin properties margin-right
in one declaration
margin-bottom
MULOK/XII/08-09
Hal:15
margin-bottom
margin-left
margin-right
margin-top
MULOK/XII/08-09
margin-left
Sets the bottom margin of an auto
element
length
%
Sets the left margin of an
auto
element
length
%
Sets the right margin of an
auto
element
length
%
Sets the top margin of an
auto
element
length
%
Hal:16