Web viewPengenalan CSS & Kumpulan Tag CSS. Pengenalan CSS. A. Sejarah Singkat CSS. Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS

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">



</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

http://2.bp.blogspot.com/-bnka1EWMHlc/U5kH4wFIvvI/AAAAAAAAAH0/pHfLl1ou5Sk/s1600/hg.jpg

: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


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>


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


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>

http://1.bp.blogspot.com/-Y9IHXOT98Ss/U5kHZJbHIII/AAAAAAAAAHs/NOFhrR9tIE8/s1600/gh.jpg

e. Table


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>


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


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

http://2.bp.blogspot.com/-YX67F-1Xo8w/U5kG07Ky2MI/AAAAAAAAAHk/FcMcsRNQGXo/s1600/sd.jpg

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


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

http://4.bp.blogspot.com/-o5kzem00NxY/U5kFdexMfaI/AAAAAAAAAHY/nh839cpOIAU/s1600/cd.jpg

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


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)


border-bottom-width

border-style

border-color

http://3.bp.blogspot.com/-hLR-S_EU5i4/U5kGKitMUpI/AAAAAAAAAHc/ETpVily6AXU/s1600/yu.jpg

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)


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>


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


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

http://4.bp.blogspot.com/-GcZtlcKJkHc/U5kExYmt51I/AAAAAAAAAHM/H3xMKWZsfGY/s1600/FD.jpg

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


http://3.bp.blogspot.com/-y1-qfhREB4I/U5kEUQ01_6I/AAAAAAAAAHE/B_kspaNAsHU/s1600/u.jpg

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>

http://2.bp.blogspot.com/-zIHi21pw-XY/U5kIQ6-bTHI/AAAAAAAAAH8/hWGish0OeY0/s1600/hg.jpg

catatan: Warna ‘ke sini’ akan berubah saat Anda mengarahkan kursor ke atasnya.

l. Dimension


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


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


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 :



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 :



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 :


Membuat Border Untuk Atasborder-top:1px;

Keterangan :


Membuat Border Untuk Kiriborder-left:1px;


Membuat Border Untuk Kananborder-right:1px;

Keterangan :


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).


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 :


Mengganti Ukuran Lebar Maxsimal :Max-width:1000px;

Keterangan :1000px bisa di ganti dengan nominal lainnya.

Mengganti Ukuran Tinggi Biasa :Height:500px;


Mengganti Ukuran Tinggi Minimal :Min-height:200px;


Mengganti Ukuran Tinggi Maxsimal :Max-height:1000px;


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 :



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 :



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 :



warna disini..

Mengganti Ukuran Borderborder:1px;

Keterangan :


Membuat Border Untuk Bawahborder-bottom:1px;

Keterangan :


Membuat Border Untuk Atasborder-top:1px;

Keterangan :


Membuat Border Untuk Kiriborder-left:1px;


Membuat Border Untuk Kananborder-right:1px;

Keterangan :


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).


warna disini..5px Ukuran Border, anda bisa menggantinya dengan nominal laninnya.

*CSS Untuk Ukuran

Mengganti Ukuran Lebar Biasa :Width:500px;

Keterangan :


Mengganti Ukuran Lebar Minimal :Min-width:200px;

Keterangan :


Mengganti Ukuran Lebar Maxsimal :Max-width:1000px;


Mengganti Ukuran Tinggi Biasa :Height:500px;


Mengganti Ukuran Tinggi Minimal :Min-height:200px;


Mengganti Ukuran Tinggi Maxsimal :Max-height:1000px;

Documents

Web viewPengenalan CSS & Kumpulan Tag CSS. Pengenalan CSS. A. Sejarah Singkat CSS. Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS