Post on 14-Mar-2018
Pengenalan CSS & Kumpulan Tag CSS
Pengenalan CSS
A. Sejarah Singkat CSS
Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web. Tujuannya adalah mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet Explorer (IE), karena pada masa itu keduabrowser saling bersaing mengembangkan TAG sendiri untuk mengatur tampilan web.
CSS level 1 mendukung pengaturan tampilan dalam hal:1. Font (jenis, ketebalan),2. Warna teks, latar belakang, dan elemen lainnya,3. Text attributes, misalnya spasi antar baris, kata, dan huruf,4. Posisi text, gambar, tabel, dan elemen lainnya,5. Marjin, border, dan padding,
Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan standard CSS2 (CSS level 2) – yang menjadi standard hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada International accesibility and capability khususnyamedia-specific CSS.
Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.
B. Pengertian & Manfaat CSS
Menurut Wikipedia, Cascading Style Sheets (CSS) adalah:“bahasa pemrograman untuk mengatur tampilan suatu website atau blog”
Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS merupakan kelebihan tersendiri.
Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan script yang telahembedded dengan HTML. Anda cukup menggunakan aplikasi notepad untuk menciptakan script CSS sendiri.
Manfaat dari CSS:1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia XHTML,
5. Digunakan dalam hampir semua web browser.
C. Sintaks & Penempatan Kode CSS
Sintaks CSS terdiri dari tiga bagian: selector
property
value
Selector adalah elemen atau tag HTML yang akan di-definisi-kan.
Property adalah atribut yang akan diganti dengan “nilai” tertentu. Properti dan nilai dipisahkan dengan tanda titik dua (:) dan keduanya diapit oleh tanda kurung kurawal ({).
Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan:
selector { property: value}contoh 1:p { color:black }
Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (“). Untuk memberikan lebih dari satu roperty bagi suatu roperty, pisahkan setiap kombinasi “property:value” dengan tanda titik koma (;). Untuk membuat definisi gaya lebih mudah dibaca, definisi tiap propertydapat dilakukan per baris. Sehingga sintaksnya menjadi:
selector { property1: value; property2: “value_value”; … }contoh 2:p { text-align:center; font-family:“sans serif” }
Aturan-aturan yang berlaku dalam sintaks CSS:1. Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2),
2. Nama properti bersifat CASE SENSITIVE dan menggunakan huruf kecil,
3. Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma (;) untuk membatasi properti yang satu dengan yang lain (contoh 2),
4. Jika selector lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma (,).
contoh: h1,h2,h3 {color:green}
Class selectorDengan menggunakan class selector, Anda dapat mendefinisikan
perbedaan style untuk tag elemen html yang sama.contoh 3:
Misalkan Anda ingin membuat dua tipe paragraf dalam dokumen, yang satu rata kanan, dan yang lain rata kiri. Maka:
p.right {text-align: right}dan
p.left {text-align: left}Aturan Class selector:
1. Jangan memberi nama class dengan angka,
2. Jika memberikan nama class lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik (“).
Atribut IDAturan penamaan ID:
1. Dapat mengandung huruf, angka, atau karakter garis bawah,
2. Karakter pertama harus berupa huruf atau karakter garis bawah,
3. Diawali dengan tanda #,
4. Jangan memberi nama id sama dengan value,
5. Jangan memberi nama id dengan tag html kemudian diikuti tanda #.
contoh 4:
<html>
<head>
<style type = "text/css">
<!--
#tebal { font-weight : bold;
color : blue; }
#miring { font-style : italic;
color: pink; }
-->
</style>
</head>
<body>
<h1>Contoh</h1>
<h2 id = "miring">
The quick brown fox jumps over the lazy dog
</h2>
<h3 id = "tebal">
And then it falls into the well
</h3>
</body>
</html>
Penempatan kode CSS dalam HTMLAda tiga cara penempatan kode CSS dalam HTML:
1. Internal CSS
Metode penulisan kode CSS langsung dalam file HTML. contoh:
<html>
<head>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Menguak Rahasia CSS</p>
</body>
</html>
2. Eksternal CSS
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. contoh:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”test.css”/>
</head>
<body>
<h3>Menguak Rahasia CSS</h3>
</body>
</html>
3. Inline CSS
Penulisan kode CSS dalam tag HTML. contoh:
<html>
<head>
</head>
<p style=”background: red; color: black;”>Menguak Rahasia
CSS</p>
</body>
</html>
Kumpulan Tag CSS
“One of the best ways to learn CSS is to jump right in and start to get into the page layouts.”
~ www.css-mastery.com ~
Pada bab kedua ini, kumpulan tag CSS beserta contoh-contoh penggunaannya pada beberapa bagian. Berikut ini adalah table-tabel properti dan ‘nilai’ dari CSS:
a. Text
Property Deskripsi Values
color Mengeset warna teks color
direction Mengeset arah teks ltr
rtl
line-height Mengeset jarak antar garis normal
number
length
%
letter-spacing Menambah atau mengurangi jarak
antar karakter
normal
length
text-align Mengatur teks agar rata kanan,
kiri, tengah, atau kanan-kiri pada
elemen
left
right
center
justify
text-decoration Menambah dekorasi pada teks none
underline
overline
line-through
blink
text-indent Mengindentasikan baris pertama
teks pada elemen
length
%
text-shadow none
color
length
text-transform Mengontrol huruf pada elemen none
capitalize
uppercase
lowercase
unicode-bidi normal
embed
bidi-override
white-space Mengeset bagaimana ruang putih
di dalam elemen ditangani
normal
pre
nowrap
word-spacing Menambah atau mengurangi jarak normal
antar kata length
Contoh penggunaan tag dan property text :<html>
<head>
<style type="text/css">
p.satu {color: #FF0000; letter-spacing:length;}
p.dua {color: #000080; text-decoration:underline;}
p.tiga {text-align:justify; direction:rtl;}
</style>
</head>
<body>
<p class="satu">Everything that humans can imagine</p>
<p class="dua">is a possibility in reality</p>
<p class="tiga">Willy Karen - psychologist</p>
</body>
</html>
b. Pseudo-elements
Pseudo-element Kegunaan
:first-letter Menambahkan style spesial pada huruf pertama sebuah teks
:first-line Menambah spesial style pada baris pertama sebuah teks
:before Menyisipkan suatu konten sebelum elemen
:after Menyisipkan suatu konten setelah elemen
Contoh penggunaan tag dan property pseudo-elements :
<html>
<head><style>
p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}
</style></head>
<body>
<p>Tulisan pertama dalam suatu paragraph.</p>
</body>
</html>
c. Font
Property Deskripsi Values
font Mengeset semua properti untuk
font(huruf) dalam satu deklarasi
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family Prioritas list untuk font family
dan/atau generic pada suatu
elemen
family-name
generic-family
font-size Mengset ukuran dari font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-size-adjust Menspesifikasi aspek nilai untuk
sebuah elemen yang akan
mempertahankan tinggi-x dari font
pilihan pertama
none
number
font-stretch Memadatakan atau melonggarkan
font-family yang digunakan
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Mengeset style dari font normal
italic
oblique
font-variant Menampilkan teks dalam small-
caps font atau normal font
normal
small-caps
font-weight Mengeset ketebalan huruf normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
Contoh penggunaan tag dan property font :<html>
<head>
<style type="text/css">
p.italic {font-style: italic; font-family:"courier"; font-
size:16;}
p.oblique {font-style: oblique}
</style>
</head>
<body>
<p class="italic">Menguak Rahasia CSS</p>
<p class="oblique">Kumpulan Tag</p>
</body>
</html>
d. Background
Property Deskripsi Values
background Mengeset semua properti
background dalam satu deklarasi
background-color
background-image
background-repeat
background-attachment
background-position
background-attachment Mengeset kondisi posisi
background; antara dapat discroll
atau tidak dapat digerakkan dalam
halaman
scroll
fixed
background-color Mengeset warna latar background
suatu elemen
color-rgb
color-hex
color-name
transparent
background-image Mengeset sebuah gambar menjadi
sebuah background
url(URL)
none
background-position Mengeset posisi background top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat Mengeset apakah/bagaimana
background akan diulang
repeat
repeat-x
repeat-y
no-repeat
Contoh penggunaan tag dan property background :
<html>
<head>
<style>
body { background-color: black; }
p { background-color: gray; }
h2 { background-color: red; }
ul { background-image: url(pics/cssT/smallPic.jpg);
background-repeat: repeat-y; color: green; }
</style>
</head>
<body>
<h2>CSS Backgrounds</h2>
<p>This page has a black background. If you make a black
background be sure that
you change the font color from its default black value. On
the other hand, you could
just change the backgrounds of the HTML elements, as we have
done for the paragraph and the header.</p>
<ul>
<li>This list has a picture on the left</li>
<li>Because it was set to repeat-y</li>
<li>And not to repeat-x</li>
</ul>
</body>
</html>
e. Table
Property Deskripsi Values
border-collapse Mengeset apakah border tabel
collapse pada satu border atau
terpisah sesuai standar HTML
collapse
separate
border-spacing Mengeset jarak yang memisahkan
border sel (khusus untuk model
separate-border)
length length
caption-side Mengeset posisi dari judul tabel top
bottom
left
right
empty-cells Megeset apakah sel kosong
ditampilkan pada tabel atau tidak
(khusus untuk model separate-
border)
show
hide
table-layout Mengeset algoritma yang
digunakan untuk menampilkan
sel tabel, baris, dan kolom
auto
fixed
Contoh penggunaan tag dan property table :<html>
<head>
<style type="text/css">
table
{border-collapse: separate;
empty-cells: show}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Q1</td>
<td>Q2</td>
</tr>
<tr>
<td colspan=2 align=center>Q3</td>
</tr>
</table>
</body>
</html>
f. Padding
Property Deskripsi Values
padding Mengeset semua properti untuk
padding (bloknot)
dalam satu deklarasi
padding-top
padding-right
padding-bottom
padding-left
padding-bottom Mengeset pad bagian bawah dari
elemen
length
%
padding-left Mengeset pad bagian kiri dari
elemen
length
%
padding-right Mengeset pad bagian kanan dari
elemen
length
%
padding-top Mengeset pad bagian atas dari length
elemen %
Contoh penggunaan tag dan properti padding :<html>
<head>
<style>
p { padding-left: 45px; border: 1px solid black; }
h2 { padding-top: 80px; border: 1px solid black; }
ul { padding: 25px; border: 1px solid black; }
</style>
</head>
<body>
<h2>CSS Padding</h2>
<p>The header has a top padding of 45px and this paragraph has a
padding-left of 80px. This gives
a nice indendation to the paragraph.</p>
<ul>
<li>This list has a uniform</li>
<li>25 pixel margin</li>
<li>Padding is useful for creating necessary white space.</li>
</ul>
</body>
</html>
g. List & Marker
Property Deskripsi Values
list-style Mengeset semua properti untuk
sebuah list dalam satu deklarasi
list-style-type
list-style-position
list-style-image
list-style-image Mengeset gambar sebagai list-
item marker
none
url
list-style-position Mengeset dimana list-item
marker ditempatkan pada list
inside
outside
list-style-type Mengeset tipe dari list-item
marker
none
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
hiragana
katakana
hiragana-iroha
katakana-iroha
marker-offset auto
length
Contoh penggunaan tag dan properti list :
<html>
<head>
<style>
ul { list-style-image: disc; }
ol { list-style-type: upper-roman; }
</style>
</head>
<body>
<h2>CSS Lists</h2>
<ul>
<li>This list has a picture</li>
<li>in the place of bullets</li>
<li>The spacing doesn't look very good.</li>
</ul>
<ol>
<li>This list is </li>
<li>in Upper Roman </li>
<li>These are good for outlines </li>
</ol>
</body>
</html>
h. Border
Property Deskripsi Values
border Mengeset semua properti untuk
4-border (yang tertutup) dalam
satu deklarasi
border-width
border-style
border-color
border-bottom Mengeset semua properti untuk
bottom-border (yang bawah aja)
dalam satu deklarasi
border-bottom-width
border-style
border-color
border-bottom-color Mengeset warna dari bottom-
border
border-color
border-bottom-style Mengeset style dari bottom
border
border-style
border-bottom-width Mengeset ketebalan dari garis
bottom-border
thin
medium
thick
length
border-color Mengeset warna dari keseluruhan
border
Color
border-left Mengeset semua properti untuk
left-border (yang kiri aja) dalam
satu deklarasi
border-left-width
border-style
border-color
border-left-color Mengeset warna dari left-border border-color
border-left-style Mengeset style dari left-border border-style
border-left-width Mengeset ketebalan dari garis
left-border
thin
medium
thick
length
border-right Mengeset semua properti untuk
right-border (yang kanan aja)
dalam satu deklarasi
border-right-width
border-style
border-color
border-right-color Mengeset warna dari right-border border-color
border-right-style Mengeset style dari right-border border-style
border-right-width Mengeset ketebalan dari garis
right-border
thin
medium
thick
length
border-style Mengeset style dari keseluruhan
border
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top Mengeset semua properti untuk
top-border (yang atas aja) dalam
satu deklarasi
border-top-width
border-style
border-color
border-top-color Mengeset warna dari top-border border-color
border-top-style Mengeset style dari top-border border-style
border-top-width Mengeset ketebalan dari garis
top-border
thin
medium
thick
length
border-width Mengeset ketebalan dari
keseluruhan border; terdapat
empat jenis ketebalan
thin
medium
thick
length
Contoh penggunaan tag dan property border :<html>
<head>
<style type="text/css">
p.pertama {border-style: dashed;border-color: #0000ff}
p.kedua {border-style: solid;border-color: #ff0000 #0000ff}
p.ketiga
{
border-style: dotted;
border-color: #ff0000 #00ff00 #0000ff
}
p.keempat
{
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)
}
</style>
</head>
<body>
<p class="pertama">Border dengan satu macam warna</p>
<p class="kedua">Border dengan dua macam warna</p>
<p class="ketiga">Border dengan tiga macam warna</p>
<p class="keempat">Border dengan empat macam warna</p>
<p><b>catatan:</b> "Perhatikan warna border-nya"</p>
</body>
</html>
i. Positioning
Property Deskripsi Values
Bottom mengeset sejauh mana pojok
bawah elemen di atas atau di
bawah dari pojok bawah parent
element
auto
%
length
clip Mengeset bentuk dari elemen. shape
Elemen diclip menjadi bentuk ini,
dan ditampilkan
auto
left Mengeset sejauh mana pojok kiri
dari elemen di kiri/kanan tepi kiri
parent element
auto
%
length
overflow Mengeset apa yang terjadi jika
konten dari elemen melebihi area
elemen
visible
hidden
scroll
auto
position Menempatkan elemen dengan
posisi static, relative, absolute,
atau fixed
static
relative
absolute
fixed
right Mengeset sejauh mana pojok
kanan dari elemen di kiri/kanan
dari pojok kanan parent element
auto
%
length
top Sets how far the top edge of an
element is above/below the top
edge of the parent element
auto
%
length
vertical-align Sets the vertical alignment of an
element
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index Sets the stack order of an element auto
number
Contoh penggunaan tag dan properti positioning :<html>
<head>
<style>
h3 {
position: absolute;
top: 200px;
left: 150px;}
p {
position: absolute;
top: 75px;
left: 75px;}
</style>
</head>
<body>
<h3>CSS</h3>
<p>cascadng style sheets</p>
</body>
j. Classification
Property Deskripsi Values
clear Mengeset sisi dari sebuah elemen
dimana elemen ngambang lainnya
tidak diperbolehkan
left
right
both
none
cursor Menspesifikasi kursor yang
ditampilkan
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
display Mengeset apakah/bagaimana
suatu elemen ditampilkan
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
float Mengeset dimana sebuah gambar
atau teks dimunculkan pada
elemen lain
left
right
none
position Mengeset penempatan elemen
sebagai posisi yang static,
relative, absolute atau fixed
static
relative
absolute
fixed
visibility Mengeset apakah suatu elemen
ditampilkan atau tidak
visible
hidden
collapse
k. Pseudo-classes
Pseudo-class Kegunaan
:active Menambahkan spesial style kepada elemen yang aktif
:focus Menambahkan spesial style kepada elemen selama elemen
sedang focus
:hover Menambahkan spesial style kepada elemen saat cursor berada
di atas elemen tersebut
:link Menambahkan spesial elemen kepada link yang belum kena hit
:visited Menambahkan spesial style kepada link yang telah dihit
:first-child Menambah spesial style pada elemen yang merupakan child
pertama dari gabungan beberapa elemen lainnya
:lang Membolehkan pemilik(author) untuk menentukan bahasa yang
digunakan pada elemen tertentu
Contoh penggunaan tag dan properti pseudo-classes :
<html>
<head>
<style>
a:link{ text-decoration: none;
color: gray;
}
a:visited{ text-decoration: none;
color: gray;
}
a:hover{ text-decoration: none;
color: green;
font-weight: bolder;
letter-spacing: 2px;
}
</style>
</head>
<body>
<h2>CSS Pseudo Classes or Links</h2>
<p>Arahkan kursor Anda <a href="">ke sini </a> !</p>
</body>
</html>
catatan: Warna ‘ke sini’ akan berubah saat Anda mengarahkan kursor ke atasnya.
l. Dimension
Property Deskripsi Values
height Mengeset tinggi dari sebuah
elemen
auto
length
%
line-height Mengeset jarak antar garis pada
elemen
normal
number
length
%
max-height Mengeset tinggi maksimal dari
elemen
none
length
%
max-width Mengeset lebar maksimal dari
elemen
none
length
%
min-height Mengeset tinggi minimal dari
elemen
length
%
min-width Mengeset lebar minimal dari
elemen
length
%
width Mengeset lebar dari suatu elemen auto
%
length
M. Generated Content
Property Deskripsi Values
content Membuat konten dalam
dokumen. Digunakan bersama
string
pseudo-element :before dan :after url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-
style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
counter-increment Mengeset berapa banyak suatu
counter menambahkan pada tiap
aksi pada selektor
none
identifier number
counter-reset Mengeset nilai yang counter set
pada tiap aksi pada selektor
none
identifier number
quotes Mengeset tipe dari quote none
string string
n. Outlines
Property Deskripsi Values
outline Mengeset semua properti untuk
outline dalam satu deklarasi
outline-color
outline-style
outline-width
outline-color Mengeset warna dari outline
elemen
color
invert
outline-style Mengeset style outline dari
elemen
none
dotted
dashed
solid
double
groove
ridge
inset
outset
outline-width Mengeset ketebalan outline dari
elemen
thin
medium
thick
length
CSS Untuk Huruf
Huruf Tebal :font-weight:bold;
Keterangan :
bold bisa di ganti dengan nominal. Contoh : 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900
Mengganti Karakter Tulisan :Font-family:arial;
Keterangan :
arial bisa di ganti dengan karakter tulisan lainnya. Contoh : Times New Roman / Square721 BT/ Lucida Sans Unicode / dan lain lain..
Mengganti Ukuran Font/Tulisan :Font-size:12px;
Keterangan :
12px bisa di ganti dengan nominal lainnya.. semakin besar nominalnya akan semakin besar ukuran
tulisannya. Contoh : 14px / 15px / 16px / 17px / 18px / dan lain lain..
Mengganti Style Tulisan :Font-Style:italic;
Keterangan :
italic bisa di ganti dengan kode lainnya. Contoh : normal / obliqueitalic adalah huruf miring.
oblique adalah huruf miring.
normal adalah huruf normal.
Cara Transform Tulisan :text-transform:capitalize;
Keterangan :
capitalize bisa di ganti dengan kode lainnya. Contoh : uppercase / lowercasecapitalize adalah huruf kapital.
uppercase adalah huruf besar semua.
lowercase adalah huruf kecil semua.
Cara Mengganti Warna Text : color:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini.
Cara Mengganti Dekorasi Text :text-decoration:underline;
Keterangan :
underline bisa di ganti dengan kode lainnya. Contoh : overline / line-through / blinkunderline adalah text garis bawah.
overline adalah text garis atas.
line-through adalah text garis tengah.
blink adalah text berkedip.
Merubah Posisi Text/Tulisan :text-align:center;
Keterangan :
center adalah text rata tengah, anda bisa menggantinya dengan kode lainnya. Contoh : left / rightleft adalah text rata kiri.
right adalah text rata kanan
*CSS Untuk Background
Background Dengan Warna Biasa :background:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini.
Background Dengan Gambar :background-image:url("https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png");
Keterangan :
https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png adalah url gambar, anda bisa menggantinya dengan url gambar lainnya.
Cara Mengubah Posisi Background :background-image:url("https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png") no-repeat right top;
Keterangan :
https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png adalah url gambar.
right adalah posisi gambar secara horizontal, anda bisa menggantinya dengan : left / center.top adalah posisi gambar secara vertikal, anda bisa menggantinya dengan : bottom / center.
*CSS Untuk Border & Table
Mengganti Warna Borderborder-color:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini..
Mengganti Ukuran Borderborder:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Bawahborder-bottom:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Atasborder-top:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Kiriborder-left:1px;
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Kananborder-right:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Mengganti Type Borderborder:dotted;
Keterangan :
dotted adalah kode type border, anda bisa menggantinya dengan kode lainnya.
Contoh : Solid / dashed / double / groove / ridge / inset / outsetUntuk Keterangan type border 1 Per 1 saya tidak bisa menyebutkan semua :D , anda bisa
mengEksperimen sendiri. :D
Membuat Type Border Solid + Warna Border Kuning + Ukuran 5pxborder: solid #EBFF00 5px;
Keterangan :
solid adalah Type Border .. anda bisa mengganti dengan type laninnya.
#EBFF00 adalah kode warna (Warna Kuning).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini..5px Ukuran Border, anda bisa menggantinya dengan nominal laninnya.
*CSS Untuk Ukuran
Mengganti Ukuran Lebar Biasa :Width:500px;
Keterangan :
500px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Lebar Minimal :Min-width:200px;
Keterangan :
200px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Lebar Maxsimal :Max-width:1000px;
Keterangan :1000px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Biasa :Height:500px;
Keterangan :500px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Minimal :Min-height:200px;
Keterangan :200px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Maxsimal :Max-height:1000px;
Keterangan :500px bisa di ganti dengan nominal lainnya.
CSS Untuk Huruf
Huruf Tebal :font-weight:bold;
Keterangan :
bold bisa di ganti dengan nominal. Contoh : 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900
Mengganti Karakter Tulisan :Font-family:arial;
Keterangan :
arial bisa di ganti dengan karakter tulisan lainnya. Contoh : Times New Roman / Square721 BT/ Lucida Sans Unicode / dan lain lain..
Mengganti Ukuran Font/Tulisan :Font-size:12px;
Keterangan :
12px bisa di ganti dengan nominal lainnya.. semakin besar nominalnya akan semakin besar ukuran
tulisannya. Contoh : 14px / 15px / 16px / 17px / 18px / dan lain lain..
Mengganti Style Tulisan :Font-Style:italic;
Keterangan :
italic bisa di ganti dengan kode lainnya. Contoh : normal / obliqueitalic adalah huruf miring.
oblique adalah huruf miring.
normal adalah huruf normal.
Cara Transform Tulisan :text-transform:capitalize;
Keterangan :
capitalize bisa di ganti dengan kode lainnya. Contoh : uppercase / lowercasecapitalize adalah huruf kapital.
uppercase adalah huruf besar semua.
lowercase adalah huruf kecil semua.
Cara Mengganti Warna Text : color:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini.
Cara Mengganti Dekorasi Text :text-decoration:underline;
Keterangan :
underline bisa di ganti dengan kode lainnya. Contoh : overline / line-through / blinkunderline adalah text garis bawah.
overline adalah text garis atas.
line-through adalah text garis tengah.
blink adalah text berkedip.
Merubah Posisi Text/Tulisan :text-align:center;
Keterangan :
center adalah text rata tengah, anda bisa menggantinya dengan kode lainnya. Contoh : left / rightleft adalah text rata kiri.
right adalah text rata kanan
*CSS Untuk Background
Background Dengan Warna Biasa :background:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini.
Background Dengan Gambar :background-image:url("https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png");
Keterangan :
https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png adalah url gambar, anda bisa menggantinya dengan url gambar lainnya.
Cara Mengubah Posisi Background :background-image:url("https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png") no-repeat right top;
Keterangan :
https://1.bp.blogspot.com/-y5sI87RkxLg/Vm9pmy3yJDI/AAAAAAAAB3w/PTx5p9u_lrI/s320/css.png adalah url gambar.
right adalah posisi gambar secara horizontal, anda bisa menggantinya dengan : left / center.top adalah posisi gambar secara vertikal, anda bisa menggantinya dengan : bottom / center.
*CSS Untuk Border & Table
Mengganti Warna Borderborder-color:#FF0000;
Keterangan :
#FF0000 adalah kode warna (Warna Merah).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini..
Mengganti Ukuran Borderborder:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Bawahborder-bottom:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Atasborder-top:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Kiriborder-left:1px;
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Membuat Border Untuk Kananborder-right:1px;
Keterangan :
1px adalah ukuran border, anda bisa mengganti dengan nominal lainnya. Contoh : 2px / 3px / 4px / 5px / dan lain lain..
Mengganti Type Borderborder:dotted;
Keterangan :
dotted adalah kode type border, anda bisa menggantinya dengan kode lainnya.
Contoh : Solid / dashed / double / groove / ridge / inset / outsetUntuk Keterangan type border 1 Per 1 saya tidak bisa menyebutkan semua :D , anda bisa
mengEksperimen sendiri. :D
Membuat Type Border Solid + Warna Border Kuning + Ukuran 5pxborder: solid #EBFF00 5px;
Keterangan :
solid adalah Type Border .. anda bisa mengganti dengan type laninnya.
#EBFF00 adalah kode warna (Warna Kuning).
anda bisa mengganti kode warna dengan kode warna lainnya. anda bisa melihat kode kode
warna disini..5px Ukuran Border, anda bisa menggantinya dengan nominal laninnya.
*CSS Untuk Ukuran
Mengganti Ukuran Lebar Biasa :Width:500px;
Keterangan :
500px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Lebar Minimal :Min-width:200px;
Keterangan :
200px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Lebar Maxsimal :Max-width:1000px;
Keterangan :1000px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Biasa :Height:500px;
Keterangan :500px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Minimal :Min-height:200px;
Keterangan :200px bisa di ganti dengan nominal lainnya.
Mengganti Ukuran Tinggi Maxsimal :Max-height:1000px;
Keterangan :500px bisa di ganti dengan nominal lainnya.