let`s share knowledge, science, fun things, and everything here….


sy ingin menulis artikel tentang web salah satu kegemaran sy dalam belajar selain hal-hal berbau mikrokontroler

sebelumnya sy ingin menjelaskan dasar-dasar CSS terlebih dahulu…..

CSS adalah singkatan dari Cascading style sheet, CSS mendefinisikan tampilan web. Cara penulisan CSS bisa terbagi menjadi 3 bagian, yaitu: External CSS, Inline CSS, dan Internal CSS.

External CSS berarti CSS tersebut ditulis dalam suatu editor text (misalnya notepad) kemudian diimport pada bagian head di halaman Webnya, kodenya seperti ini:

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

misalnya nama file CSS yang ditulis “mystyle.css” dan berada satu folder dengan file Web yang akan digunakan. Bila berbeda folder maka referensi folder file CSS-nya disesuaikan pada bagian kode href=”…../…../mystyle.css”. Didalam file CSS yang digunakan tidak boleh terdapat kode lain harus kode CSS saja sesuai dengan konsep kode CSS yang akan dibahas lebih lanjut setelah ini.

Inline CSS yaitu menggunakan syntax CSS langsung pada Tag HTML pada halaman Web. Misalnya:

<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

yang berarti paragraf diatas akan diberi style warna sienna dan margin kirinya diatur sebesar 20px dari pojok kiri browser.

Internal CSS yaitu penulisan kode CSS langsung pada bagian tag Head, penulisan seperti ini digunakan bila ingin salah satu halaman Web memiliki style yang unik untuk satu halaman. Penulisan kodenya misalnya seperti ini:

<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>

kode CSS diatas berarti untuk setiap tag hr (garis horizontal) diberi warna sienna, setiap tag p (paragraf) diberi margin kiri sebesar 20px, dan background Web adalah gambar back40.gif.

Penggunaan External CSS, Inline CSS, dan Internal CSS dapat digunakan secara bersamaan sekaligus atau satu persatu namun bila digunakan secara bersamaan ada urutan eksekusi yang bisa dipertimbangkan, urutannya adalah:

1. browser default

setting default browser akan menjadi prioritas utama, misalnya setting browser diatur agar semua huruf pada Web ber-type face arial maka semua web akan ditampilakan arial meski style aslinya bukan arial.

2. External CSS

3. Internal CSS (pada tag head)

4. Inline CSS (pada tag HTML)

jadi style yang memiliki urutan prioritas tertinggi akan meng-override style yang prioritasnya lebih rendah.

Selain aturan-aturan penulisan tersebut, CSS juga memiliki aturan penulisan kode. CSS dua bagian utama yaitu selector dan satu atau beberapa dekalarasi, misalnya:

dasar syntax CSS (w3c school)

dasar syntax CSS (w3c school)

selector biasanya element HTML yang akan diberi style. Setiap deklarasi terdiri dari property dan value.

property adalah atribut style yang ingin diubah (misalnya atribut color/warna). setiap property memiliki nilai.

contoh penulisan CSS:

p {color:red;text-align:center;}

deklarasi CSS harus berawal dan berakhir dengan semicolon ({}) dan bila ada beberapa deklarasi maka harus dipisahkan dengan tanda titik koma (;). penulisan dibawah ini bisa dilakukan agar kode lebih mudah dibaca.

p
{
color:red;
text-align:center;
}

CSS juga memfasilitasi penulisan komentar seperti pada bahasa pemrograman, komentar ini dapat memudahkan pengeditan atau pengelompokan kode CSS sesuai kebutuhan. komentar pada CSS diawali tanda /* dan diakhiri dengan tanda */ . Contohnya:

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

sekarang mari berlanjut ke CSS lanjut, sy akan membahas CSS secara lebih dalam (menurut sy), langsung ajaaa

a. CSS Id dan Class

id digunakan untuk mengaplikasikan style elemen unik pada halaman web. Id didefinidikan dengan lambang “#”. Berikut contoh penggunaan id:

misalnya style dibawah ini akan diaplikasikan ke element unik dengan id “para1”,

#para1
{
text-align:center;
color:red;
}

kemudian misalnya pada  tag html ditulis seperti ini,

<p id=”para1″>ini adalah paragraf</p>

maka bila ditampilkan pada di browser paragraf diatas akan ditampilkan dengan warna merah dan posisinya ditengah. id ini bersifat unik yang berarti hanya bisa diaplikan untuk satu element, dalam contoh berarti tag p (<p></p>).

sebagai catatan, sebaiknya jangan menggunakan nama id dengan angka karena tidak akan bekerja di browser mozilla.

Class digunakan untuk mengelompokan style untuk beberapa element atau tag. class didefinisikan dengan tanda “.”, berikut contoh penggunaan class:

misalnya style dibawah ini akan diaplikasikan ke element dengan class “center”,

.center {text-align:center;}

kemudian pada halaman web ditulis seperti ini,

<p class=”center”>paragraf tengah</p>

<h1 class=”center”>judul tengah</h1>

<h2 class=”center>judul 2 tengah</h2>

maka bila ditampilkan di browser kode diatas akan terlihat ditengah, namun bila hanya ingin paragraf saja yang ditengah, penulisan kode CSS bisa diubah menjadi seperti ini,

p.center {text-align:center;}

penggunaannya tentu bisa berbeda sesuai kebutuhan.

2. CSS untuk background

properti CSS untuk background mendefinisikan efek background pada suatu element. properti CSS untuk background yaitu:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

background color digunakan untuk memberi background warna pada suatu element, misalnya:

body {background-color:#b0c4de;} yang berarti seluruh halaman web berwarna #b0c4de.

contoh lain misalnya:

h1 {background-color:#6495ed;} element h1 diberi background warna #6495ed.
p {background-color:#e0ffff;} element p diberi warna #e0ffff.
div {background-color:#b0c4de;} element div diberi warna #b0c4de.

selain itu, background color dapat dispesifikasikan berdasarkan:

  • nama – nama warna (dlm english), misal “red”
  • RGB – nilai RGB, seperti “rgb(255,0,0)”
  • Hex – nilai heksa, seperti “#ff0000”

Background Image digunakan untuk menggunakan gambar sebagai background untuk suatu element atau tampilan. secara default gambar yang dimasukkan akan diulang secara vertikal dan horizontal bila tidak ditambahkan property lainnya, contoh penulisannya:

body
{
background-image:url(‘gradient2.png’);
}

bila ingin background berulang secara vertikal saja, horizontal saja, atau tidak berulang bisa digunakan property background repeat, contoh penulisan:

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}

nilai properti background repeat bisa diubah menjadi repeat-x bila gambar ingin diulang secara horizontal atau repeat-y bila gambar ingin diulang secara vertikal.

gambar background juga posisinya bisa diatur dengan property background position, contohnya:

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:right top;
}

pada contoh diatas berarti posisi gambar berada di sebelah kanan atas.

penulisan kode CSS seperti diatas tergolong boros atau “ribet”, supaya tidak ribet dalam CSS ada juga yg dikenal dengan shorthand property yaitu penulisan kode CSS cukup dengan menggunakan urutan nilai property saja sehingga tidak perlu ditulis nama property cukup nilainya saja. metode ini memiliki urutan penulisan, dalam CSS background urutan tersebut yaitu:

background color – background image – background repeat – background attachment – background posistion

contoh penulisannya yaitu:

body {

background:#ffffff url(‘img_tree.png’) no-repeat right top;

}

bila ada property yang tidak digunakan maka dibiarkan kosong saja dan diisi dengan nilai property selanjutnya sesuai urutan.

property CSS background lengkap (w3cschool)

property CSS background lengkap (w3cschool)

3. CSS untuk Text

a. text color

properti ini digunakan untuk mengatur warna pada text, properti ini dapat dispesifikasikan berdasarkan:

  • nama -nama warna (dlm english), misalnya “red”
  • RGB – nilai RGB, misalnya “rgb(255,0,0)”
  • Hex – nilai heksa, misalnya “#ff0000”

contoh penggunaan:

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

b. text alignment

properti ini digunakan untuk mengatur posisi text (left, right, center, justify). Contoh penggunaannya:

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

c. text decoration

properti ini digunakan untuk memberikan atau menghilangkan dekorasi pada text, misalnya:

a {text-decoration:none;}

kode css di atas akan menghilangkan dekorasi pada link/hyperlink yang biasanya ada (garis bawah). contoh penggunaan text decoration yg lainnya:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

d. text transformation

properti ini digunakan untuk mengatur transformasi text (uppercase, lowercase, dan lainnya). Misalnya:

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

capitalize digunakan untuk mengubah text menjadi berhuruf besar untuk setiap awal kata.

e. text indentation

properti ini digunakan untuk menentukan jarak pada awal paragraf yang akan dibuat menjorok ke dalam (indentasi). Misalnya:

p {text-indent:50px;}

masih ada lagi properti text yang lainnya, seperti yang tertera pada gambar berikut:

properti text CSS (w3c school)

properti text CSS (w3c school)

4. CSS font

perbedaan serif dan sans-serif (w3c school)

perbedaan serif dan sans-serif (w3c school)

dalam layar komputer, font sans-serif lebih mudah dibaca ketimbang font serif.

a. font family

dalam CSS ada dua tipe untuk penamaan font family, yaitu:

  • generic family – grup font family yang terlihat mirip (seperti “Serif” atau “Monospace”)
  • font family – font family spesifik (seperti “Times New Roman” atau “Arial”)
tipe font family (w3c school)

tipe font family (w3c school)

contoh penulisan kode CSS font family:

p

{

font-family:”Times New Roman”, Times, serif;

}

maksud penulisan kode css diatas yaitu untuk tag paragraf (p) diberi font jenis Times New Roman, bila font jenis ini tidak didukung oleh browser akan ditampilkan jenis font lain yang serif. jika penulisan tipe font (font face) lebih dari satu kata, maka perlu diberikan tanda kutip (“…”).

berikut tabel kombinasi font yg biasa digunakan:

monospace (w3c school)

monospace (w3c school)

serif (w3c school)

serif (w3c school)

sans serif (w3c school)

sans serif (w3c school)

b. font style

font style biasanya digunakan untuk membuat text italic, properti ini memiliki 3 value / nilai, yaitu:

  • normal – text normal
  • italic – text italic
  • oblique – mirip italic tapi jarang didukung oleh browser

contoh penulisan:

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

c. font size

properti ini digunakan untuk mengatur besar huruf di browser. ada dua tipe dalam pengaturan besar huruf yaitu absolute dan relative.

Absolute size:

  • ukuran text diakur ke ukuran spesifik
  • user tidak bisa mengubah ukuran text di semua browser (jelek untuk pengaksesan)
  • absolute berguna saat output fisik diketahui

Relative size:

  • ukuran text diatur relatif
  • user bisa mengubah ukuran text di browser

jika ukuran font tidak diatur, font akan diset secara default yaitu 16px = 1em. ukuran ini tentu berbeda untuk tag heading (h1, h2, dst).

contoh pengunaan properti font size dengan besaran huruf dengan piksel (px):

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

contoh diatas memungkinkan ukuran font diubah pada Firefox, Chrome, dan Safari (menggunakan zoom), tapi tidak memungkinkan di Internet Explorer.

ukuran font direkomendasikan oleh w3c menggunakan em sebagai ukuran karena memungkinkan kompatibel dengn semua browser meskipun masih ada sedikit masalah di browser IE. 1em = 16 px sehingga rumus konversi piksel ke em adalah pixels/16=em.

berikut contoh penggunaan:

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

contoh penggunaan lainnya:

body {font-size:100%;} penggunaan persen sebagai salah satu trik agar kompatibel dengan semua browser
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

properti CSS text (w3c school)

properti CSS text (w3c school)

5. CSS Link

link dapat diberi style oleh properti-properti CSS yang ada (misal color, font-family, background-color) tergantung kondisi link tersebut, ada empat kondisi link, yaitu:

  • a:link – normal, link yang belum dikunjungi (diklik)
  • a:visited – link yang sudah dikunjungi (sudah diklik)
  • a:hover – kondisi link ketika disorot kursor mouse
  • a:active – kondisi ketika link diklik

contoh kode CSS:

a:link {color:#FF0000;}      /* link yang belum dikunjungi */
a:visited {color:#00FF00;}  /* link yang sudah dikunjungi*/
a:hover {color:#FF00FF;}  /*link ketika disorot kursor mouse*/
a:active {color:#0000FF;}  /* link ketika diklik*/

bila ingin mengatur link untuk semua kondisi (seperti diatas) maka penulisan kode CSS HARUS berurutan seperti contoh kode diatas.

beberapa contoh penggunaan kode CSS link lainnya:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

dan ini:

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

contoh menarik dari w3c http://www.w3schools.com/css/tryit.asp?filename=trycss_link_advanced

6. CSS List

seperti yg sudah kita tahu, dalam HTML ada dua tipe list yaitu:

  • unordered lists – item list ditandai dengan bullets (simbol)
  • ordered lists – item list ditandai dengan nomor atau huruf

dengan CSS list bisa dimodifikasi menjadi lebih menarik bahkan bisa dibuat menu juga.

contoh penggunaan:

ul {list-style-type: circle;}
ul {list-style-type: square;}

ol {list-style-type: upper-roman;}
ol {list-style-type: lower-alpha;}

nilai properti untuk ul (unordered lists) dan ol (ordered lists) berbeda, berikut penjelasan masing-masing value (nilai):

unordered list (w3c school)

unordered list (w3c school)

ordered list (w3c school)

ordered list (w3c school)

item list bisa diganti oleh logo tertentu / gambar dengan kode CSS, contoh penggunaannya yaitu:

ul
{
list-style-image: url(‘sqpurple.gif’); bagian ini bisa diganti sesuai dengan url file yang akan digunakan
}

kemampuan browser untuk menampilkan logo gambar berbeda, IE dan Opera mampu menampilkan lebih baik dari pada browser yang lain seperti Mozilla, Chrome, dan Safari. jika ingin tampilan gambar ditampilkan dengan kualitas yang sama pada semua browser, diperlukan kode CSS cross browser, seperti berikut:

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

penjelasannya:

  • untuk ul:
    • atur properti list-style-type  bernilai none untuk menghilangkan bullet yang muncul otomatis
    • atur margin dan padding ke 0px (untuk cross-browser compatibility)
  • untuk li:
    • atur url gambar, dan munculkan hanya satu kali (no-repeat)
    • posisikan gambar di tempat yang diinginkan (kiri 0px dan bawah 5px)
    • posisikan tekt di list dengan padding-left

CSS list bisa ditulis secara lebih simpel yang dinamakan dengan CSS list shorthand property, urutan penulisannya adalah:

  • list-style-type
  • list-style-position
  • list-style-image

contoh pengunaan:

ul
{
list-style: square inside url(“sqpurple.gif”);
}

bila ada nilai yang tidak diperlukan di lewat saja

properti list (w3c school)

properti list (w3c school)

7. CSS table

a. border

dengan CSS border tabel bisa dimanipulasi sesuka hati dengan trik-trik yg ada, berikut contoh penerapan border dasar pada tabel:

table, th, td
{
border: 1px solid black;
}

penggunaan border yang lebih menarik atau advance dalam CSS ada yg bahasan khusus yaitu CSS border di bahasan selanjutnya ….yukz lanjut ke CSS table lagi.

b. width dan height

ukuran tabel juga bisa diatur dengan menggunakan CSS, satuannya bisa menggunakan persen maupun piksel, contohnya:

table
{
width:100%;
}
th
{
height:50px;
}

c. text alignment

posisi teks pada tabel bisa diatur dengan properti text-alignment, bisa center, left, atau right juga diatur dengan properti vertical-align dengan nilai top, bottom, middle. Misalnya:

td
{
text-align:right;
}

dan

td
{
height:50px;
vertical-align:bottom;
}

d. padding table

untuk mengkontrol jarak antara border dan konten pada tabel, contohnya:

td
{
padding:15px;
}

e. table color

contoh berikut digunakan untuk mengatur warna border, teks, dan background pada element th:

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

8. CSS box model

CSS box model (w3c school)

CSS box model (w3c school)

konsep penting dalam design web menggunakan CSS adalah prinsip CSS box model karena prinsip ini mengatur posisi konten web dan layout web. dalam CSS box model ini termasuk ke dalamnya margins, borders, padding, dan konten web. box model memungkin kan untuk membuat suatu kotak (box) dari setiap elemen HTML.

penjelasan bagian gambar disamping:

  • Margin – memberikan ruang di sekitar border. margin tidak memiliki warna background (transparent)
  • Border – border antara padding dan konten. border umumnya satu warna dengan warna box (web)
  • Padding – memberikan ruang disekitar konten.
  • Content – konten boxketika text dan gambar muncul

untuk menampilkan layout web yang sesuai di semua browser dibutuhkan beberapa penagturan pada kode CSS yang akan dijelaskan berikut:

a. widht dan height suatu element

ketika diberikan pengaturan width dan height untuk suatu elemen dengan CSS, hal ini sebetulnya berlaku untuk area konten element tersebut, untuk mengetahui ukuran sebenarnya dari suatu elemnt maka perlu ditambahkan margin, padding, dan border. Misalnya:

width total dari contoh kode CSS berikut adalah 300 px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

perhitungannya:
250px (width)
+ 20px (padding kanan dan kiri)
+ 10px (border kanan dan kiri)
+ 20px (margin kanan dan kiri)
= 300px

misalnya akan dibuat suatu element dengan width 250 px:

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

rumus-rumus yang berlaku:

width element total = width + padding kiri + padding kanan + border kiri + border kanan + margin kiri + margin kanan

height total element = height + padding atas + padding bawah + border atas + border bawah + margin atas + margin bawah

selain itu untuk kompatibilitas pada browser perlu di tambahkan DOCTYPE pada setiap halaman web karena error masih bisa muncul bila tidak ada DOCTYPE, contohnya:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html>
<head>
<style type=”text/css”>
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

sebagai saran dari sy, gunakan browser Amaya untuk mengecek apa design web sudah bagus atau belum karena browser ini biasanya kompatibel dengan browser-browser yang lainnya dan gunakan vasilitas di w3c untuk melegalisasi kode web yang akan digunakan.

9. CSS border

properti ini digunakan untuk menampilkan bentuk border yg akan ditunjukan, berikut macam-macam border yang didukung plus pasangan properti value (sumber gambar: w3c school):

border-style:none;

g pake border

border-style:dotted;

border-style:dashed;

border-style:solid;

border-style:double;

border-style:groove;

border-style:ridge;

border-style:inset;

border-style:outset;

link bisa di coba disini http://www.w3schools.com/css/tryit.asp?filename=trycss_border-style

ukuran border juga bisa diatur, ukurannya yaitu thin (tipis), medium (sedang), atau thick (tebal), bisa juga diatur dengan ukuran piksel. Contohnya:

p
{
border-style:solid;
border-width:5px;
}
p
{
border-style:solid;
border-width:medium;
}

selain itu border juga bisa diberi warna (pastinyaaaa ) aturannya sama kayak properti warna yg sebelum-sebelumnya yaitu: (sy tulis lagi aja )

  • nama -nama warna (dlm english), misalnya “red”
  • RGB – nilai RGB, misalnya “rgb(255,0,0)”
  • Hex – nilai heksa, misalnya “#ff0000”

bisa juga di set “transparent”.

Contoh kode CSS:

p
{
border-style:solid;
border-color:red;
}
p
{
border-style:solid;
border-color:#98bf21;
}

contoh pemakaian border lainnya:

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}

properti border-style, border-width, dan border-color bisa diberi satu sampai empat nilai, misalnya: (dimisalkan dengan properti border-style)

  • border-style:dotted solid double dashed;
    • border atas dotted
    • border kanan solid
    • border bawah double
    • border kiri dashed
  • border-style:dotted solid double;
    • border atas dotted
    • border kanan dan kiri solid
    • border bawah double
  • border-style:dotted solid;
    • border atas dan bawah dotted
    • border kiri dan kanan solid
  • border-style:dotted;
    • semua 4 sisi border dotted

seperti kode CSS sebelumnya, CSS border juga punya shorthand properti, urutannya sbg berikut:

  • border-width
  • border-style
  • border-color

contohnya:

border:5px solid red;

seperti biasa kalu ada yg tidak diperlukan dilewat sajaaaa .

gambar diatas diambil dari w3c school yaitu tabel properti border lengkap (maaf kepotong 2 )

10. CSS Outline

outline mirip dengan border, outline yaitu garis yang ada disekeliling suatu element diluar batas border . Berikut gambar properti-properto outline:

properti outline (w3c school)

properti outline (w3c school)

11. CSS Margin

margin mengosongkan area disekitar element (diluar border), margin tidak memiliki warna background (transparent).

ada 3 cara untuk memberi nilai pada margin, yaitu:

  1. auto: brower yang mengatur margin, hasilnya tergantung pada browser.
  2. length: mendefinisikan margin yang fix (dalam piksel/px, point/pt, em, dsb).
  3. %: mendefinisikan margin dalam % dari element.

contoh kode CSS margin:

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

margin juga punya shorthand properti, misalnya seperti ini:

margin:100px 50px;

properti margin bisa diberi satu sampai empat nilai, contoh dan aturan penulisannya adalah:

  • margin:25px 50px 75px 100px;
    • margin atas 25px
    • margin kanan 50px
    • margin bawah 75px
    • margin kiri 100px
  • margin:25px 50px 75px;
    • margin atas 25px
    • margin kanan dan kiri 50px
    • margin bawah 75px
  • margin:25px 50px;
    • margin bawah dan atas 25px
    • margin kanan dan kiri 50px
  • margin:25px;
    • semua margin 25px
properti margin (w3c school)

properti margin (w3c school)

12. CSS Padding

padding mengosongkan area disekitar konten (didalam border) dari suatu element, padding terpengaruh oleh warna background suatu element.

padding mirip dengan margin, hanya berbeda fungsinya saja.

ada 2 cara untuk memberikan nilai pada padding, yaitu:

  1. length: mendefinisikan margin yang fix (dalam piksel/px, point/pt, em, dsb).
  2. %: mendefinisikan margin dalam % dari element.

contoh kode CSS padding:

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

padding  juga punya shorthand properti, misalnya seperti ini:

padding:100px 50px;

properti padding bisa diberi satu sampai empat nilai, contoh dan aturan penulisannya adalah:

  • padding:25px 50px 75px 100px;
    • padding atas 25px
    • padding kanan 50px
    • padding bawah 75px
    • padding kiri 100px
  • padding:25px 50px 75px;
    • padding atas 25px
    • padding kanan dan kiri 50px
    • padding bawah 75px
  • padding:25px 50px;
    • padding bawah dan atas 25px
    • padding kanan dan kiri 50px
  • padding:25px;
    • semua padding 25px
properti padding (w3c school)

properti padding (w3c school)

itulah CSS dasar menurut sy di artikel selanjutnya sy akan membahas penggunaan CSS yang lebih advance dan diusahakan lebih banyak contoh dan aplikasinya

komentar yang membangun sy tunggu selalu

sumber : http://www.w3schools.com/css/default.asp

akhir kata, semoga artikel ini bermanfaat



Comments on: "Belajar CSS / Cascading Style Sheet (Pendahuluan)" (6)

  1. Wah.. Thanks Banget ni Sangat mEmbantu😀

    Oya mau tanya Bagian Background.
    Klo misalkan saya pengen Background Image web saya tu Repeat.. Tapi hanya di Sebelah Kanan dan Kiri saja bagaimana ya? Jadi di sebelah Tengah Tetep Kosong, gak ada Background Imagenya.
    Mohon Penjelasannya Thank

    • makasiiihhh🙂 syukur kalu membantu🙂
      untuk background ada beberapa cara pastinya, cuma sy sarankan penggunaan tag

      terpisah…
      misalnya: buat tiga div, div class=”kiri”, div class=”tengah”, div class=”kanan” naahh bisa diatur-atur kan mau backgroundnya gimana, yg dikasi background yg div class=”kiri” dan div class=”kanan” aja. Atau kalu mau cari referensi yg lain, bisa dicari web site yg menyediakan template CSS gratis, bisa dipelajari dari situ🙂

      moga membantu🙂

  2. Wah lumayan mumet bwt aku yg msh pemula.Kalo bwt wapsita bisa d kasih css ga?Beri contoh dong tutorialnya..:D
    thnks
    salam kenal

    • maaf sebelumnya, wapsita tuh apaan y…?? *sorry kalu katro😀

      hmm.. emang di artikel itu sy cuma tulis soal dasar2nya aja… nanti dilain kesempatan sy buat lagi yg lebih real he he

      thx for coming🙂

  3. wah.. rangkumanya lengkap gan….😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: